Below is plain text only.
You can copy–paste this directly into your Instructions page or GSAP Guide page.

How to Edit GSAP Scroll Animations (Services Section)

This template uses GSAP with ScrollTrigger and SplitText to create scroll-based service title and detail animations. Follow the sections below to safely customize or disable these animations.

────────────────────────

WHAT THIS ANIMATION DOES

On desktop devices only:

• Pins the Services section during scroll
• Changes active service titles one by one while scrolling
• Animates the corresponding service detail (image + button)
• Applies stagger text animation to titles
• Applies stagger reveal animation to elements with data-stagger="animate"

Mobile and tablet devices automatically skip this animation.

────────────────────────

ELEMENT MAP (ANIMATED SELECTORS)

.service-section
Main section used as the ScrollTrigger trigger.

.service-sticky-wrap
Pinned wrapper during scroll.

.service-title-wrap
Wrapper for each service title.

.service-title
Text element animated using SplitText (characters + words).

.service-item-details
Service detail panels that fade and move in/out.

Inside service details:
.service-image-wrap
Image animation (fade + move up).

.servcie-button-wrap
Button animation (scale + fade).

Global stagger animation:
[data-stagger="animate"] > *
Children animate in when entering viewport.

────────────────────────

DESKTOP-ONLY CONTROL

This animation runs only on screens wider than 1024px.

Code:
if (window.innerWidth < 1024) {
return;
}

To change breakpoint:

• Increase value to disable animation on larger screens
• Decrease value to allow animation on tablets

Example:
window.innerWidth < 1200

────────────────────────

CUSTOMIZING KEY VARIABLES

Service section scroll length:
end: "+=300%"

Increase to slow down scroll progression:
end: "+=400%"

Decrease to make transitions faster:
end: "+=200%"

────────────────────────

Title text animation speed:
duration: 0.6

Slower text animation:
duration: 1

Stagger spacing between characters:
stagger: 0.03

More dramatic stagger:
stagger: 0.06

────────────────────────

Inactive title appearance:
opacity: 0.5
color: rgba(1, 0, 10, 0.5)

You may adjust opacity or color to match branding.

────────────────────────

Service detail animation speed:
duration: 0.8

Slower transition:
duration: 1.2

Initial hidden position:
y: 200

Reduce movement:
y: 100

────────────────────────

Image animation delay:
delay: 0.2

Button animation delay:
delay: 0.4

Increase delays for more layered animation feel.

────────────────────────

STAGGER ANIMATION (DATA ATTRIBUTE)

Elements with this attribute:
data-stagger="animate"

Animate when entering viewport.

Key values:
start: "top 85%"
duration: 0.6
stagger: 0.15

To trigger earlier:
start: "top 95%"

To trigger later:
start: "top 70%"

────────────────────────

REMOVING GSAP ANIMATIONS SAFELY

Option 1: Disable only this Services scroll animation

1. Locate the ScrollTrigger.create({ ... }) block.
2. Comment out the entire block.
3. Keep the HTML and CSS unchanged.

Result:

• Services will display normally
• No pinning or scroll-based animation

────────────────────────

Option 2: Disable title text animation only

1. Locate SplitText usage inside activateService().
2. Comment out the SplitText and gsap.fromTo(split.chars, ...) block.

Result:

• Titles will still change color
• No character animation

────────────────────────

Option 3: Disable all GSAP animations in this script

1. Remove or comment out the entire script.
2. Keep layout styles intact.

Result:

• All service items appear instantly
• No scroll effects
• Layout remains stable

────────────────────────

IMPORTANT NOTES

Do not rename these classes unless you update them in the code:
.service-section
.service-sticky-wrap
.service-title-wrap
.service-title
.service-item-details

SplitText and ScrollTrigger must be loaded for this animation to work.

If GSAP is removed, this animation will not run.

────────────────────────

SAVE AND PUBLISH

After any change:

1. Save the project
2. Publish the site

If you want, I can compress this into a shorter client-only version, or convert it into a separate “GSAP Services Animation” page formatted exactly like Webflow Marketplace templates.

‍