Instructions

GSAP Animation Guide

GSAP Guide

You can find the code in (Site settings) Footer Code.

Card Scaling Interaction

GSAP Setup Guide

Create a dynamic hover-based card scaling layout using GSAP. Each card expands smoothly on hover while others adjust width proportionally.

Required Structure (Webflow Setup)

1. Wrapper Element

Add a parent div:

  • Class name: about-scaling-cards-wrap

👉 This is the main container that controls hover reset behavior.

2. Card Elements

Inside the wrapper, create your cards:‍

  • Class name: about-scaling-card

👉 This is the main container that controls hover reset behavior.

3. Attribute Setup (IMPORTANT)

Must add a custom attribute to each card in Webflow

  • data-card=01
  • data-card=02
  • data-card=03

⚠️ Important:

  • First card must be 01
  • Do not skip numbering
  • Must be inside the same wrapper

Customization Options

Animation Speed

Modify transition timing:

duration: 0.6
Easing Style

Change motion feel:

ease: "power3.out"
Layout Sensitivity

Adjust scaling balance:

smallWidth = 100 / (total + 2)
Notes
  • Do not define widths in CSS
  • Best used in horizontal layouts
  • Ensure no conflicting Webflow interactions on the same elements

GSAP Horizontal Scroll (Cars Wrapper

🔧 Required Structure

Make sure your element setup is correct:

  • Element: Cars Wrapper (moving content)
  • Parent: Section wrapper (overflow hidden)

Add this attribute:

data="CardsWrapper"
⚙️ How to Modify

1. Change scroll start/end position

start: "top 50%",
end: "top 30%",
  • 50% → animation starts later (more scroll needed)
  • 30% → animation ends earlier
2. Change animation speed (smoothness)
scrub: 1.5,
  • 1 → faster response
  • 1.5–2.5 → smooth premium feel
  • 3+ → very slow motion
3. Change direction
x: () => -getScrollAmount()
  • - → moves left
  • remove - → moves right
4. Disable animation temporarily
// ScrollTrigger will be disabled
scrollTrigger: false
  • OR remove whole gsap.to() block
⚠️ Important Notes
  • Parent must have overflow: hidden
  • Cars Wrapper must be horizontal (flex row / nowrap)
  • Do not set fixed width on parent (breaks scroll calculation)