2.4 The Most Important CSS Concepts You Need First

A detailed foundation for understanding GSAP and Glaze 🚀

Before GSAP can animate anything well, you need to understand what exactly is being animated. GSAP does not replace CSS fundamentals — it builds on top of them.

If CSS is unclear, animation will feel confusing.

For example:

These are usually not GSAP problems. They are CSS structure problems.

So this chapter is extremely important. Think of it as your animation preflight checklist.

Why these CSS concepts matter for animation

When you animate in GSAP or Glaze, you are often changing things like:

To understand those, you need to know:

  1. How elements are selected
  2. How elements are placed in the page layout
  3. How elements behave inside containers
  4. How transforms work
  5. How overlapping works

That is exactly what we cover here.

2.4.1 Classes

What a class is

A class is a reusable label you give to one or more HTML elements.

Example:

<div class="card"></div>
<div class="card"></div>
<div class="card"></div>

All three elements have the class card.

In CSS, you target a class with a dot:

.card {
  background: #eee;
  padding: 20px;
}

That means: “apply this styling to all elements with the class card.”

Why classes matter for GSAP

Classes are one of the most common ways to target elements for animation.

Example with GSAP:

gsap.to(".card", {
  y: -20,
  duration: 1
});

This tells GSAP to animate all elements with the class .card.

This is incredibly useful because animation often applies to:

So classes are usually your main animation hooks.

Why classes are especially useful in WordPress and BricksBuilder

In WordPress and BricksBuilder, you often work with:

Using classes lets you apply animation logic to many items at once.

Examples:

This is much better than targeting random auto-generated builder selectors.

Good mental model

Think of a class as:

If 8 elements should behave similarly, give them a class.

Example

<section class="services">
  <div class="service-card"></div>
  <div class="service-card"></div>
  <div class="service-card"></div>
</section>

gsap.from(".service-card", {
  opacity: 0,
  y: 40,
  duration: 0.8,
  stagger: 0.2
});

Here the class makes staggered animation easy.

Common beginner mistakes with classes

1. Forgetting the dot in CSS or GSAP selector

Correct:

gsap.to(".box", { x: 100 });

Incorrect:

gsap.to("box", { x: 100 });

Without the dot, GSAP looks for an HTML tag named box.

2. Using classes that are too generic

Avoid class names like:

These describe appearance, not purpose.

Better:

This is cleaner and easier to maintain.

3. Depending only on builder-generated class names

Page builders often create classes that are not memorable or stable enough for your animation logic.

Prefer adding your own classes intentionally.

Best practice

Use classes for:

  1. Styling groups
  2. Animation targeting
  3. Reusable elements

In animation work, classes are usually more useful than IDs.

2.4.2 IDs

What an ID is

An ID is a unique label for a single HTML element.

Example:

<section id="hero"></section>

In CSS, you target an ID with #:

#hero {
  min-height: 100vh;
}

In GSAP:

gsap.from("#hero", {
  opacity: 0,
  duration: 1
});

Main difference between classes and IDs

So:

<div class="card"></div>
<div class="card"></div>

is normal, but:

<div id="card"></div>
<div id="card"></div>

is wrong.

IDs must be unique.

Why IDs matter in animation

IDs are useful when:

  1. You need to target one specific element
  2. That element is important and unique
  3. You want a very clear selector

Examples:

When IDs are useful in WordPress and BricksBuilder

They can be useful for:

For example, if you have exactly one hero section on a page, #hero may be fine.

Why classes are often better than IDs for animation

Even though IDs are valid, classes are often more flexible because:

  1. They can be reused
  2. They work better for multiple elements
  3. They are easier for staggered animation
  4. They fit component-based design better

For example, if later you add another hero-like section, an ID will not scale well.

Important caution about IDs

IDs have historically had stronger CSS specificity than classes.

That means styles attached to IDs can be harder to override.

This matters because if your CSS becomes difficult to override, your animation debugging becomes harder too.

You do not need to become a specificity expert yet, but remember:

Simple rule of thumb

Use:

  1. Class for reusable styling and animation
  2. ID for one unique element when it truly makes sense

2.4.3 Nesting and hierarchy

What nesting means

HTML elements live inside other elements.

Example:

<section class="hero">
  <div class="hero-inner">
    <h1 class="hero-title">Welcome</h1>
    <p class="hero-text">Hello world</p>
  </div>
