Instructions

Guided Instructions

GSAP Animation Guide

Instructions Guide

Slider Overview

This is a responsive slider built with GSAP, featuring autoplay, navigation controls, and a smooth infinite loop. It automatically adapts to different screen sizes and updates UI elements like progress and slide count.

Required Structure

Make sure your Webflow classes match exactly:

.value-section-inner → Main wrapper  
.value-slides-wrapper → Slides container  
.value-slide → Each slide  

.value-slider-prev → Previous button  
.value-slider-next → Next button  
.value-slider-progress-line → Progress bar  
.value-slider-fraction → Counter

How It Works

Slider creates a seamless loop using cloned slides
Moves with smooth GSAP animation
Updates progress bar and slide number automatically
Rebuilds on screen resize for responsiveness

Features

Responsive: 1 slide (mobile), 2 slides (desktop)
Autoplay: Runs every 4 seconds
Pause on Hover: Stops when user hovers
Manual Control: Next/Prev buttons

Customization

Autoplay Speed

const autoplayDelay = 4000;

Animation Speed

duration: 0.5

Responsive Slides

return window.innerWidth < 480 ? 1 : 2;

Important Notes

Do not change class names
Ensure GSAP is included in your project
Place the script before the closing </body> tag

FAQ overview

This FAQ section uses a custom GSAP animation. Only one FAQ item can remain open at a time. When a new FAQ is opened, the previously opened FAQ will automatically close.

Default Open FAQ

Currently, the first FAQ item opens automatically when the page loads.

In the code:

let activeIndex = 0;

Animation Speed

duration: 0.4

Make Animation Faster

duration: 0.2

Make Animation Slower

duration: 0.8

Icon Rotation

When a FAQ is opened, the icon rotates:

rotate: 45

Change Rotation Angle

rotate: 180

3. Content Cards

Each content item needs:

duration: 0.4

Required Class Names

Do not rename the following classes, otherwise the FAQ functionality will stop working:

FAQ Wrapper

faq-item

FAQ Content

faq-content

FAQ Icon

faq-icon

.wcu-tab-link

FAQ Does Not Open

Check:

GSAP is loaded correctly.
Class names have not been changed.
Custom code is placed before the closing </body> tag.

Smooth Scrolling Instructions (Lenis + GSAP) overview

This website uses Lenis Smooth Scrolling integrated with GSAP ScrollTrigger.

Scroll Speed

duration: 0.8

Easing Settings

Current easing:

const lenis = new Lenis({
  duration: 1.5,
  easing: (t) => 1 - Math.pow(1 - t, 3),
  smoothWheel: true,
  smoothTouch: false
})

Mobile & Tablet Behavior

Change:

smoothTouch: false

To:

smoothTouch: true

Enable Smooth Scroll on Mobile

Each content item needs:

duration: 0.4

Each content item needs:

wheelMultiplier: 0.9
touchMultiplier: 1.5

Scroll Animations Not Triggering

The custom code is placed before the closing </body> tag.