Skip to main content

Gsap

Using events​

Sometimes it is necessary to know when the animation starts and when it ends. It is possible to know that using the following callbacks:

/src/shared/script/Banner.js
setAnimation(animation){
    this.animation = animation;
    //creates new timeline and pauses it
    this.animation.getTimeline().paused(true);

    this.animation.getTimeline().eventCallback('onComplete', this.onAnimationComplete);
    this.animation.getTimeline().eventCallback('onStart', this.onAnimationStart);
}


/**
* A function that should be called when the animation has completed.
*/
onAnimationComplete = () => {
    console.log('onComplete');
};

/**
* A function that should be called when the animation begins (when its time changes from 0 
* to some other value which can happen more than once if the tween is restarted multiple times).
 */
onAnimationStart = () => {
    console.log('onStart');
};

Enable GSDevTools​

You can enable the debug mode with GSDevTools, just add the gsdevtools=true parameter in the url. Example:

http://localhost:8000/?gsdevtools=true

Scaffold1

Simultaneously play/pausing your animations by pressing the ‘Spacebar’. Use the newest Display Boilerplate (6.4.9) in order for it to work.

caution

Only use it for QA and testing purposes, not meant to be for sharing with the client!

Using utils​

gsap.utils provides access to some surprisingly helpful utility functions. Note that many of them can optionally return FUNCTIONS so that they can be plugged directly into tweens, leveraging GSAP's function-based capabilities. In that case, they'll get called once for each target rather than just using the same end value for them all.

To view the full list, please check the official docs.