Instructions

Overview

The FinQuick 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:

<link rel="stylesheet" href="https://unpkg.com/lenis@1.2.3/dist/lenis.css">
<script src="https://unpkg.com/lenis@1.2.3/dist/lenis.min.js"></script>

<script>
let lenis = new Lenis({
  lerp: 0.1,
  wheelMultiplier: 0.7,
  gestureOrientation: "vertical",
  normalizeWheel: false,
  smoothTouch: false,
});
function raf(time) {
  lenis.raf(time);
  requestAnimationFrame(raf);
}
requestAnimationFrame(raf);
</script>

‍


• 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. How to Edit GSAP Animations

We use GSAP with ScrollTrigger and SplitType to animate text when scrolling in About Us page.

All scripts are inside Site Settings → Custom Code → Footer.

‍

Example Used in Template:‍


<!-- Include GSAP library, ScrollTrigger plugin, Split-Type library -->

<!-- GSAP Core -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>

<!-- GSAP ScrollTrigger Plugin -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>

<!-- SplitType Library -->
<script src="https://unpkg.com/split-type"></script>


<script>
document.addEventListener('DOMContentLoaded', function() {
// Function to check if the viewport width is 767px or less
function isMobile() {
  return window.innerWidth <= 767;
}

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

// Define different start and end values for mobile devices
let startValue = isMobile() ? "top 35%" : "top center";
let endValue = isMobile() ? "bottom 90%" : "bottom center";

layoutTL.from(layoutText.words,{
  // Initial opacity for each word
  opacity: 0.25,
  // Stagger animation of each word
  stagger: 0.1,
  scrollTrigger: { 
    trigger: ".section_home_feature",
    // Trigger animation when .section_home_feature reaches certain part of the viewport
    start: startValue,
    // End animation when .section_home_feature reaches certain part of the viewport
    end: endValue,
    // Smooth transition based on scroll position
    scrub: 2 
  }
});
});
</script>

‍

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

‍