</section>

Here the structure is:

  1. .hero
    1. contains .hero-inner
      1. contains .hero-title
      2. contains .hero-text

This is called nesting or hierarchy.

Why hierarchy matters for animation

Animation almost always happens inside a structure.

For example:

If you do not understand parent-child relationships, animation logic gets messy very quickly.

Parent and child

In HTML/CSS:

Example:

<div class="card">
  <img class="card-image" src="image.jpg" alt="">
</div>

Why this matters in practice

Imagine you animate the image:

gsap.to(".card-image", {
  scale: 1.2,
  duration: 1
});

If the parent .card has:

.card {
  overflow: hidden;
}

then the scaled image stays visually clipped inside the card.

If the parent does not have overflow: hidden, the image may grow outside the card.

That is hierarchy affecting animation.

Descendant targeting

You can target nested elements in CSS using spaces:

.hero .hero-title {
  color: white;
}

This means: any .hero-title inside .hero.

In GSAP you can also use nested selectors:

gsap.from(".hero .hero-title", {
  y: 40,
  opacity: 0
});

This helps you target specific elements in a specific context.

Why hierarchy is important for cleaner animations

Let’s say your site has multiple headings with class .title.

If you animate:

gsap.from(".title", { opacity: 0 });

you may animate every title on the whole page.

But if you target:

gsap.from(".hero .title", { opacity: 0 });

you only animate titles inside .hero.

This gives you control.

Containers are extremely important

A lot of animation setups are based on the idea of a wrapper.

Example:

<div class="mask">
  <div class="text">Animated Text</div>
</div>

The outer wrapper controls behavior such as:

The inner element is the thing that moves.

This pattern appears constantly in animation.

Very important beginner idea

Often the thing you animate is not the same thing that controls layout.

For example:

This separation makes animation much easier.

2.4.4 Display types

What display means

The display property controls how an element behaves in layout.

This is one of the most important CSS properties in general.

Common values include:

  1. block
  2. inline
  3. inline-block
  4. flex
  5. grid
  6. none

block

Block elements usually:

Examples of block-like elements:

Example:

.box {
  display: block;
}

For animation, block elements are often easy to work with because they behave predictably in layout.

inline

Inline elements:

Examples:

If you try to animate width, height, or transform behavior on inline elements, results can sometimes be confusing.

That is why animated text spans are often changed to:

display: inline-block;

inline-block

This is a very useful middle ground.

An inline-block element:

This is common for:

Example:

.word {
  display: inline-block;
}

Now scaling or translating .word is usually more reliable.

flex

Flexbox is used to align and arrange items in a row or column.

Example:

.container {
  display: flex;
  gap: 20px;
}

This makes child elements line up more easily.

For animation, flex matters because:

If something “moves strangely,” the parent flex rules may be part of the reason.

grid

CSS Grid is another layout system.

Example:

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

This creates a structured grid.

For animation:

Again, layout and animation are related but not identical.

none

.element {
  display: none;
}

This removes the element from layout completely.

Important: if an element is display: none, it is effectively not present for visual animation.

This is crucial.

If you try:

gsap.to(".element", { opacity: 1 });

but the element is display: none, it still won’t show as expected until display is changed.

display is generally not smoothly animatable like opacity or transform.

You usually do not tween it visually from one state to another.

Instead, a common strategy is:

  1. Set display so the element can exist
  2. Animate opacity, y, scale, etc.

For example:

A practical example

Suppose you have a popup.

Instead of relying on display animation, you might think in steps:

  1. Make it present in layout
  2. Fade it in
  3. Move it slightly upward
  4. Scale it subtly

This feels much smoother.

2.4.5 Positioning basics

Why positioning is essential for animation

A huge amount of animation depends on where an element is located and what reference point it uses.

CSS positioning tells the browser how to place an element.

The main values are:

  1. static
  2. relative
  3. absolute
  4. fixed
  5. sticky

static

This is the default.

.box {
  position: static;
}

A statically positioned element sits in normal document flow.

Properties like top, left, right, and bottom generally do not work in the usual way here.

For animation, static is often fine if you only animate transforms such as x, y, scale, and rotate.

relative

.box {
  position: relative;
}

