How to Edit GSAP Animations

If your project includes GSAP (GreenSock) for animations, follow these steps to customize or remove effects without breaking the layout.

Element Map

Each animation is linked to a class, ID, or attribute.

First, enable the Webflow GSAP interaction from right-side panel bottom options. Then on the left side panel, you’ll find an option called Interactions (x)⚡. There, you’ll see all the animations created with Webflow GSAP. Feel free to customize and adjust those animations.

Customizing Variables

Common animation settings you can adjust:

Duration

how long it runs

Delay

when it starts

Ease

Style of motion

ScrollTrigger

When it plays on scroll

Example: Increase duration from 0.6s to 1.2s for a slower reveal.

Toggle Duration (0.6s to 1.2s)

Removing Animations

To safely disable or delete an animation:

Comment out or remove the related code block.
If using ScrollTrigger, remove the matching ScrollTrigger code.
Save changes and republish your project.

Note: Removed animations make elements appear instantly without transition.

Tips

Keep instructions short and skimmable.
If using ScrollTrigger, remove the matching ScrollTrigger code.
Save changes and republish your project.