Customizing Colors
To change a color:
Open the Variables panel.
Select the color variable you want to modify.
Make your changes, and they will automatically apply throughout the site.
Changing Fonts
To update fonts:
Go to Site Settings > Fonts.
You can upload custom fonts or choose from Google Fonts to match your brand style.
Smooth Scrolling
This provides smooth scrolling across the entire template. To turn off just comment out this code or delete the code from site settings.
// Initialize Lenis smooth scroll
const lenis = new Lenis({
duration: 1.2,
easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
smooth: true
});
// Connect Lenis to GSAP ScrollTrigger
lenis.on('scroll', ScrollTrigger.update);
gsap.ticker.add((time) => {
lenis.raf(time * 1000);
});
gsap.ticker.lagSmoothing(0);Interactions
To edit animations:
Open the Navigator panel.
Select the section that contains the animation.
Go to the Interactions tab to modify or replace the animation as needed.
Nav Link item and Footer Widget item also use GSAP hover Intersection
Note: Some elements may be set to visibility: hidden, display: none, or opacity: 0. To edit these, simply change their visibility in the Style panel to reveal them.
Template Support
Need help? We’re here for you!
Contact us through Webflow Support and we’ll respond promptly to assist with your questions.