2.1 What web animation actually is Before learning GSAP or Glaze , it is extremely important to understand what web animation actually is . If you understand this foundation well, then everything later—timelines, easing, scroll animations, stagger effects, interactive motion—will make much more sense. 🧭 Web animation is not just “making things move.” It is the controlled change of something on a webpage over time. That sentence sounds simple, but it contains the whole idea: There is a thing for example: a heading a button an image a card a menu a section background There is a property that can change for example: position size opacity rotation color scale There is time the change does not happen instantly, but over a duration such as: 0.2s 0.8s 2s There is a rule for how the change happens over that time for example: linear ease-in ease-out bounce elastic So, if a card goes from invisible to visible in 0.6s with a soft ease-out, that is web animation. A simple definition A practical definition is: Web animation is the visual transition of one or more properties of an element over time, usually in response to page load, scrolling, hovering, clicking, or some other event. This means animation always involves these building blocks: Element Property Start state End state Duration Timing/easing Trigger Let’s look at each one carefully. 1. The element: what is being animated? An animation always affects some part of the page. That could be: A single HTML element for example: a button an image a heading A group of elements for example: several cards in a grid menu items testimonial slides A pseudo-element such as decorative parts created with CSS An SVG element for example: paths circles icons logos Even values not directly visible as “elements” like scroll position, numerical counters, or CSS custom properties In your WordPress and BricksBuilder workflow, the “element” will often be something like: a Bricks section a container a block a heading a button an image a class-selected group of elements So when we animate, we are always asking: Which thing on the page do I want to change? 2. The property: what exactly changes? Animation is not movement only. That is a very common misunderstanding. An animation can change many different kinds of properties. Common visual properties Opacity makes something fade in or out example: opacity: 0 to opacity: 1 Position moves something horizontally or vertically example: from left to right from lower position to upper position Scale makes something grow or shrink example: scale: 0.8 to scale: 1 Rotation turns an element example: rotate: 0deg to rotate: 180deg Size width, height, padding, etc. Color text color, background color, border color Blur or filter effects for modern visual transitions Clip or mask effects reveal animations, image wipes, text reveals SVG stroke values often used for “draw-on” effects Numerical values counters, progress bars, percentages Important concept Animation is simply: $$ \text{property at time } t $$ changing from one value to another. For example: $$ \text{opacity}: 0 \to 1 $$ or $$ y: 50 \to 0 $$ GSAP makes this easy, but the underlying idea exists even without GSAP. 3. Start state and end state Every animation needs at least two states: Start state End state Example: Start: the element is invisible and slightly lower End: the element is visible and in its normal position In CSS-like thinking, that might mean: start: opacity: 0 transform: translateY(30px) end: opacity: 1 transform: translateY(0px) This is one of the most important mental models in animation: Animation is the transition between states. Without states, there is no animation—only a static design. Why this matters so much When beginners say, “My animation doesn’t work,” the problem is often that one of these is unclear: They do not know the start state. They do not know the end state. They did not set the start state properly. The browser cannot interpolate the values the way they expect. So before you animate anything, ask yourself: Where does it begin? Where does it end? What values are changing? That single habit will save you a lot of frustration later. ✅ 4. Time: animation is controlled change across duration The next core ingredient is time . If a property changes instantly, that is not really perceived as animation. It is just a jump. Animation becomes animation when the browser shows intermediate values between the start and end over a duration. For example: At 0s opacity is 0 At 0.3s opacity may be around 0.5 At 0.6s opacity reaches 1 So the browser (or GSAP) calculates many little in-between states. This is often called interpolation . Simple idea of interpolation If you move from: $$ x = 0 $$ to $$ x = 100 $$ over 1 second, the browser or animation engine computes the intermediate positions between 0 and 100 over that second. That means the motion is not magic. It is calculated progression over time. 5. Easing: how the animation feels This is where animation stops feeling mechanical and starts feeling natural. Two animations can have: the same start the same end the same duration But still feel completely different because of easing . What easing means Easing describes how speed changes during the animation . For example: Linear constant speed from start to finish feels mechanical Ease-in starts slowly, then speeds up Ease-out starts quickly, then slows down near the end Ease-in-out starts slowly, speeds up, then slows down Bounce / elastic / back creates stylized motion Why easing matters Real-world objects rarely move at perfectly constant speed. Think of: a car starting to move a drawer closing a ball bouncing a phone menu sliding in They accelerate and decelerate. So easing gives digital movement a more human, physical, or polished feeling. A design truth A large part of “professional-looking animation” is not just what moves , but how it moves . Beginners often focus on dramatic motion: huge slides giant zooms wild rotations Professionals often focus more on: subtle movement controlled timing good easing restraint That is one of the biggest mindset shifts in motion design. 🎯 6. Trigger: when does the animation begin? Animation usually does not happen randomly. It needs a trigger. A trigger is the event or condition that starts the animation. Common triggers on the web Page load when the page first appears Scroll when an element enters the viewport when the page reaches a certain position when animation is linked directly to scroll progress Hover when the mouse moves over an element Click / tap for menus, accordions, popups, tabs Focus important for forms and accessibility Time delay animation starts after a short wait Custom logic e.g. after AJAX load, after filtering, after a slider changes In WordPress/BricksBuilder sites, many of your future animations will likely be triggered by: section load scroll into view hover click on a burger menu or button scroll progress across a hero section So another core question is: What event causes this change to begin? 7. Animation is communication, not decoration This is one of the most important conceptual lessons. Many people think animation is just visual decoration. Sometimes it is—but good animation usually has a purpose. What animation can communicate Attention “Look here first.” Hierarchy “This item is more important than that one.” Relationship “These things belong together.” Cause and effect “You clicked this, so that happened.” Direction “This panel came from the side.” “This dropdown belongs to this button.” State change “This item is now active/open/selected.” Feedback “The system received your action.” Continuity “The interface is changing, but in a way you can follow.” Example Imagine a menu opens instantly with no motion. It works. But it may feel abrupt. Now imagine the menu fades and slides down slightly from the header. The user understands where it came from. The transition feels connected. The interaction feels more polished. That is animation as communication. 8. Good animation reduces confusion When interfaces change suddenly, users can lose track of what happened. Animation helps bridge that gap. For example: A modal appears if it simply pops in instantly, it can feel jarring if it fades and scales in subtly, the brain follows the change more easily A card expands animation shows that the larger panel is connected to the smaller card A mobile menu opens motion helps users understand spatial relationship In this way, animation is not just aesthetic—it improves usability . 9. But too much animation creates confusion This is the other side of the coin. Bad animation can make a website feel: slow chaotic childish distracting hard to use Common beginner mistakes Animating too many elements everything fades, slides, spins, bounces at once Using too much distance elements fly in from far away Using too much duration animations take too long and slow down the experience Using inappropriate easing bouncy effects on serious business websites Animating for no reason motion that adds no meaning or clarity Repeating reveal animations on every scroll can become annoying quickly A practical principle The best animation often feels inevitable, not flashy. The user should often feel: “That felt smooth.” not: “Wow, look at that crazy effect!” Of course, for landing pages, portfolios, or creative sites, more expressive animation can be appropriate. But even then, it should be intentional. 10. Web animation is constrained by the browser Unlike motion graphics software, web animation happens in a live environment. That means it is affected by: browser rendering screen size device performance user input scrolling responsive layouts accessibility preferences So web animation is not the same as creating a video. In a video every frame is predetermined playback is controlled viewer interaction is limited On the web the user may scroll fast the layout may change on mobile images may load late content may vary in height the user may click during animation the device may be slow This is why web animation requires both design thinking and technical thinking . You are not animating on a fixed canvas. You are animating inside a responsive, interactive system. 11. The browser “draws” animation frame by frame At a conceptual level, animation is displayed as a sequence of visual updates. The browser repeatedly redraws the page, often targeting around: $$ 60 \text{ frames per second} $$ That means ideally about 60 visual updates each second. Why this matters If the browser can update smoothly, the animation feels fluid. If it cannot, the animation may: stutter lag skip frames feel choppy This is why performance matters in web animation. Important beginner takeaway Not all properties are equally efficient to animate. Generally, the most animation-friendly properties are: transform opacity These usually perform better than animating properties like: width height top left heavy box-shadow changes complex layout-triggering properties You do not need to master performance yet, but you should already understand this core truth: Animation is not only a visual matter; it is also a rendering and performance matter. This becomes especially relevant in WordPress, where pages often include: many plugins large images dynamic content page builder structures So smooth animation requires some discipline. 12. Animation is often the illusion of movement Here is another foundational insight: Many times, the element is not “really moving” in the way beginners imagine. Instead, the browser is visually transforming it. For example, when you animate with transform: translateY(...) , the browser is applying a transformation for display. This is often more efficient than changing layout position directly. That means web animation is often about the illusion of movement rather than physically rearranging the document structure at every step. This distinction becomes very important later when we talk about: transforms layout reflow repaint performance For now, the key idea is: Good web animation often changes how something is rendered, not how the entire page layout is recalculated every moment. 13. There are different categories of web animation To understand web animation clearly, it helps to divide it into categories. A. State-transition animation This is when something changes from one interface state to another. Examples: button hover accordion opening modal appearing tab switching menu expanding Purpose: communicate interface changes B. Entrance/reveal animation This is when an element enters view or becomes visible. Examples: hero text fading in on page load cards revealing on scroll image sliding up into view Purpose: direct attention create rhythm make content feel staged C. Continuous/decorative animation This runs continuously or repeatedly. Examples: floating icons pulsing indicators looping background shapes Purpose: add atmosphere bring a static layout to life Danger: can become distracting if overused D. Scroll-linked animation Animation is tied to scroll progress. Examples: parallax pinned sections progress-based image scaling storytelling sections Purpose: create immersive narrative experiences This is an area where GSAP is especially powerful. E. Data/value animation A number or progress indicator changes over time. Examples: count-up statistics progress circles percentage indicators Purpose: make data feel dynamic and noticeable F. Spatial/navigation animation This helps users understand interface movement in space. Examples: off-canvas menu sliding in page transition card expanding into detail view Purpose: maintain orientation preserve context Understanding these categories helps you choose the right kind of motion for the job. 14. Animation has emotional tone Motion changes how a brand feels. The same content can feel: elegant playful premium technical bold calm energetic luxurious depending on how it moves. Examples Short, subtle fades and slides often feel clean and professional Elastic, bouncy movement often feels playful or youthful Large cinematic scroll transitions often feel premium or editorial Sharp, snappy micro-interactions often feel modern and tech-oriented So animation is part of branding. This matters for web designers and site builders because motion is not separate from design—it is part of the design language. 15. Animation should match context A law firm website, a SaaS product website, a fashion brand site, and a creative portfolio should not all move the same way. The right animation depends on: brand personality target audience content density user goals performance requirements device context Example A serious corporate site might use: subtle fade-ups restrained hover transitions smooth menu movement A creative agency site might use: larger typography reveals layered parallax complex scroll storytelling image masking effects Neither is automatically better. The question is whether the motion supports the project. 16. Web animation is usually a combination of design and code At first glance, animation seems purely visual. But on the web, it sits between design and programming. Design side You think about: rhythm emphasis timing hierarchy brand feel visual clarity Code side You think about: selecting elements setting values defining duration handling triggers sequencing multiple steps ensuring performance making it responsive This is exactly why tools like GSAP are so useful: they give you precise programmatic control And why tools like Glaze are attractive: they reduce complexity for common animations So in your learning journey: GSAP helps you understand and control animation deeply Glaze helps you apply animation quickly and simply in practical page-building workflows But both still rely on the same underlying principles you are learning here. 17. Sequencing: one animation can lead into another Animation is not always a single isolated effect. Often, what makes a website feel polished is the sequencing of multiple animations. Example: section appears heading fades in text follows shortly after buttons appear next image scales in slightly background shape moves subtly This creates rhythm and structure. Instead of everything happening at once, motion can guide the eye in a meaningful order. This is one reason timelines are so important in GSAP later on: they let you orchestrate multiple changes as one coordinated sequence. So web animation is not only: “move this thing” It is also: “when should each thing happen relative to the others?” That is a much more powerful way to think. 18. Animation can be user-controlled or system-controlled Another useful distinction: System-controlled animation The website decides when and how the animation runs. Examples: page load reveal auto-playing decorative loop delayed entrance sequence User-controlled animation The user’s action directly controls the animation. Examples: hover effect drag interaction click-to-open menu scroll-scrubbed animation This distinction matters because user-controlled motion often needs to feel: immediate responsive intuitive Whereas system-controlled motion can be more choreographed. 19. Animation is not always visible motion Sometimes the best animation is very subtle. Examples: a button background color transitioning smoothly a form field border easing into an active state a card shadow changing softly on hover a tiny scale increase on interaction These are still animations, even though they may not be dramatic. This is important because beginners often think animation means: big motion obvious effects highly visible transitions In reality, some of the most effective animation is almost invisible as a separate feature. It just makes the interface feel refined. 20. Accessibility matters in animation Not all users experience motion the same way. Some people are sensitive to movement, especially: parallax large motion effects aggressive zooming scroll-linked animations This can cause discomfort or disorientation. So good web animation should respect accessibility preferences, especially reduced motion settings. Practical principle If animation is essential, it should: remain understandable avoid causing discomfort degrade gracefully If animation is decorative, it should ideally be reducible or removable when necessary. This is not just a technical detail—it is part of responsible design. ♿ 21. Web animation is about change with intention If you remember only one conceptual sentence from this whole lesson, let it be this: Web animation is intentional visual change over time that helps communicate, guide, respond, or enhance experience. That definition is better than “making stuff move,” because it includes: intention time visual change user experience That is the real foundation. 22. A mental model you can use immediately Whenever you want to animate something, think through this checklist: What element am I animating? a heading, button, card, image, menu, section, SVG? What property is changing? opacity, position, scale, rotation, color, height? What is the start state? hidden, shifted down, smaller, rotated? What is the end state? visible, normal position, full size? How long should it take? fast, medium, slow? What easing fits the feeling? smooth, snappy, playful, elegant? What triggers it? load, scroll, hover, click? Why does this animation exist? attention, clarity, feedback, branding, delight? Is it performant enough? especially on mobile? Is it accessible and not excessive? would it still feel good for real users? If you begin every animation decision with these questions, you will already think more professionally than many people who just copy random effects from tutorials. 23. A few concrete real-world examples Let’s make all of this more tangible. Example 1: Fade-in text on scroll What is happening? Element: heading Property changes: opacity vertical position Start state: invisible slightly lower End state: visible normal position Trigger: heading enters viewport Purpose: draw attention gently as user scrolls This is one of the most common animations on modern websites. Example 2: Button hover effect What is happening? Element: button Property changes: background color scale maybe shadow Start state: default style End state: highlighted style Trigger: hover Purpose: feedback and affordance This tells the user: “This thing is interactive.” Example 3: Mobile menu opening What is happening? Element: menu panel Property changes: opacity position maybe clip-path or height Start state: hidden / off-canvas End state: visible / in place Trigger: click on menu icon Purpose: reveal navigation preserve spatial logic This is more than decoration; it improves orientation. Example 4: Stats counting up What is happening? Element: number text Property changes: numeric value Start state: 0 End state: e.g. 250 Trigger: scroll into view Purpose: make data more noticeable and engaging This shows that animation is not only about visual transforms. 24. How this connects to GSAP later Once you understand what animation actually is, GSAP becomes easier to understand. Because GSAP is essentially a powerful way to define: what changes from where to where over how long with what easing triggered by what in what sequence For example, a GSAP animation often expresses exactly these ideas in code. So the concepts come first; the syntax comes second. This is why learning fundamentals matters so much. 25. How this connects to Glaze later Glaze simplifies many common animation use cases by making it easier to apply motion without writing full custom GSAP logic every time. But even when using a simplification layer, you still need to understand: what your start state is what your end state is what trigger you want whether the motion makes sense whether it fits the design So Glaze can reduce coding complexity, but it does not replace animation thinking. That is why this topic is essential even for no-code or low-code workflows in WordPress and BricksBuilder. 26. The most important beginner mindset shift Here is the mindset shift I would most like you to keep: Do not think of animation as “adding effects.” Think of it as designing change. That small shift changes everything. If you “add effects,” you often get: random motion overuse inconsistent style poor UX If you “design change,” you start thinking about: states timing meaning interaction clarity consistency That is the real beginning of mastering web animation. Summary Web animation is: the change of an element’s properties over time based on a start state and an end state shaped by duration and easing triggered by events like load, scroll, hover, or click used to communicate, guide, clarify, and enhance experience constrained by browser performance, responsiveness, and accessibility most effective when intentional rather than decorative only In short: Web animation is the controlled visual behavior of a website over time. And that is the foundation for everything that comes next with CSS transitions , GSAP , Glaze , ScrollTrigger , timelines, and advanced interactions. Mini self-check 📝 If you want, test your understanding by answering these questions for yourself: What are the 7 core building blocks of an animation? Why is animation more than just movement? What is the difference between start state and end state? What does easing control? Why can animation improve usability? Why can too much animation harm usability? Why are transform and opacity usually important for performance? What is the difference between decorative animation and functional animation?