INSTRUCTIONS

This guide explains where to find the code, how to customize animation parameters like timing and easing, and how to completely remove the script if needed.

Where to Find and Edit the Code

To locate and edit the animation scripts in your project:

  • Go to your Webflow project
  • Click on “Site Settings”
  • Navigate to the “Custom Code” tab
  • Scroll down to the “Before </body> tag” section
  • Paste or edit the script there
  • Click Save Changes
  • Publish your site to see the effects
User interface screenshot highlighting the Webflow logo in the top-left corner of a web design editor panel.Dropdown menu from a website design interface showing options: Dashboard, Site settings highlighted with a red box and arrow.Menu options, with a red arrow pointing to the Custom code option highlighted in a box.Screenshot of code snippet editor highlighting 'Add code before </body> tag' with a red arrow and box, showing JavaScript code for gsap animation.

How to Edit GSAP Animations

animations functions and how to edit and remove them.

introAnim() function

Runs the site intro on page load, animating the nav logo into place and revealing the hero content. Behavior differs on mobile vs desktop.

1. Element Map
Selector
Animation
#nav-logo (chars)
Letters slide up into view, staggered (desktop only)
.nav-logo-wrapper
Scales down from 4x and slides up into final nav position
#nav-location, .menu-wrapper
Fades in with blur removed
2. Customizing Key Variables
// Nav logo letter stagger and speed (default: 0.1s stagger, 0.6s duration, desktop only)
introTl.fromTo(navText.chars, { yPercent: 120 }, { yPercent: 0, stagger: 0.1, duration: 0.6 });

// Nav logo scale down speed (default: 0.5s)
introTl.to(navLogoWrapper, { y: 0, duration: 0.5 });

// Nav items blur in duration (default: uses power2 ease, no explicit duration set)
introTl.to(navBlurItems, { opacity: 1, filter: "blur(0px)", ease: "power2" }, "-=.15");
3. Remove this animation
  • Comment out the introAnim() call in the DOMContentLoaded listener.
  • Also remove the gsap.set(".section.about", { opacity: 0 }) line,
    otherwise the about section will stay invisible with no timeline left to fade it back in.
  • Save and republish.
4. Visual Side Effect

Nav logo and menu items appear instantly in their final position.

heroGalleryAnim() function

Loops through hero gallery images with a reveal transition, syncing the title and year text to fade with each slide change.

1. Element Map
Selector
Animation
.gallery-image-wrapper
Reveal via clip path, one slide at a time
.hero-projects-title / .hero-year
Fade out on outgoing slide, fade in on incoming slide
.gallery-wrapper-1
Fades in with bluTriggers play/pause of the loop based on scroll visibilityr removed
2. Customizing Key Variables
// Slide reveal speed (default: 0.8s)
loopTl.to(incomingEls, { clipPath: "inset(0%)", duration: 0.8, ease: "expo.inOut" });

// Title and year fade speed (default: 0.25s)
loopTl.to([titles[currentIndex], years[currentIndex]], { opacity: 1, scale: 1, duration: 0.25 });

// Hold time on each slide before advancing (default: 1.5s)
loopTl.to({}, {}, "+=1.5");
3. Remove this animation
  • Comment out the heroGalleryAnim() call in the DOMContentLoaded listener.
  • Save and republish.
4. Visual Side Effect

Gallery stays frozen on its first slide. Titles and years remain static with no fade transitions.

signRevealAnim() function

Reveals sign elements with a diagonal clip path wipe as they scroll into view.

1. Element Map
Selector
Animation
.sign-reveal
Reveals via diagonal clip path wipe, triggered on scroll
2. Customizing Key Variables
// Reveal speed (default: 2.5s)
gsap.to(sign, { clipPath: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)", duration: 2.5 });

// Scroll trigger start point (default: "top bottom")
scrollTrigger: { trigger: sign, start: "top bottom" }
3. Remove this animation
  • Comment out the signRevealAnim() call in the window.addEventListener("load", ...) block.
  • Set the .sign-reveal elements to their final clip path state in Webflow, or add gsap.set(".sign-reveal", { clipPath: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)" }); so they don't stay hidden.
  • Save and republish.
4. Visual Side Effect

Sign elements stay hidden (clipped to nothing) unless the fallback set above is added, in which case they appear instantly in their final revealed state.

buttonAnim() function

Fills buttons with an overlay on hover, expanding on mouse enter and retracting on mouse leave.

1. Element Map
Selector
Animation
.button-overlay
Expands width to 100% on hover, retracts to 0% on hover out
2. Customizing Key Variables
// Fill speed (default: 0.4s)
gsap.to(overlay, { width: "100%", duration: 0.4, ease: "power2" });

// Applies to both .button and .button-submit-wrapper elements
gsap.utils.toArray(".button, .button-submit-wrapper")
3. Remove this animation
  • Comment out the buttonAnim() call in the DOMContentLoaded listener.
  • Save and republish.
4. Visual Side Effect

Button overlay no longer fills on hover.

textSlideUp() function

Splits text blocks into lines and slides each line up into view as it scrolls into the viewport.

1. Element Map
Selector
Animation
.text-slide-up
Split into lines, each line slides up into view on scroll
2. Customizing Key Variables
// Line stagger and speed (default: 0.08s stagger, 0.6s duration)
gsap.from(splitAllText.lines, { yPercent: 120, stagger: 0.08, duration: 0.6 });

// Scroll trigger start point (default: "top 85%" desktop, "top 90%" below desktop)
scrollTrigger: { start: belowDesktop ? "top 90%" : "top 85%" }
3. Remove this animation
  • Comment out the textSlideUp() call inside the mm.add(breakpoints, ...) block.
  • Save and republish.
4. Visual Side Effect

Text blocks appear instantly in their final position instead of sliding up. Lines are no longer split.

IMPORTANT

Do create Backup of this project right after you've purchased it so you can always revert back in case something goes wrong. Here's how to do it.

Always test changes on a duplicated version of your project. Animation values like duration, ease, and stagger can significantly affect the user experience. Experiment and preview in Webflow!

To give you more confidence and control in your deployment, Webflow launched site previews with custom code. This allows you to preview the effects of any custom code before publishing it on your Webflow site — including animations written with GSAP.

Browser window displaying a dark mode header with a blue toggle switch labeled 'Enable custom code?' turned on.