How to Edit GSAP Animations

General GSAP instructions

You can access the sitewide GSAP animation code by navigating to Site settings → Custom code → Footer code.

Animation specific GSAP instructions

For split lines reveal on scroll animation, the following selector(s) are used:
```
gsap.utils.toArray('[data-split="lines-scroll"]')
```
Selects all elements that have the specified attribute
For split texts reveal on scroll animation, the following selector(s) are used:
```
gsap.utils.toArray('[data-split="letters-scroll"]')
```
Selects all elements that have the specified attribute
For clip-path reveal on scroll animation, the following selector(s) are used:
```
gsap.utils.toArray('[data-animate="clip-path"]')
```
Selects all elements that have the specified attribute

How to customize

The most common animation variables are:

gsap.to(el, {
  yPercent: 0,  // vertical movement (can be positive or negative)
  autoAlpha: 1,  // combines opacity and visibility
  duration: 1.5,  // animation duration in seconds
  ease: "power2.out",  // defines easing
  stagger: 0.03  // delay between elements in a group
});To customize the animations, play around with these animation variables until you get desired output. For example, To slow the animation down, increase duration from 0.5 to 1.0 seconds

How to remove GSAP animations

Find the relevant animation block.
Comment out or delete the entire block of code.
Save and publish your changes.