Instructions

Overview

The Finify template includes custom scripts for smooth scrolling and advanced text animations using Lenis and GSAP. This page explains how they work and how you can edit or disable them.

‍

1. Smooth Scroll (Lenis)

We’ve added Lenis to enhance the scrolling experience with smoother, more fluid motion.

• File Included: lenis.min.js
• Location: Site Settings → Custom Code → Footer

Key Configuration:

let lenis = new Lenis({
 lerp: 0.1,
 wheelMultiplier: 0.7,
 gestureOrientation: "vertical",
 normalizeWheel: false,
 smoothTouch: false,
});


• lerp: Controls scroll easing (lower = smoother).
• wheelMultiplier: Adjusts scroll speed.
• smoothTouch: Enable/disable smooth scroll on touch devices.

To disable smooth scroll, simply remove the Lenis <script> and <link> lines from your Footer code.

‍

2. GSAP Animations (ScrollTrigger + SplitType)

We use GSAP with ScrollTrigger and SplitType to animate text when scrolling.

Example Used in Template:

const layoutText = new SplitType(".layout484_text", { types: "words" });
const layoutTL = gsap.timeline();

layoutTL.from(layoutText.words, {
 opacity: 0.25,
 stagger: 0.1,
 scrollTrigger: {
   trigger: ".section_home_feature",
   start: isMobile() ? "top 35%" : "top center",
   end: isMobile() ? "bottom 90%" : "bottom center",
   scrub: 2
 }
});


How It Works:

• Splits .layout484_text into words.
• Animates words on scroll with fade-in + stagger effect.
• Uses different start/end triggers for mobile vs desktop.

To remove animations, delete the GSAP and SplitType script block in Footer.

To customize animations, adjust values inside layoutTL.from() (e.g., opacity, stagger, start/end positions).

‍

3. Editing Tips

• All scripts are inside Site Settings → Custom Code → Footer.
• If you want to add new animations, duplicate the GSAP block and update class selectors.
• Ensure GSAP, ScrollTrigger, and SplitType libraries are loaded before running custom code.

‍

4. Support

If you encounter issues with animations or smooth scrolling:

• Check GSAP Documentation
• Check Lenis Documentation
• Contact our team at hello@tuppleapps.com

‍