Learning GSAP Library for Animations

2023-12-18

‚Äč

GSAP (GreenSock Animation Platform)

This is the general fundamental use for GSAP library.

# only for inital state
// gsap.method(element, vars obj)
 
# for both inital and final state
// gsap.fromTo(element, { inital state }, { final state });

GSAP Library Methods

GitHub Copilot: The GSAP (GreenSock Animation Platform) library provides several methods for creating animations. Here are some of them:

  1. gsap.to(): This method animates any numeric property of an object from the current value to the value you provide.

  2. gsap.from(): This method is similar to gsap.to(), but it animates the property from the value you provide to the current value. In this method, you don't have to specify the inital state (It will figure it out by itself)

  3. gsap.fromTo(): This method allows you to define both the starting and ending values for your animation.

  4. gsap.set(): This method allows you to set the value of a property instantly, without animating it.

  5. gsap.killTweensOf(): This method allows you to stop any animation that is currently affecting the properties of a particular object.

  6. gsap.delayedCall(): This method allows you to schedule a function to be called after a certain amount of time.

  7. gsap.timeline(): This method allows you to group multiple animations together and control them as a whole.

Remember, these methods are used to animate properties of DOM elements or JavaScript objects. The properties to be animated are specified in a vars object passed as the second argument to these methods.

GSAP Library Elements

The element can be a string or a DOM element. The vars is an object that contains the properties that we want to animate. For example:

gsap.to(".box", { duration: 2, x: 100 });

This will move the element with the class of box to the right by 100px.

GSAP Library Properties

The vars object can contain many properties. Some of them are:

Column 1Column 2
xonInterrupt
yonInterruptParams
scaleonInterruptScope
opacityonResume
rotationonResumeParams
durationonResumeScope
delayonPause
easeonPauseParams
repeatonPauseScope
repeatDelayonComplete
yoyoonCompleteParams
pausedonCompleteScope
onStartonReverseComplete
onUpdateonReverseCompleteParams
onCompleteonReverseCompleteScope
onRepeatonRepeatParams
onReverseCompleteonRepeatScope
onStartParamsonUpdate
onUpdateParamsonUpdateParams
onCompleteParamsonUpdateScope
onRepeatParamsonStart
onReverseCompleteParamsonStartParams
onStartScopeonStartScope
onUpdateScopeonOverwrite
onCompleteScopeonOverwriteParams
onRepeatScopeonOverwriteScope
onReverseCompleteScopeautoKill
overwritecallbackScope
overwriteParamspaused
pauseddelay
immediateRenderduration
lazyease
autoCSSoverwrite
useFramesimmediateRender
callbackScopelazy
runBackwardsautoCSS
yoyoEaseuseFrames
keyframesrunBackwards
markersyoyoEase
autoRoundkeyframes
repeatRefreshmarkers
dataautoRound
idrepeatRefresh
parentdata
overwriteid
defaultsparent
scrollTriggerscrollTrigger
onInterruptonInterruptParams

GSAP Built in functions

  1. Staggers: This is used to animate multiple elements with a delay between each element.
  2. Timelines: This is used to group multiple animations together and control them as a whole.
  3. Controlling Tweens: This is used to control the tweens.

However, The GSAP Ease Visualizer is a great tool for visualizing the different easing options available in GSAP.