How to Edit GSAP Animations

This template uses GSAP (GreenSock Animation Platform) and the Draggable plugin for an interactive slider and animated cards. You can customize or disable these animations safely by following the steps below.

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

Element Map (Animated Elements)

.slider-track
Slider track container used as the drag boundary.

.slider-thumb
Draggable handle that moves horizontally.

.slider-fill
Animated fill bar that updates based on slider position.

.slider-tooltip
Live-updating tooltip showing the calculated spend value.

.card-swipix
.card-1
.card-2
.card-3
.card-4
Cards that animate progress and numbers based on slider movement.

Inside each card:
.card-fill
Animated progress bar.
.card-value
Animated number value (count-up effect).

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

Customizing Key Variables

Change overall maximum slider value:
MAX_SPEND controls the highest possible value.

Example:
const MAX_SPEND = 2000000;

Increase this number to allow higher values.
Decrease it to limit the range.

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

Change maximum value per card:

Each card has its own max value.

Example:
{ el: ".card-1", max: 15645 }

Edit the max number to match your data.

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

Change animation speed (duration):

Slider fill animation:
duration: 0.2

Slower animation example:
duration: 0.5

Card fill and number animation:
duration: 0.45

Slower reveal example:
duration: 0.9

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

Change easing (animation feel):

Common options:
ease: "power2.out"
ease: "power3.out"
ease: "none"

power3.out = smoother, premium feel
none = linear movement

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

Control drag momentum:

inertia: true
Enables smooth momentum while dragging.

inertia: false
Disables momentum for direct movement.

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

Removing GSAP Animations Safely

Step 1: Disable dragging (keeps layout intact)

Comment out the Draggable block:

// Draggable.create(thumb, {
//   type: "x",
//   bounds: track,
//   inertia: true,
//   onDrag: update,
//   onThrowUpdate: update
// });

Result: slider will stop moving but remain visible.

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

Step 2: Remove animation effects (instant updates)

Replace animated fill:
fill.style.width = ${progress * 100}%;

Replace card fill animation:
bar.style.width = ${(amount / card.max) * 100}%;

Replace animated number:
value.innerText = $${amount.toLocaleString()};

Result: values update instantly without animation.

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

Step 3: Save and republish the site

After changes:
Save project
Publish site

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

Important Notes

Do not rename these classes unless you update them in the code:
.slider-track
.slider-thumb
.slider-fill
.slider-tooltip
.card-fill
.card-value

Removing GSAP does not affect layout or responsiveness.
Elements will appear instantly instead of animating.