GSAP in Custom Code
This template includes a small GSAP snippet in custom code used to keep Lenis smooth scrolling in sync with Webflow/GSAP-driven interactions. The snippet does not animate elements directly. It only manages smooth scrolling timing and scroll update synchronization.
Location
Project Settings → Custom Code → Footer Code
Code (Lenis + GSAP Sync)
<script src="https://unpkg.com/lenis@1.3.17/dist/lenis.min.js"></script>
<script>
const lenis = new Lenis();
if (window.ScrollTrigger) {
lenis.on('scroll', ScrollTrigger.update);
}
gsap.ticker.add((time) => {
lenis.raf(time * 1000);
});
gsap.ticker.lagSmoothing(0);
</script>
How to Edit GSAP Animations
This template’s custom GSAP code is limited to the snippet above.
All other visual animations (section reveals, UI transitions, etc.) are edited via Webflow’s native Interactions panel. If you want to modify the smooth scrolling behavior, edit the Lenis initialization options in the Footer Code.
Code (Lenis options example)
const lenis = new Lenis({
// Example options (optional)
// duration: 1.2,
// smoothWheel: true,
// smoothTouch: false,
});
Element Map
There are no element-specific GSAP selectors (class/ID/attribute) used in custom code.
The GSAP snippet is used only for scroll timing synchronization.
GSAP-related lines included in custom code
// Keeps Lenis updated on every GSAP tick
gsap.ticker.add((time) => {
lenis.raf(time * 1000);
});
// Prevents timing drift by disabling lag smoothing
gsap.ticker.lagSmoothing(0);
ScrollTrigger synchronization (only if ScrollTrigger is present)
if (window.ScrollTrigger) {
lenis.on('scroll', ScrollTrigger.update);
}
Customizing Key Variables
Below are the common “knobs” you can safely adjust.
1) Lenis smoothness
Edit Lenis options to change the scroll feel:
const lenis = new Lenis({
// duration: 1.2, // Increase for slower, smoother scroll
// duration: 0.8, // Decrease for faster scroll response
});
Example: To make scrolling feel slower/smoother, increase duration from 0.8 to 1.2.
2) Keep GSAP–Lenis timing correct
Keep the following conversion as-is (GSAP ticker uses seconds, Lenis expects milliseconds):
lenis.raf(time * 1000);
3) ScrollTrigger update hook
If you use scroll-triggered animations, keep this line enabled:
lenis.on('scroll', ScrollTrigger.update);
If your project does not use ScrollTrigger, you can remove this line safely.
Removing GSAP Animations
You can remove the Lenis + GSAP sync snippet without breaking the template layout.
Disable / remove (recommended steps)
1) Go to Project Settings → Custom Code → Footer Code
2) Remove or comment out:
The Lenis CDN script tag
The Lenis initialization + GSAP ticker block
3) Save changes and republish
Visual side effects
1) The site will return to default browser scrolling
2) Webflow animations will still work, but scrolling will no longer have the Lenis smooth effect
3) Elements that were previously smoothed by Lenis will appear more “native” to the browser