How to Modify GSAP Code

This guide explains the basic steps for modifying GSAP animations safely and effectively. Follow these instructions when adjusting animation behavior, timing, or target elements.

1. Identify the Animation Function

GSAP animations are typically created using one of these methods:

gsap.to()
gsap.from()
gsap.fromTo()
gsap.timeline()

Example:

gsap.to(".element", {
  x: 300,
  duration: 1,
  ease: "power2.out"
});

These functions define what element animates, how it animates, and how long it runs.

2. Modify the Target Element

The first parameter in a GSAP function is the CSS selector for the element being animated.

Example:

gsap.to(".box", {...})

You can change this selector to target different elements:

.card
.hero-section
#header
.dot

Make sure the selector matches the class or ID used in the HTML or Webflow structure.

3. Adjust Animation Properties

Inside the {} object you will find properties controlling the animation.

Common properties include:
Property
Description
x
y
Moves element horizontally or vertically
scale
Changes element size
opacity
Fades element in or out
duration
Controls animation speed
delay
Delays animation start
ease
Controls motion style

Example modification:

gsap.to(".element", {
  y: -40,
  duration: 2,
  ease: "expo.out"
});

4. Control Animation Timing

GSAP allows precise control over animation timing.

Example:

gsap.to(".dot", {
  y: -20,
  duration: 2,
  repeat: -1,
  yoyo: true
});

Key timing properties:

  • duration – how long the animation runs
  • delay – delay before animation starts
  • repeat – number of repetitions (-1 for infinite)
  • yoyo – reverses animation direction

5. Modify Timeline Animations

Timelines allow multiple animations to run in sequence.

Example:

const tl = gsap.timeline();

tl.to(".box", { x: 200, duration: 1 })
  .to(".circle", { scale: 1.5, duration: 1 });

Each step in the timeline can be modified independently to adjust timing or behavior.

6. Change Animation Easing

Easing controls how the animation accelerates or decelerates.

Common easing options include:

power1.out
power2.out
expo.out
sine.inOut
back.out
elastic.out

Example:

ease: "sine.inOut"

Choosing the right easing can significantly improve animation smoothness.

7. Use Stagger for Multiple Elements

When animating multiple elements, stagger delays each animation slightly.

Example:

gsap.to(".dot", {
  y: -20,
  duration: 1.5,
  stagger: 0.1
});

This creates a sequential animation effect across elements.

8. Troubleshooting

If an animation stops working after modification, check the following:

  • Ensure the correct selector is used
  • Confirm GSAP is properly loaded
  • Check the browser console for errors
  • Verify that required plugins (such as ScrollTrigger) are registered

Example:

gsap.registerPlugin(ScrollTrigger);

9. Best Practice for Editing GSAP

To avoid breaking animations:

  • Duplicate the original code before editing
  • Modify one property at a time
  • Test changes after each edit
  • Verify animations on desktop and mobile devices

Following these steps will help ensure GSAP animations remain stable while making adjustments.