This does two important things:

  1. The element remains in normal flow
  2. It becomes a reference point for absolutely positioned children

This is extremely important.

absolute

.child {
  position: absolute;
  top: 0;
  left: 0;
}

An absolutely positioned element is removed from normal document flow and positioned relative to its nearest positioned ancestor.

That means:

Classic animation pattern

<div class="card">
  <div class="badge"></div>
</div>

.card {
  position: relative;
}

.badge {
  position: absolute;
  top: 10px;
  right: 10px;
}

Now the badge sits relative to the card.

This matters because if you animate the badge, you usually want it anchored to the card, not the whole page.

fixed

.menu {
  position: fixed;
  top: 0;
  left: 0;
}

A fixed element is positioned relative to the viewport.

It stays in place while the page scrolls.

Common uses:

Animation-wise, fixed elements are often used in:

sticky

.sidebar {
  position: sticky;
  top: 20px;
}

A sticky element behaves like a normal element until a scroll threshold is reached, then it sticks.

This is useful for:

When using GSAP with scroll interactions, understanding sticky behavior helps avoid confusion.

Positioning and GSAP movement

Very important: when you animate with GSAP using properties like x and y, you are usually animating transform-based movement, not changing top and left.

That is good.

Why?

Because transform-based movement is generally:

So even if positioning determines where the element starts, GSAP often moves it visually using transforms.

Common beginner confusion: top/left vs x/y

These are not the same idea.

top and left

x and y in GSAP

So in animation work, x and y are often preferred.

Practical rule

Use CSS positioning to establish where elements belong.

Use GSAP transforms to create how elements move.

That combination is powerful.

2.4.6 Overflow

What overflow means

overflow controls what happens when content extends beyond an element’s boundaries.

Common values:

  1. visible
  2. hidden
  3. auto
  4. scroll

visible

This is often the default.

If a child grows or moves beyond the parent, it can still be seen.

Example:

.card {
  overflow: visible;
}

If you scale a child image up, it may spill outside the card.

hidden

.card {
  overflow: hidden;
}

Anything outside the boundaries gets clipped.

This is one of the most important properties in animation.

Why?

Because many effects rely on clipping:

Example: image zoom card

<div class="card">
  <img class="card-image" src="image.jpg" alt="">
</div>

.card {
  overflow: hidden;
}

.card-image {
  width: 100%;
}

Now if GSAP scales .card-image, the image remains visually contained.

Without overflow: hidden, the effect often looks messy.

Example: text reveal

<div class="text-mask">
  <div class="text-line">Hello World</div>
</div>

.text-mask {
  overflow: hidden;
}

Then you can animate .text-line upward into view.

The mask hides the extra part until it slides in.

This is a very common professional animation pattern.

auto and scroll

These are more related to scrollbars.

These matter less for simple animation, but become relevant when dealing with scroll containers.

Why overflow often causes confusion

You animate an element and wonder:

Very often the answer is:

Or the opposite:

So when debugging animation, always inspect parent containers.

Not just the animated element itself.

2.4.7 Transform

What transform is

transform lets you visually change an element without altering normal layout in the same heavy way as many other properties.

This is one of the most important animation concepts in all of front-end development.

Common transform functions include:

  1. translate
  2. scale
  3. rotate
  4. skew

translate

Moves an element visually.

Example:

.box {
  transform: translateX(100px);
}

This moves it 100 pixels to the right visually.

GSAP equivalents are often:

Example:

gsap.to(".box", {
  x: 100
});

This is extremely common.

scale

Changes size visually.

.box {
  transform: scale(1.2);
}

This makes the element 20% larger.

GSAP:

gsap.to(".box", {
  scale: 1.2
});

Great for:

rotate

Rotates an element.

.box {
  transform: rotate(45deg);
}

GSAP:

gsap.to(".box", {
  rotation: 45
});

Useful for:

skew

Tilts the element.

.box {
  transform: skewX(10deg);
}

GSAP can animate skew too.

This is less common for beginners, but useful in stylized motion.

Why transform is so important for GSAP

GSAP often works best when animating transform-related properties because they are:

This is one major reason GSAP feels so good.

Important concept: transforms are visual, not normal layout movement

If you move something with transform: translateX(100px), the browser still treats its original layout position as its normal place.

That means:

This is very important.

For animation, this is usually excellent.

For layout assumptions, it can confuse beginners.

