gsap-notes.js

//Methods
// TweenLite.to() method
// TweenLite.to(selector, animationDuration, {propertiesToChange})

// TweenLite.FromTo() method
// TweenLite.to(selector, animationDuration, {initialProperties}, {endingProperties})

// TweenLite.set() method
// TweenLite.set(selector,animationDuration, {propertiesToChange})

// TweenLite.from() method
// TweenLite.from(selector,animationDuration, {initialproperties})

// Ease visualization
// https://greensock.com/ease-visualizer

// Callbacks

const onStart = () => {
  console.log('animation started')
}

const onUpdate = () => {
  console.log('animation is in progress')
}

const onComplete = () => {
  console.log('animation is complete')
}

TweenLite.from(selector, animationDuration, {
  initialproperties,
  onStart,
  onUpdate,
  onComplete
})

// Timeline

const tl = new TimelineLite()

tl
  .from(selector, animationDuration, {propertiesToChange}, animationTime)
  .from(selector, animationDuration, {propertiesToChange}, animationTime)
  .staggerFrom(nodelist, animationDuration, {cycle: {property: [valueOne, valueTwo]}, delayBetweenEachItem)
  .staggerFrom(nodelist, animationDuration, {propertiesToChange}, delayBetweenEachItem)

// Useful tl.seek(position)
// Jumps to a specific time (or label) without affecting whether or not the instance is paused or reversed
tl.seek(1.3)
tl.pause()