Modifying GSAP Animations

1. Where the GSAP code lives

HelloBot's scroll and entrance animations run on GSAP (the same engine behind Webflow Interactions). The animation logic sits in a custom init script, loaded after the GSAP library.

• Open Site Settings → Custom Code, or the page-level custom code, and look for a script that loads gsap.min.js (and often ScrollTrigger.min.js).
• Below those libraries is your init script — the block containing gsap.to(...) / gsap.from(...) calls. This is the file you edit to change animations.
• Keep the load order: GSAP core → plugins (ScrollTrigger) → your init script, placed in the footer so the DOM exists first.

2. Anatomy of a tween

Every animation is a tween: a target, plus a vars object describing the end state and timing.

// Fade + rise the hero title on load
gsap.from(".hero-title", {
  y: 40,          // move up from 40px below
  autoAlpha: 0,   // fade in (opacity + visibility)
  duration: 0.8,  // seconds
  ease: "power3.out"
});

• gsap.to() — animate from the current state to the values you give.
• gsap.from() — animate from the values you give to the current state (great for entrances).
• gsap.fromTo() — define both start and end explicitly.

Use transform aliases (x, y, scale, rotation) and autoAlpha instead of animating left/top/opacity — they're smoother and avoid layout reflows.

3. Adjusting timing, easing & stagger

To re-tune an existing animation, change these vars:

// Stagger the feature cards in, one after another
gsap.from(".card-title", {
  y: 24,
  autoAlpha: 0,
  duration: 0.6,
  ease: "power2.out",
  stagger: 0.1
});