Instructions

How to Edit GSAP Animations

This template uses GSAP for smooth animations. You can easily customize or remove them by editing the code inside your Page Settings or Project Settings → Custom Code.

1. Element Map

Below are all elements using GSAP:

[data-hero-image] → Image fades in, scales from 1.2 to 1, and removes blur.
[data-hero-heading] → Characters animate upward with fade, blur, and scale effect.
[data-hero-subheading] → Lines fade in and move upward after the heading animation begins.
[data-hero-paragraph] → Lines fade in after the subheading animation.
[data-nav] → Triggers the Services hover interaction.
[data-content] → Corresponding image fades in/out on hover.
[data-paragraph] → Corresponding paragraph expands and fades in on hover.

2. Customizing Key Variables

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

⏱ Delay (Optional)

delay: 0.5

👉 Adds delay before animation starts

↕️ Vertical Movement

y: 24

👉 Controls how far the element moves during the reveal.

⛕ Stagger

stagger: 0.12

👉 Adds a delay between multiple elements.

🎬 Easing

ease: 'power2.out'

👉 Options:

power1.out → soft
power2.out → smooth (default)
power3.out → stronger
linear → no easing

📍 Scroll Trigger

start: 'top 85%'

👉 Controls when animation starts:

top 90% → earlier
top 70% → later
power3.out → stronger
top center → middle of screen

🔁 Scale

Adjust the starting zoom.

scale: 1.2

🔁 Blur

Adjust the starting blur amount.

filter: "blur(24px)"

🔁 Run Once

once: true

true → animation runs only once
false → replays on scroll

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

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.

Ready to Bring Your Vision to Life?

Let’s collaborate and create visuals that truly capture your brand and story, bringing your ideas to life with a creative approach that leaves a lasting impression and builds strong audience connection while enhancing your overall brand identity.

Let’s Connect

Our Services

Photography

Cinematic Films

Brand Visuals

Creative Direction

Storytelling

Production

Photography

Cinematic Films

Brand Visuals

Creative Direction

Storytelling

Production

Photography

Cinematic Films

Brand Visuals

Creative Direction

Storytelling

Production