GSAP Guide

Customising timing

To change autoplay delay (default 4000ms):

const autoplayDelay = 4000;

To change animation speed (Lower number = faster transitions):

const duration = 0.85;

Change side slide position (Increase values to push side cards further away):

Left:

xPercent: -105

Right:

xPercent: 105

Change side card scale (Increase for larger side cards):

scale: 0.72

Change side card rotation (Higher values increase 3D perspective effect):

Left:

rotateY: -20

Right:

rotateY: 20

Removing Autoplay

Delete or comment out:

startAutoplay();

And remove:

section.addEventListener('mouseenter', stopAutoplay);

section.addEventListener('mouseleave', startAutoplay);

Prev/next buttons will still work normally.

Removing Slider Entirely

Delete the entire Projects Slider script block.

Default Active Image

The second image is active initially:

Change the number to use another default image.

let currentIndex = 1;

Change Fade Speed

Lower value = faster fade

duration: 0.5

Removing

Delete the entire Process Steps script block.

Default Open Item

0 = first item

let activeIndex = 0;

Change Accordion Open Speed

duration: 0.4

Used here:

gsap.to(nextBottom, {
  height: 'auto',
  duration: 0.4,
});

Change Feature Stagger Speed

Open:

stagger: 0.1

Close:

stagger: 0.05

Change Image Fade Speed

duration: 0.5

Locked Active Item

The active item cannot be closed manually.

This line prevents closing:

if (index === activeIndex) return;

Removing this line allows toggling open/close behaviour.

Removing

Delete the entire Services Accordion script block.

Setting Default Active Card

First Card:

data-default="first"

Last Card:

data-default="last"

Add these attributes on the wrapper.

Change Expanded Width

50 = 50%

const bigWidth = 50;

Change Small Card Width

const smallWidth = total > 1 ? 50 / (total - 1) : 100;

Change Card Heights

Active Card:

height: '100%'

Inactive Card:

height: '70%'

Change Animation Speed

duration: 0.8

Mobile Behaviour

The animation only runs on desktop:

(min-width: 992px)

You can change the breakpoint if needed.

Removing

Delete the entire Insights Hover Cards script block.