How to use the gsap.to function in gsap

To help you get started, we’ve selected a few gsap examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github kenjiSpecial / interaction-with-artificial-physics-dev / app / src / js / components / jsx / app-contents / work-ball.jsx View on Github external
//this.selectedWorkPosY = -window.innerHeight/2;
        this.cameraPosX = AppStore.get("cameraPosX");
        this.cameraPosY = AppStore.get("cameraPosY");

        this.selectedWorkPosX = this.state.posX + this.cameraPosX;
        this.selectedWorkPosY = this.state.posY + this.cameraPosY;

        //console.log(this.cameraPosY);

        TweenLite.to(this, .8, {
            selectedWorkPosY: targetPosY,
            ease: Back.easeInOut.config(1),
            onUpdate: this.onClickedWorkUpdate.bind(this),
            onComplete: this.onCompleteAnimationFromWork.bind(this)
        })
        TweenLite.to(this, duration, {
            cameraPosY: 0,
            delay: .6,
            ease: Power2.easeInOut,
            onUpdate: this.onCameraPositionYUpdate2.bind(this),
            onComplete: this.onCompleteCameraAnimationFromWork.bind(this)
        });
    }
github kenjiSpecial / interaction-with-artificial-physics-dev / app-sp / src / js / components / jsx / app-content.jsx View on Github external
closeMenuHandler() {
        if (AppStore.selectedClassName() == this.props.name) {
            TweenLite.to(this.containerDom, .6, {y: "0px"});
            TweenLite.to(this.containerDom, .5, {
                scale: 1,
                ease: Expo.easeOut,
                delay: .3,
                onComplete: this.selectedTweenComplete.bind(this)
            });
        } else {
            TweenLite.to(this.containerDom, .7, {
                scale: .7,
                y: window.innerHeight,
                ease: Expo.easeOut,
                onComplete: this.notSelectedTweenComplete.bind(this)
            })
        }

        TweenLite.to(this.cover, .5, {opacity: 0, onComplete: this.coverTweenComplete.bind(this)});


    }
github kenjiSpecial / interaction-with-artificial-physics-dev / app-sp / src / js-app / apps / 05-coordintes-animation / components / ball.js View on Github external
Ball.prototype.disableTimer = function() {
    this.isDisable = true;
    this.cross = 5,
    TweenLite.to(this, .3, {rad : 0, cross: 0, ease: Power2.easeOut, onComplete: this.disableTimerComplete.bind(this)});
};
github googlecreativelab / teachable-machine-v1 / src / ui / modules / Wizard.js View on Github external
event: () => {
                    this.setText('Do something like put up your hand (see example above) and hold this green button for a couple seconds.');
                    if (GLOBALS.browserUtils.isMobile) {
                        TweenLite.to(window, 0, {scrollTo: 175});
                    }
                }
            },
github kenjiSpecial / interaction-with-artificial-physics-dev / app-sp / src / js / components / jsx / app-content.jsx View on Github external
closeMenuHandler() {
        if (AppStore.selectedClassName() == this.props.name) {
            TweenLite.to(this.containerDom, .6, {y: "0px"});
            TweenLite.to(this.containerDom, .5, {
                scale: 1,
                ease: Expo.easeOut,
                delay: .3,
                onComplete: this.selectedTweenComplete.bind(this)
            });
        } else {
            TweenLite.to(this.containerDom, .7, {
                scale: .7,
                y: window.innerHeight,
                ease: Expo.easeOut,
                onComplete: this.notSelectedTweenComplete.bind(this)
            })
        }

        TweenLite.to(this.cover, .5, {opacity: 0, onComplete: this.coverTweenComplete.bind(this)});
github idflood / TweenTime / src / scripts / core / Orchestrator.js View on Github external
var tween_duration = 0;
          var val = {};
          var easing = this.getEasing();
          val.ease = easing;

          if (property.css) {
            data_target = item._domHelper;
            val.css = {};
            val.css[propName] = first_key ? first_key.val : property.val;
          }
          else {
            val[propName] = first_key ? first_key.val : property.val;
          }

          var tween = TweenMax.to(data_target, tween_duration, val);
          propertyTimeline.add(tween, tween_time);

          for (var key_index = 0; key_index < property.keys.length; key_index++) {
            var key = property.keys[key_index];

            if (key_index < property.keys.length - 1) {
              var next_key = property.keys[key_index + 1];
              tween_duration = next_key.time - key.time;

              val = {};
              easing = this.getEasing(next_key);
              val.ease = easing;
              if (property.css) {
                val.css = {};
                val.css[propName] = next_key.val;
              }
github smashingboxes / learning-generative-art / src / js / artist.js View on Github external
static animateUniform(learningUniform, index) {
    TweenMax.to(learningUniform, GLOBALS.PAINT_TIME, {overwrite: 'all', val: uniforms.find((v) => v.name === learningUniform.name).val, ease: Linear.easeNone});
    //TweenMax.to(learningUniform, {val: uniforms.find((v) => v.name === learningUniform.name).val, ease: Linear.easeNone});
  }
  animateLearningUniforms() {
github kenjiSpecial / interaction-with-artificial-physics-dev / app / src / js-app / apps / 01-how-many-ball / app.js View on Github external
App.prototype.scaleDown = function () {

    count++;
    TweenLite.to(this, 2, {scale: 1 / count, ease: Expo.easeOut});
    var windHig = AppStore.getWindowHeight();
    var width = AppStore.getWindowWidth();


};
github googlecreativelab / teachable-machine-v1 / src / ui / components / Button.js View on Github external
down() {
		TweenMax.to(this.content, 0.12, {
			x: -(this.depthX - this.depthXPressed),
			y: (this.depthY - this.depthYPressed)
		});
	}

gsap

GSAP is a framework-agnostic JavaScript animation library that turns developers into animation superheroes. Build high-performance animations that work in **every** major browser. Animate CSS, SVG, canvas, React, Vue, WebGL, colors, strings, motion paths,

Standard 'no charge' license:…
Latest version published 4 months ago

Package Health Score

69 / 100
Full package analysis