Instruction

Lenis - Smooth Scroll

The template integrates the Lenis library to deliver a smooth scrolling experience.

<head>

<!-- Lenis script and styles Start -->
<link rel="stylesheet" href="https://unpkg.com/lenis@1.3.4/dist/lenis.css">
<script src="https://unpkg.com/lenis@1.3.4/dist/lenis.min.js"></script>

<body>

<!-- Lenis Script Start -->
<script>
// Initialize Lenis
const lenis = new Lenis({
  smooth: true,
  lerp: 0.1,
  wheelMultiplier: 1,
  infinite: false,
});

// Use requestAnimationFrame to continuously update the scroll
function raf(time) {
  lenis.raf(time);
  requestAnimationFrame(raf);
}

requestAnimationFrame(raf);
</script>

The custom code shown above can be updated in Project Settings → Custom Code within the project settings.

How to Edit GSAP Animations

This project uses GSAP for the Hero 3D Slider animation(Home Page).

1. Element Map

Below are the elements used in GSAP:

.hero-image-block

→ Each slide in the slider
→ Moves left/right with 3D depth effect (x + z animation)

2. Customizing Key Variables (Hero Slider)

You can easily control animation behavior by editing these values:

⏱ Duration (Animation Speed)

duration: 0.8

Lower value = faster animation
Higher value = slower animation

👉 Example:

0.8 → normal speed
1.2 → slower and smoother

🔁 Autoplay Speed (Slider Interval)

setInterval(animateSlider, 2000);

2000 = 2 seconds
Increase for slower slide change
Decrease for faster slide change

👉 Example:

3000 → Slower
1500 → Faster

🎢 Ease (Animation Style)

ease: 'power2.inOut'

You can change easing style:

'linear' → no easing (straight motion)
'power1.inOut' → soft
'power3.inOut' → more smooth

📐 Position & Depth

const positions = [
  { x: '-60%', z: -800, opacity: 1 },
  { x: '-24%', z: -260, opacity: 1 },
  { x: '0%', z: 0, opacity: 1 },
  { x: '24%', z: -260, opacity: 1 },
  { x: '60%', z: -800, opacity: 1 },
];

You can change easing style:

x → controls horizontal position
z → controls 3D depth
opacity → show/hide slide

3. Removing GSAP Animations

Follow these steps to disable the slider animation:

Step 1: Remove or Comment JS Code (Project Settings → Custom Code -> Footer)

// Comment or delete this block
window.addEventListener('DOMContentLoaded', () => {
  ...
});

Step 2: Remove GSAP Script (Project Settings → Custom Code -> Header)

<!-- Remove this -->
<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>

Step 3: Publish Site

Save changes
Publish your Webflow project

Lenis - Smooth Scroll

How to Edit GSAP Animations

1. Element Map

2. Customizing Key Variables (Hero Slider)

3. Removing GSAP Animations

Where you belong.