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 X React, Getting Started with GSAP + React 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
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