GSAP Visual Cheat Sheet

This is a personal project showing the main GSAP functionalities. It currently includes GSAP Core and the Scroll Trigger plugin.

Inspired by GSAP official Cheat Sheet

GSAP Core

.to()

Define the destination values

gsap.to('.cube', {
  x: '10rem',
  duration: 1,
  ease: 'power2.inOut',
  backgroundColor: 'blue',
})

.from()

Define where the values should START

gsap.from('.cube', {
  x: '10rem',
  duration: 1,
  ease: 'power2.inOut',
  backgroundColor: 'blue',
})

.fromTo()

Define where the values should strart and finish

gsap.fromTo('.cube',
  {
    x: '10rem',
    duration: 1,
    ease: 'power2.inOut',
    backgroundColor: 'blue',
  },
  {
    x: '-10rem',
    duration: 1,
    ease: 'power2.inOut',
    backgroundColor: 'red',
  },
)

Tweens Parameters

Some possibles possible parameters with tweens above

gsap.to(".cube", {
  x: '10rem', // any properties (not limited to CSS)
  width: '8rem',
  duration: 1,
  ease: 'power2.inOut',
  repeat: 3, // -1 for infinite
  repeatDelay: 1,
  yoyo: true,
  onComplete: () => alert('Animation Completed!'),
  // other callbacks:
  // onStart, onUpdate, onRepeat, onReverseComplete
});

Timelines

It's like a container for multiple tweens. Useful for a series of animations

const tl = gsap.timeline();

tl.to('.cube', { y: -100, duration: 1 })
tl.to('.cube', { x: 150, duration: 1 })
tl.to('.cube', { y: 0, duration: 1 })
tl.to('.cube', { x: 0, duration: 1 })

Timeline Parameters

Some parameters for timelines and position parameters.

const tl = gsap.timeline({
  repeat: 2,
  repeatDelay: 1,
  defaults: { duration: 1 },
})

tl.to('.cube', { y: -100 })
tl.to('.cube', { x: 150 }, 0) // start 0 seconds into the timeline (absolute)
tl.to('.cube', { y: 0 })
tl.to('.cube', { x: 0 })

Controls

Some methods to control animation (works for timelines too).

const animation = gsap.to(...)

animation.play() //always forward
animation.pause()
animation.resume() //respect direction
animation.reverse()
animation.restart()

Scroll Trigger

Show markers

Basic animation + Toggle Actions

Animate on scroll.
For better UX, all examples below will have the same start, end and toggle action.

const baseScrollTriggerConfig = {
  start: 'top 70%',
  end: 'bottom 30%',
  // onEnter, onLeave, onEnterBack, onLeaveBack
  toggleActions: 'restart pause reverse pause',
}

const baseAnimationConfig = {
  x: '20rem',
  duration: 1,
  ease: 'power2.inOut',
  backgroundColor: 'blue',
}

// Animation
gsap.to('.cube', {
  scrollTrigger: {
    trigger: '.cube',

    ...baseScrollTriggerConfig,
  },
  ...baseAnimationConfig,
})

Scrub

Animation while scrolling

gsap.to('.cube', {
  scrollTrigger: {
    trigger: '.cube',
    scrub: 3,

    ...baseScrollTriggerConfig,
    },
  ...baseAnimationConfig,
})

Pin + Scrub

Animation while scrolling + follow the scroll

gsap.to('.cube', {
  scrollTrigger: {
    trigger: '.cube',
    scrub: true,
    pin: true,

    ...baseScrollTriggerConfig,
    },
  ...baseAnimationConfig,
})

Callbacks

Do something on different triggers.

gsap.to('.cube', {
  scrollTrigger: {
    trigger: '.cube',

    onEnter: () =>
        gsap.to('.cube', { backgroundColor: 'red' }),
    onLeave: () =>
        gsap.to('.cube', { backgroundColor: 'blue' }),
    onEnterBack: () =>
        gsap.to('.cube', { backgroundColor: 'green' }),
    onLeaveBack: () =>
        gsap.to('.cube', { backgroundColor: 'yellow' }),

    ...baseScrollTriggerConfig,
    },
})