❮ Previous Next ❯

Tween Duration and Timing

  • Duration and timing in GSAP define how long an animation should run and when it should start. By adjusting these values, developers gain precise control over the pacing, rhythm, and flow of motion on a webpage. 

  • Duration & Timing

    Duration and timing control when and how long animations run. GSAP gives granular control, allowing for highly customized motion design.

    Duration

    What it is:
    Specifies how long a tween runs (in seconds).
    Example meaning: duration: 1 means the animation will run over 1 second.

    Why it's useful:

    • Controls the speed of transitions

    • Helps sync animations

    • Allows ease-based feel control

    Proper duration selection affects UX responsiveness.

    Delay

    What it is:

    Adds waiting time before an animation begins.

    Use cases:

    • Sequencing without timelines

    • Creating anticipation

    • Staggered entrances

    Delays stack beautifully with multiple elements for organized motion.

    Staggering Animations

    What it is:
    Applies timing offsets to multiple targets, animating them one after another.

    Why it matters:

    • Enables dynamic wave-like effects

    • Reduces visual clutter

    • Improves perceived motion rhythm

    Stagger can be:

    • sequential

    • center-out

    • random

    • grid-based

    This feature is one of GSAP’s most popular animation superpowers.

    Repeat & repeatDelay

    Repeat
    Controls how many times an animation cycles through.

    • repeat: 1 runs twice total

    • repeat: -1 loops infinitely

    Use cases:

    • Loading indicators

    • Pulsing UI elements

    • Continuous movement

    repeatDelay

    Adds downtime between repeats.

    Good for:

    • Paused breathing effects

    • Dramatized loops

    • Controlled cycles

    Yoyo Effect

    What it is:
    Makes repeated animations reverse direction on alternate cycles.

    Example motion:
    Forward ➜ Backward ➜ Forward ➜ Backward …

    Why use it:

    • Natural bounce effects

    • Pendulum-like motions

    • Organic looping

    In combination with easing, yoyo feels impressively smooth.

  • Duration and Timing in GSAP control how long an animation runs and when it begins. By fine-tuning these values, developers can create smooth, natural motion and synchronize animations perfectly with other elements or events, enhancing the overall flow and visual rhythm of a webpage.

❮ Previous Next ❯