2. Animation Fundamentals Before GSAP

Before writing code or applying utility classes, this module focuses on the principles behind motion on the web. It introduces the ideas that make animation feel smooth, intentional, and professional: timing, duration, delay, easing, sequencing, spatial movement, scaling, opacity, and visual hierarchy. This is important because many animation problems are not caused by the tool, but by weak animation decisions. A solid foundation here makes everything in GSAP and Glaze easier to understand later. ✨

The module is especially useful if your CSS and JavaScript background is still developing. Rather than expecting you to already know how transforms, positioning, or browser rendering work, it gradually explains the concepts that animation depends on. You will learn the difference between animating layout-related properties and animating performant properties such as and , why some effects feel heavy or awkward, and how motion can support communication rather than distract from it.

Another key goal of this module is to train your eye. Good animation is not only technical; it is also editorial and intentional. You will begin to recognize when an effect is too fast, too dramatic, too repetitive, or disconnected from the content. By the end of this section, you should be able to evaluate motion more confidently and prepare for GSAP with a much stronger sense of why certain animation choices work better than others. 👀