GSAP Guide

To activate the animations and systems in this template, all logic is driven by Custom Attributes directly inside the Webflow Designer — no need to touch the code.

🛠 What are Custom Attributes?

Custom Attributes are key-value pairs you can assign to any HTML element in Webflow. They allow you to add interactivity or behaviors that connect to the code.

🧪 How to Add One

• Select the element in the Webflow Designer.
• Go to the Settings Panel.
• Scroll down to Custom Attributes.
• Click “+ Add Custom Attribute”.
• Add the attribute name and value exactly as described in the guide (e.g. data-journey-trail, data-marquee, data-count="100").
• Publish your site — the code will automatically detect these elements.

💡 Important

• Attribute names must be exactly as written (lowercase, dash-separated).
• These attributes do not change the element visually in Webflow — they act as invisible hooks for animations and interactions.
• You can mix and match multiple attributes on the same element.

⚙️ How it works

The mouse trail creates a cinematic cascade of images that follow your cursor movement. When the mouse moves more than 100px, images spawn at the cursor position, drift with inertia, rotate dynamically, blur progressively, and fade out — creating a fluid, organic trail effect. The system cycles through multiple template images and includes a cooldown to prevent performance issues.

🧩 Customization Options

• Add data-journey-trail to the container element.
• Inside the container, add data-journey-trail-img to each image wrapper you want in the trail cycle.
• Container settings in Webflow:
  ‍position: fixed
width: 100%
height: 100vh
z-index: 99
pointer-events: none
• Image wrapper settings in Webflow:
  ‍position: absolute
‍Set your desired width and height (the code respects your sizing)
  ‍z-index: 99
• The effect only triggers inside the container area.
• Add as many data-journey-trail-img elements as you want — the system cycles through all of them.

🎯 Features

• Cinematic image cascade that transforms cursor movement into visual poetry.
• Physics-based inertia and rotation for organic, natural motion.
• Progressive blur effect as images fade — no harsh disappearances.
• Smart cooldown system prevents performance issues during rapid movement.
• Automatically cycles through all template images for variety.
• Works only within the designated container — won't interfere with other page sections.
• Scroll-aware positioning — works perfectly even when page is scrolled.

⚙️ How it works

The navbar features a dual-panel system with separate Menu and Notifications panels that animate from the right side. Both panels share the same space — opening one automatically closes the other. The system includes a backdrop overlay, smooth width animations, and integrates with Lenis smooth scroll to properly lock page scrolling when panels are open.

🧩 Customization Options

• Add id="menu-btn" to your menu trigger button.
• Add id="alert-btn" to your notifications trigger button.
• Add id="menu-close" to the close button inside the menu panel.
• Add id="alert-close" to the close button inside the notifications panel.
• Add id="menu-open" to the menu panel container.
• Add id="alert-open" to the notifications panel container.
• Add id="bg" to the backdrop overlay element.
• Panel settings in Webflow:
  ‍display: none
width: 0
• Backdrop settings in Webflow:
  ‍display: none
opacity: 0%
• Clicking the backdrop closes any open panel.
• Clicking the same trigger button toggles the panel open/closed.

🎯 Features

• Elegant dual-panel navigation that feels native to modern web apps.
• Smart panel switching — opening one closes the other seamlessly.
• Responsive behavior — panels expand to full width on mobile.
• Click backdrop to close — intuitive UX pattern users expect.
• Toggle functionality — clicking the same button opens/closes the panel.

⚙️ How it works

The marquee creates an infinite horizontal scroll of content. The system automatically clones your content to ensure seamless looping, calculates optimal animation duration based on content width and speed, and handles resize events intelligently. It includes visibility detection to pause when off-screen and respects reduced motion preferences for accessibility.

🧩 Customization Options

• Add data-marquee to the marquee wrapper.
• Inside the wrapper, add one element with data-marquee-list that contains all inline items.
• Configure the wrapper using optional attributes:
  i. data-marquee-speed — scrolling speed in pixels per second (default 60).
  ii. data-marquee-direction — left or right (default left).
  iii. data-marquee-gap — spacing between items (CSS length, default 2rem).
  iv. data-marquee-speed — to pause the marquee on hover.
• Ensure your items are inline-friendly (e.g., spans, links, images). The track uses flex layout with no wrapping.
• If your items include images, set consistent dimensions (width/height or aspect‑ratio) to avoid layout shifts.

🎯 Features

• Buttery-smooth infinite loop with zero visual glitches.
• Direction and speed control per marquee instance.
• Optional pause-on-hover for better content readability.
• Mobile-optimized — no flicker or restart on scroll (address bar changes).
• Performance-conscious — pauses automatically when scrolled out of view.
• Accessibility-first — respects prefers-reduced-motion system setting.
• GSAP Context cleanup for proper garbage collection in SPAs.
• Supports any content — text, images, logos, cards, or mixed elements.

⚙️ How it works

When hovering over service items, an associated image reveals and follows the cursor with physics-based smoothing. The image enters with a subtle upward motion and opacity fade, then tracks the cursor position with configurable offset and rotation based on horizontal position. Moving left rotates the image left; moving right rotates it right — creating natural, reactive motion.

🧩 Customization Options

• Add the class services_item to each service list item.
• Inside each item, add an image element with class services_image.
• The image follows the cursor within the boundaries of its parent item.
• Image settings in Webflow:
  position: absolute
  opacity: 0%
  Set your desired size and position

🎯 Features

• Magnetic cursor-following that feels alive and responsive.
• 92% smoothing creates that premium, high-end feel.
• Dynamic rotation based on cursor position — subtle but impactful.
• Smooth entrance animation — images don't just appear, they arrive.
• Desktop-only by default — no awkward touch interactions on mobile.
• RequestAnimationFrame loop for silky 60fps performance.
• Multiple service items supported — each with independent tracking.

⚙️ How it works

Numbers animate from a starting value to a target value when scrolling into view. The system automatically detects decimal places from your target number and maintains the same format throughout the animation. Supports both dot and comma as decimal separators — perfect for international number formats.

🧩 Customization Options

• Add data-count="100" to any text element with your target number.
• Optional: add data-count-start="50" to set a starting number (default 0).
• Optional: add data-count-duration="3" to set duration in seconds (default 2).
• For decimals, use the format you want displayed:
  data-count="99.9" for dot separator
  ‍data-count="99,9" for comma separator
• The animation triggers once when the element enters the viewport (top 85%).
• Set the initial text content to match your start value (e.g., 0 or 0.0).

🎯 Features

• Scroll-triggered counting that brings your metrics to life.
• Automatic decimal detection — set your target, it handles the rest.
• International format support — works with both 1.5 and 1,5 notation.
• Plays once per page load — no repeated animations on scroll up/down.
• Customizable per-element — different speeds and start values as needed.
• Integrates with ScrollTrigger for precise viewport detection.

⚙️ How it works

Lenis provides butter-smooth scrolling across the entire page, integrated with GSAP's ScrollTrigger for synchronized scroll-based animations. The template exposes Lenis globally (window.lenis) so other systems (like the Navbar Toggle) can properly pause/resume scrolling.

🧩 Customization Options

• Lenis is initialized in the site's custom code (before </body>).
• To pause scrolling programmatically, use window.lenis.stop().
• To resume scrolling programmatically, use window.lenis.start().

🎯 Features

• Transforms standard scrolling into a premium, fluid experience.
• Perfect ScrollTrigger integration — all scroll animations stay synchronized.
• Global access allows other components to pause/resume as needed.
• No fighting with native scroll — works harmoniously with the browser.