GSAP

The most common reusable custom animations built with GSAP. They can be used as simple intro animations or page transitions.

Usage

A great place to get started with GSAP and React is to read GSAP with React, GSAP method gsap.context() and GSAP React Advanced Animation Techniques. Wrap your component with an animation such as FadeInOut, TranslateInOut, ScaleInOut...

Each animation component has built in flexibility for different scenarios:

  • Setting different durations and delays for intros and outros
  • You can easily overwrite the default ease in any animation by setting the ease prop. Use the GreenSock Ease Visualizer to help you choose exactly the type of easing that you need
  • Skipping the outro animation
  • Creating scroll interactions and animate your component with GSAP ScrollTrigger by setting the watch prop to true (default: false). Determining the start and end position of the ScrollTrigger with start (default: 'top bottom') and end (default: 'bottom top') prop
  • Setting markers prop to true during development allows you to see exactly where the start/end/trigger points are

Animations

FadeInOut

durationIn="1.5"
delay="0.4"
ease="slow"
watch

TranslateInOut

durationIn="1.5"
delay="0.4"
y="100%"
start="-100% bottom"
end="top top"
watch

ScaleInOut

durationIn="1"
delay="0.4"
ease="elastic.out"
y="100%"
watch

RotateInOut

fade="false"
durationIn="0.6"
rotateTo="360"
start="bottom bottom"
end="top top"
watch
scrub

Custom animations

ClipPathInOut

fade="false"
delay="0.4"
clipPath="inset(0% 100% 0% 0%)"
watch

image

RotateInOut3D

durationIn="1 + Math.random()"
y="100px"
start="-100px bottom"
watch

ImplodeExplodeInOut

delay="0.5"
target="#implode-explode"
watch

Build complex animations and page transitions with GSAP and Next.js

ShuffleTextInOut

delay="0.3"
target="#shuffle"
watch

GreenSock