Transform order matters

If multiple transforms are combined, the result depends on order.

Example conceptually:

These can produce different visual results.

You do not need to master transform math right now, but you should know:

transforms are not just isolated effects — they interact.

GSAP helps manage this more easily than raw CSS.

Why transformed elements may look blurry or behave unexpectedly

Sometimes when scaling or moving:

This is normal in some situations.

It is not always a mistake.

Practical animation mindset

For most modern UI animation, transform is your best friend.

Especially:

  1. x
  2. y
  3. scale
  4. rotation
  5. opacity

These are among the most common GSAP properties you will use.

2.4.8 Transform origin

What transform origin means

If transform changes an element, transform-origin defines the point from which the transformation happens.

This is another critical concept.

Example:

That is controlled by transform-origin.

Default behavior

By default, transforms usually happen around the center of the element.

So if you scale something up, it grows outward from the center.

That is often fine, but not always what you want.

Example

.box {
  transform-origin: center center;
}

This means the center is the pivot point.

Other examples:

.box {
  transform-origin: top left;
}

.box {
  transform-origin: bottom center;
}

Why this matters for animation

Imagine a menu underline that should grow from the left edge.

If the transform origin is centered, it will grow in both directions.

If the transform origin is left center, it grows from left to right.

That changes the feel completely.

Example: reveal line

.line {
  transform: scaleX(0);
  transform-origin: left center;
}

Then animate to full width.

Now it feels like a line drawing from left to right.

If origin were center, the line would expand both ways.

Example: card flip or hinge-like effect

If you rotate an element and want it to feel like a door opening, the origin should often be on one edge:

.panel {
  transform-origin: left center;
}

Then rotation feels like a hinge.

Common use cases

Transform origin is very important for:

  1. Scaling buttons
  2. Underline reveals
  3. Rotations
  4. Door-like or hinge-like effects
  5. Progress indicators
  6. Directional wipes
  7. Text reveal effects

GSAP and transform origin

GSAP can control transform origin directly.

Example:

gsap.to(".line", {
  scaleX: 1,
  transformOrigin: "left center",
  duration: 0.6
});

This is very useful because you can define not only what changes, but also how it feels spatially.

Beginner mistake

A lot of people scale or rotate something, then say:

The answer is often: wrong transform origin.

2.4.9 Z-index

What z-index means

z-index controls the stacking order of overlapping elements.

Think of it as deciding which element appears:

The higher value is generally placed above the lower value.

Example:

.box-a {
  z-index: 1;
}

.box-b {
  z-index: 2;
}

Here .box-b will appear in front of .box-a, assuming they overlap and positioning conditions are met.

Why z-index matters for animation

Animations often involve overlapping elements:

If layering is wrong, the animation may technically work but look broken.

Very important: z-index does not work in isolation

This is a huge beginner issue.

z-index usually matters on elements that are positioned, such as:

If an element is not participating in the right stacking context behavior, changing z-index may appear to do nothing.

Example

.card {
  position: relative;
  z-index: 2;
}

This makes more sense than setting z-index on a fully static element and expecting overlap behavior automatically.

Overlapping example

<div class="section">
  <div class="background-shape"></div>
  <h2 class="title">Hello</h2>
</div>

.section {
  position: relative;
}

.background-shape {
  position: absolute;
  z-index: 1;
}

.title {
  position: relative;
  z-index: 2;
}

Now the title sits above the shape.

Why this matters for animated overlays

Imagine you animate a modal:

gsap.to(".modal", {
  opacity: 1,
  scale: 1,
  duration: 0.5
});

If the modal has the wrong z-index, it may appear behind page content.

Then it looks like your animation failed, even though the real issue is stacking.

Stacking contexts

This is a more advanced topic, but you should at least know the term.

A stacking context is like a local layering world.

Sometimes an element with a high z-index still appears underneath another element because they belong to different stacking contexts.

This is one of the most frustrating CSS issues for beginners.

You do not need full mastery yet, but remember:

Simple beginner debugging rule

If z-index is not working:

  1. Check whether the element has a positioning value like relative or absolute
  2. Check whether a parent creates a stacking context
  3. Check whether another overlapping element is in a different stacking context
  4. Inspect the parent structure, not just the single element

How all of these concepts connect to GSAP and Glaze

