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.

Element:
.marquee-row
- moving right to left to create a marquee

This animation only exists in the Home page's custom code.

Element:
.home-team-marquee-row
- moving right to left to create a marquee

This animation only exists in the Home page's custom code.

Element:
#footer-marquee
- moving right to left to create a marquee

This animation exists in the site's custom code for all the pages' footer marquee animation.

Customizing Variables

Common animation settings you can adjust:

xPercent
move the element in x axis
Duration
declare how much time the animation will run
Ease
Style of motion
Repeat
indicates looping for the animation
Example: Increase duration from 30s to 60s for a slower marquee element move.
Toggle Duration (30s to 60s)

Removing Animations

To safely disable or delete an animation:

  1. Comment out or remove the related code block.
  2. Save changes and republish your project.
Note: Removed animations make elements appear instantly without transition.

Tips

  • You can remove mouseenter and mouseleave from the animation if you don't want to stop and start the animation on mouse hover. It will not affect your main marquee animation.