GSAP Docs

Setup

Add the following scripts before your closing </body> tag:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
<script src="/animations.js"></script>

Data Attributes

data-animation=""

The scroll animation preset to apply

data-animation="fade-up"

data-hover=""

The hover animation preset to apply

data-hover="lift"

data-delay=""

Delay before animation starts (in seconds)

data-delay="0.3"

data-duration=""

Override the preset animation duration (in seconds)

data-duration="1.5"

data-stagger=""

Stagger child elements animation (in seconds)

data-stagger="0.1"

data-repeat=""

Control how many times animation plays: "once" (default), "always", or a number

data-repeat="always"

Scroll Animations data-animation

Fade Animations

fade-up

Scroll to see

fade-down

Scroll to see

fade-left

Scroll to see

fade-right

Scroll to see

fade-in

Scroll to see

Slide Animations

slide-up

Scroll to see

slide-down

Scroll to see

slide-left

Scroll to see

slide-right

Scroll to see

Scale & Transform

scale-up

Scroll to see

scale-down

Scroll to see

rotate-in

Scroll to see

blur-in

Scroll to see

Text Animations

text-reveal

Reveal

text-blur

Blur In

text-slide-up

Slide Up

text-scale

Scale

Hover Animations data-hover

Note: Hover over the boxes below to see the effects

lift

Hover me

grow

Hover me

shrink

Hover me

glow

Hover me

tilt

Hover me

slide-right

Hover me

brighten

Hover me

Stagger Example

Use data-stagger to animate child elements sequentially:

<div data-animation="fade-up" data-stagger="0.1">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Item 1

Item 2

Item 3

Item 4

Combining Animations

You can combine scroll animations with hover effects on the same element:

<div data-animation="scale-up" data-hover="lift">
  Animates on scroll AND hover
</div>

Scroll & Hover me

Repeat Control

<!-- Default: plays once -->
<div data-animation="fade-up">Once</div>

<!-- Plays every time you scroll past -->
<div data-animation="fade-up" data-repeat="always">Always</div>

<!-- Plays specific number of times -->
<div data-animation="fade-up" data-repeat="3">3 times</div>