Now let’s connect the CSS fundamentals directly to animation tools.

With GSAP

GSAP commonly animates:

But GSAP depends on CSS for:

  1. Selecting the right element

    • classes and IDs

  2. Understanding element relationships

    • nesting and hierarchy

  3. Knowing how the element behaves in layout

    • display types

  4. Establishing reference points

    • positioning

  5. Clipping animation visually

    • overflow

  6. Moving and resizing smoothly

    • transform

  7. Defining pivot behavior

    • transform origin

  8. Layering elements correctly

    • z-index

Without these, GSAP animation becomes trial-and-error.

With them, GSAP becomes logical.

With Glaze

Because Glaze simplifies GSAP usage, it can feel “easier” at first — and it is easier in many cases.

But Glaze still relies on the same underlying browser behavior.

So even if Glaze lets you apply animation more simply, you still need to understand:

So this CSS knowledge is just as important with Glaze as with raw GSAP.

A simple real-world example combining many concepts

Let’s imagine a card with an image and title animation.

HTML

<div class="card">
  <div class="card-image-wrap">
    <img class="card-image" src="image.jpg" alt="">
  </div>
  <h3 class="card-title">Project Title</h3>
</div>

CSS

.card {
  position: relative;
}

.card-image-wrap {
  overflow: hidden;
}

.card-image {
  display: block;
  width: 100%;
  transform-origin: center center;
}

.card-title {
  position: relative;
  z-index: 2;
}

GSAP idea

gsap.from(".card-image", {
  scale: 1.2,
  duration: 1.2
});

gsap.from(".card-title", {
  y: 30,
  opacity: 0,
  duration: 0.8
});

What CSS concepts are involved here?

  1. Classes

    • .card, .card-image, .card-title

  2. Nesting and hierarchy

    • image is inside image wrapper
    • wrapper is inside card

  3. Display

    • image is display: block

  4. Positioning

    • card and title can participate in layering

  5. Overflow

    • image wrapper clips scaled image

  6. Transform

    • image scales
    • title moves with y

  7. Transform origin

    • image scales from center

  8. Z-index

    • title stays above visual content if needed

This is why CSS fundamentals are the base of motion design on the web.

Practical beginner rules you should remember ✅

If you remember nothing else from this lesson, remember these:

  1. Use classes for most animation targets

    • They are reusable and flexible.

  2. Use IDs only for truly unique elements

    • Don’t overuse them.

  3. Always pay attention to parent-child structure

    • Animation behavior often depends on wrappers.

  4. Know the display type of the element

    • Especially for text, spans, flex items, and hidden elements.

  5. Use CSS positioning to define spatial relationships

    • Especially relative on parents and absolute on children.

  6. Check overflow when something is clipped or leaking

    • This is one of the most common issues.

  7. Use transforms for movement and scaling

    • This is the heart of smooth GSAP animation.

  8. Set transform origin intentionally

    • Especially for scaling and rotation.

  9. Use z-index carefully when things overlap

    • And remember that stacking contexts exist.

Typical animation debugging checklist 🛠️

When an animation doesn’t behave correctly, ask:

  1. Am I targeting the correct element?

    • Class or ID typo?
    • Wrong selector?

  2. Is the element nested inside a parent affecting it?

    • Wrapper issue?
    • Wrong hierarchy?

  3. What is its display type?

    • Is it inline when it should be inline-block or block?
    • Is it display: none?

  4. Is positioning affecting placement?

    • Does the child need an ancestor with position: relative?

  5. Is overflow clipping the animation?

    • Or should overflow be hidden and currently isn’t?

  6. Am I animating transform-related properties?

    • Better than top/left in many cases.

  7. Is transform origin correct?

    • Is it growing, rotating, or revealing from the right point?

  8. Is z-index or stacking context the real problem?

    • Is it behind something else?

This checklist alone will save you a lot of time.

Final summary

These CSS concepts are not “extra theory.” They are the practical mechanics behind animation.

GSAP gives you powerful control over motion.
Glaze gives you simpler ways to apply that motion.
But CSS determines:

So if you want to become confident with GSAP and Glaze, mastering these CSS basics is one of the smartest things you can do first.

Revision #1
Created 2026-04-25 20:35:02 UTC by art10m
Updated 2026-04-25 20:38:43 UTC by art10m