❮ Previous Next ❯

Properties You Can Animate

  • With GSAP, you’re not limited to just CSS properties or DOM elements—almost any numeric value in JavaScript can be animated. This means you can smoothly transition values inside custom objects, canvas drawings, WebGL scenes, Three.js models, SVG attributes, scroll positions, and more.

  • Properties You Can Animate

    One of GSAP’s biggest advantages:

    You can animate almost anything, not just CSS.

    CSS Properties

    GSAP supports virtually all CSS properties:

    • width, height

    • border

    • backgroundColor

    • color

    • margin, padding

    GSAP handles cross-browser quirks internally, making CSS animation smooth and consistent.

    Benefits:

    • Hardware acceleration where possible

    • Superior performance vs CSS transitions

    • Smooth interpolation

  • Transforms

    GSAP excels at transform animations including:

    • x / y positioning

    • scale

    • rotate

    • skew

    • transformOrigin

    Why transforms are important:

    • Avoid layout reflow costs

    • GPU acceleration

    • Higher FPS

    GSAP uses transform matrices for silky smooth interpolation.

  • Opacity

    Opacity animations are standard but powerful for:

    • Fades

    • Reveals

    • Soft transitions

    • UI feedback

    Combined with transform, they produce professional entrance effects.

    Example: fading & sliding components in/out of view.

  • Custom Object Values

    This is where GSAP becomes truly unique.
    You can animate any numeric property of any object, not just DOM or CSS.

    For example:

    • Canvas draw positions

    • WebGL values

    • Three.js object properties

    • Numeric controls in your own JavaScript objects

    Why this matters:

    • Works with game engines

    • Works with data visualization

    • Works with physics variables

    • Works with timed state changes

    GSAP becomes a generalized interpolation engine.

❮ Previous Next ❯