Instructions

Selector: .trail__component

Displays a trail of images that follow the user’s cursor when hovering over the section. Each image fades in, moves toward the new mouse position, then fades and scales out.

spawnTrailImage(x, y) Handles the creation and animation of each image clone. Uses GSAP timelines for fade, movement, and scale transitions.

animateTrail() Continuously checks mouse movement and triggers new images when the cursor has moved beyond a certain threshold.

const trailThreshold = 100; // Distance in pixels the mouse must move before spawning a new image

.to(img, { opacity: 1, duration: 0.2, ease: "power2.out" }) // fade in
.to(img, { duration: 0.6, ease: "expo.out" })                // move
.to(img, { opacity: 0, scale: 0.2, duration: 0.5, ease: "power3.in" }) // fade out + shrink

duration, ease, or scale values to change the motion speed and feel.

To temporarily disable the code, comment out the whole block like this.

<!-- 
ALL THE CODE HERE WILL BE DISABLED
-->

Selector: .stat__number

Counts up from 0 to the target number when the element scrolls into view. Works with decimals and keeps suffixes (like %, K, +).

extractNumber(text) Removes all non-numeric characters to get the numeric value.

animateCounter(element) Animates the number from 0 to its final value using GSAP, updating the displayed text on every frame.

const counterDuration = 2.5; // Animation duration in seconds

gsap.to(counterObj, {
  value: targetNumber,
  duration: counterDuration,
  ease: "expo.out", // Easing for the count-up motion
  onUpdate: () => {
    element.textContent = formatNumber(counterObj.value, decimals) + suffix;
  }
});

counterDuration → controls how fast the counter runs

ease → try "power2.out", "sine.out", or "linear" for different pacing

To temporarily disable the code, comment out the whole block like this.

<!-- 
ALL THE CODE HERE WILL BE DISABLED
-->

Selector: .text-animation

Reveals headings and paragraphs with a staggered animation as they scroll into view. Each character rises and unblurs smoothly for a clean entry effect.

SplitText() Splits each text block into characters for individual animation control.

revealTimeline ScrollTrigger-powered animation timeline that controls the entry of characters.

.from(splitChars, {
  duration: 0.7,
  y: "60%",
  rotationX: -90,
  ease: "power1.inOut",
  stagger: { amount: 1.0 }
})
.to(splitChars, {
  duration: 1.0,
  ease: "power2.out",
  stagger: { amount: 1.0 }
})

gsap.to(counterObj, {
  value: targetNumber,
  duration: counterDuration,
  ease: "expo.out", // Easing for the count-up motion
  onUpdate: () => {
    element.textContent = formatNumber(counterObj.value, decimals) + suffix;
  }
});

duration, ease, or stagger.amount to modify speed and rhythm of the reveal.

To temporarily disable the code, comment out the whole block like this.

<!-- 
ALL THE CODE HERE WILL BE DISABLED
-->

Selector: .text-split

Splits each character into two stacked layers that animate vertically on hover — the main character slides out, and the duplicate slides in.

Character setup
Creates two spans per character (.char-main and .char-duplicate) and wraps them for vertical movement.

Hover timelines
‍Two GSAP timelines control hover-in and hover-out states.

.to(mainChars, {
  y: "-100%",
  duration: 0.3,
  ease: "power2.out",
  stagger: 0.02
})

gsap.to(counterObj, {
  value: targetNumber,
  duration: counterDuration,
  ease: "expo.out", // Easing for the count-up motion
  onUpdate: () => {
    element.textContent = formatNumber(counterObj.value, decimals) + suffix;
  }
});

duration → how fast each character moves

‍stagger → delay between characters

‍ease → the motion curve (try "power3.out" or "back.out(1.7)")

To temporarily disable the code, comment out the whole block like this.

<!-- 
ALL THE CODE HERE WILL BE DISABLED
-->

Selector: .digital-clock__component

Displays a live digital clock, automatically updating every second and showing the chosen timezone in either 12-hour or 24-hour format.

updateClock() Gets the current time and updates the DOM every second.

Blinking colon
‍Uses GSAP to fade the colon in and out continuously.

const clockTimezone = "America/New_York"; // Change to your desired timezone
const clockFormat24 = false;               // true = 24h format, false = 12h format

repeatDelay: 0.5 // Controls blink speed of the colon

To temporarily disable the code, comment out the whole block like this.

<!-- 
ALL THE CODE HERE WILL BE DISABLED
-->

Selector: .theme__component

Toggles between light and dark themes on click. The chosen mode is saved in local storage and applied automatically on page load.

Adds or removes the .theme--alternate class from the <body> element.

If you’re using a different theme class, update this line:

body.classList.add("theme--alternate");

<!-- 
ALL THE CODE HERE WILL BE DISABLED
-->

To temporarily disable the code, comment out the whole block like this.

Lenis creates a smooth scrolling experience across the entire site. It’s added in your Site Settings under Custom Code.

<script src="https://cdn.jsdelivr.net/npm/@studio-freight/lenis@1.0.42/dist/lenis.min.js"></script>

<script>
const lenis = new Lenis({
  smooth: true,
  lerp: 0.1,				
  wheelMultiplier: 1,
  infinite: false,
});

function raf(time) {
  lenis.raf(time);
  requestAnimationFrame(raf);
}
requestAnimationFrame(raf);
</script>

lerp: 0.1          // Adjusts scroll smoothness
wheelMultiplier: 1 // Controls scroll distance per input

To temporarily disable the code, comment out the whole block like this.

<!-- 
ALL THE CODE HERE WILL BE DISABLED
-->

In this learning path, you’ll discover all the things that make Webflow a unique, visual-first website experience platform. Whether you’re a designer, developer, marketer, or other Webflow champion, you’ll walk away with the foundations you need to start your journey.

Make the most out of this template by familiarizing yourself with Webflow basics using Webflow 101 Crash Course.

This course provides an overview of the Webflow UI, basic building blocks of the web, positioning and layout basics — all of which you’ll need to know to get up and running with this template.

Google Material Icons is a comprehensive collection of symbols designed by Google following their Material Design guidelines. These icons are available as a font family already incorporated into this project, making them lightweight and easily scalable.

To find the exact icon you need, visit the Material Icons webpage where you can browse the complete library. Click on any icon to copy the Icon name from the icon menu.

To add a new icon or replace an existing one, simply add a text element with the class "material-icons" and insert the icon name in the text field. You can customize the icons appearance using standard CSS properties such as color, font-size or font-weight.

SVG is a powerful web technology that allows designers and developers to create interactive and scalable graphics for their websites.
‍
To edit an SVG inside your Webflow project, click on the "Open Code Editor" button within the Embed element settings. This will open the code editor where you can modify the SVG code directly.
‍
To find inspiration or reference additional SVGs, you can browse online libraries where you can view and download various vector graphics. Simply copy the SVG code from these resources and paste it into your project's code editor.
‍
You can style and animate your SVGs using Webflow's visual design tools. Apply color changes, gradients, opacity adjustments, borders, and more through the standard styling options. Enhance user experience by adding hover effects, click triggers, or complex animations using Webflow's interactions panel.

Not sure where and how often you can use this Webflow template? This licensing guide breaks down all the rules for you.

Want to get in touch?