Next ❯

GSAP CSS Introduction

  • GSAP offers various Properties which are used to Create CSS Animations.

  • GSAP can animate almost any CSS-related property of DOM elements. The most commonly animated ones include transforms, opacity, and colors — but really, GSAP can handle just about anything you throw at it. There’s no official list because it would be way too long, so the best rule is: if you’re unsure, try it out!

  • CSS Properties

    GSAP can animate all animatable CSS properties — and even some that aren’t officially animatable using regular CSS transitions.

    Hyphenated CSS Properties

    When using CSS properties in GSAP, remember that hyphenated names become camelCase.
    For example:

    • "font-size" becomes "fontSize"

    • "background-color" becomes "backgroundColor"

gsap.to(element, {
  backgroundColor: "red", // background-color
  fontSize: 12,           // font-size
  boxShadow: "0px 0px 20px 20px red", // complex strings
  borderRadius: "50% 50%",
  height: "auto",         // even animates between 'auto' and a fixed value ✨
});

  • Non-Animatable Properties

    If you include a property that can’t be animated — for example, position: "absolute" or borderStyle: "solid" — GSAP will simply apply that property instantly rather than trying to tween it.
    These non-tweenable properties are applied at the start of the animation, except for display: "none", which is applied at the end (for obvious reasons).

Next ❯