Cheat Sheet for GSAP + Glaze + WordPress + BricksBuilder 🧩

This cheat sheet is designed as your practical quick-reference companion for future lessons. It is not yet the full course, but a structured reference you can keep beside you while building animations.
It assumes:
You use WordPress
You build with BricksBuilder
You want to learn GSAP properly
You also want to benefit from Glaze for simpler workflows
Your JavaScript and CSS knowledge is still developing
1. Big Picture: What Each Tool Does
CSS
Controls styling and layout
Can do basic transitions and animations
Is often enough for simple hover effects
Becomes limited for complex sequences and scroll behavior
JavaScript
Lets you control what happens in the browser
Can respond to events such as:
click
scroll
page load
Makes animation logic possible
GSAP
A JavaScript animation library
Makes animations smoother and easier to control
Excellent for:
sequencing
stagger effects
scroll animations
advanced motion systems
reusable animation logic
ScrollTrigger
A GSAP plugin
Connects animation behavior to scroll position
Used for:
reveal-on-scroll
scrub effects
pinned sections
storytelling layouts
Glaze
A simplification layer for animation workflows
Helps you declare animations more quickly
Useful when you want:
less custom JavaScript
faster implementation
repeatable simple effects
Less ideal when you need:
very custom logic
complex sequencing
heavy interactivity
2. Core Mental Model of GSAP 🧠
Think of GSAP like this:
Target
What element should animate?
Property
What should change?
Examples:
x
y
opacity
scale
rotation
Value
How much should it change?
Timing
How long should it take?
Should it start later?
Should it ease smoothly?
Basic pattern:
gsap.to(".box", {
  x: 100,
  opacity: 1,
  duration: 1,
  ease: "power2.out"
});
Meaning:
Animate 
.box
Move it 
100 pixels on the x-axis
Make it fully visible
Take 
1 second
Use a smooth easing curve
3. The 3 Most Important GSAP Methods
3.1 
gsap.to()
Use when you want to animate from the current state to a new state.
gsap.to(".box", {
  y: -50,
  opacity: 1,
  duration: 1
});
Meaning:
The element starts from however it currently looks and animates to these values.
3.2 
gsap.from()
Use when you want to animate from a starting state into the natural/current state.
gsap.from(".box", {
  y: 50,
  opacity: 0,
  duration: 1
});
Meaning:
The element appears to come in from below and fade in.
This is extremely common for entrance animations.
3.3 
gsap.fromTo()
Use when you want to define both start and end values explicitly.
gsap.fromTo(".box",
  {
    y: 50,
    opacity: 0
  },
  {
    y: 0,
    opacity: 1,
    duration: 1
  }
);
Use this when:
You want maximum clarity
You do not want to depend on the element’s existing CSS state
You want more predictable results
4. Most Important GSAP Properties
4.1 Movement
x
Moves left or right
Positive = right
Negative = left
x: 100
y
Moves up or down
Positive = down
Negative = up
y: -50
4.2 Visibility
opacity
0 = invisible
1 = fully visible
opacity: 0
4.3 Size
scale
1 = normal size
0.8 = smaller
1.2 = larger
scale: 0.8
4.4 Rotation
rotation
Rotates in degrees
rotation: 45
4.5 Timing
duration
How long animation takes in seconds
duration: 1.2
delay
Wait before starting
delay: 0.3
ease
Controls animation feel
ease: "power2.out"
5. Most Common Ease Values
Use these often:
linear
Constant speed
Often feels mechanical
power1.out
Gentle ease out
Good for subtle motion
power2.out
Very common default feel
Smooth and professional
power3.out
Stronger easing
Feels more dramatic
power2.inOut
Smooth at start and end
Good for balanced movement
back.out
Slight overshoot
Good for playful emphasis
elastic.out
Spring-like
Use carefully
Simple recommendation:
For many professional websites, start with:
ease: "power2.out"
6. Targets and Selectors
GSAP needs to know which element to animate.
6.1 Common selector types
Class selector
".card"
ID selector
"#hero-title"
Nested selector
".hero .heading"
Multiple matching elements
".feature-card"
If many elements have that class, GSAP can animate all of them.
6.2 Good selector habits in BricksBuilder ✅
Prefer classes over IDs in most cases
Use stable custom classes you control
Avoid overly long selectors when possible
If content repeats, make sure your selector strategy still makes sense
Good examples:
".js-fade-up"
".hero-title"
".feature-card"
".testimonial-item"
Better to use purposeful classes such as:
.js-reveal
.js-stagger-item
.js-hero-title
This makes your code easier to reuse.
7. 
gsap.set() for Initial States
Use 
gsap.set() when you want to assign values immediately without animation.
gsap.set(".box", {
  opacity: 0,
  y: 40
});
Then animate later:
gsap.to(".box", {
  opacity: 1,
  y: 0,
  duration: 1
});
This is useful for:
predictable starting states
avoiding flashes of visible content
cleaner animation setup
8. Stagger Animations
A stagger means multiple elements animate one after another.
gsap.from(".card", {
  y: 30,
  opacity: 0,
  duration: 0.8,
  stagger: 0.15
});
Meaning:
Each 
.card animates in
A 
0.15 second gap exists between starts
Very useful for:
card grids
lists
icon rows
gallery items
repeated Bricks query loop items
9. Timelines: The Most Important Intermediate Concept ⭐
If you learn only one big GSAP concept beyond basics, learn timelines.
9.1 Why timelines matter
Without timelines, you often write many separate animations.
With timelines, you can control a sequence in one place.
9.2 Basic timeline example
let tl = gsap.timeline();
tl.from(".hero-badge", {
  y: 20,
  opacity: 0,
  duration: 0.6
})
.from(".hero-title", {
  y: 40,
  opacity: 0,
  duration: 0.8
})
.from(".hero-text", {
  y: 20,
  opacity: 0,
  duration: 0.6
})
.from(".hero-button", {
  y: 20,
  opacity: 0,
  duration: 0.5
});
This creates a clean sequence.
9.3 Overlapping timeline animations
let tl = gsap.timeline();
tl.from(".hero-title", {
  y: 40,
  opacity: 0,
  duration: 0.8
})
.from(".hero-text", {
  y: 20,
  opacity: 0,
  duration: 0.6
}, "-=0.3");
"-=0.3" means:
Start this animation 
0.3 seconds before the previous one ends
This creates overlap
Overlap often feels more polished
10. ScrollTrigger Cheat Sheet 🖱️
10.1 Basic setup
gsap.registerPlugin(ScrollTrigger);
Then:
gsap.from(".section-title", {
  y: 40,
  opacity: 0,
  duration: 0.8,
  scrollTrigger: {
    trigger: ".section-title",
    start: "top 80%"
  }
});
10.2 Most important ScrollTrigger options
trigger
Which element controls when the animation starts
start
When the trigger activates
Example:
start: "top 80%"
Meaning:
when the top of the trigger reaches 
80% down the viewport
end
Where the trigger effect ends
More relevant for scrub or pin setups
scrub
Links animation progress to scroll progress
scrub: true
pin
Keeps an element fixed during scroll for a section of time
pin: true
markers
Shows visual debug markers on screen
markers: true
Very useful when learning.
toggleActions
Controls what happens on enter/leave/re-enter/back
Common example:
toggleActions: "play none none none"
10.3 Simple reveal on scroll
gsap.from(".reveal", {
  y: 40,
  opacity: 0,
  duration: 0.8,
  ease: "power2.out",
  scrollTrigger: {
    trigger: ".reveal",
    start: "top 85%"
  }
});
10.4 Stagger reveal on scroll
gsap.from(".card", {
  y: 30,
  opacity: 0,
  duration: 0.8,
  stagger: 0.15,
  scrollTrigger: {
    trigger: ".cards-wrapper",
    start: "top 80%"
  }
});
10.5 Scrub example
gsap.to(".image", {
  y: -100,
  ease: "none",
  scrollTrigger: {
    trigger: ".section",
    start: "top bottom",
    end: "bottom top",
    scrub: true
  }
});
This creates a scroll-linked effect.
11. Common Animation Patterns You Will Use Often
11.1 Fade in
gsap.from(".item", {
  opacity: 0,
  duration: 0.8
});
11.2 Fade up
gsap.from(".item", {
  y: 30,
  opacity: 0,
  duration: 0.8,
  ease: "power2.out"
});
11.3 Slide in from left
gsap.from(".item", {
  x: -60,
  opacity: 0,
  duration: 0.8
});
11.4 Zoom in
gsap.from(".item", {
  scale: 0.85,
  opacity: 0,
  duration: 0.8
});
11.5 Sequential hero animation
let tl = gsap.timeline();
tl.from(".hero-kicker", {
  y: 20,
  opacity: 0,
  duration: 0.5
})
.from(".hero-title", {
  y: 40,
  opacity: 0,
  duration: 0.8
}, "-=0.2")
.from(".hero-text", {
  y: 20,
  opacity: 0,
  duration: 0.6
}, "-=0.3")
.from(".hero-button", {
  y: 20,
  opacity: 0,
  duration: 0.5
}, "-=0.2");
12. CSS Concepts You Must Know for Animation
You do not need advanced CSS first, but you do need these basics.
12.1 
transform
GSAP often animates transforms.
Examples:
translateX
translateY
scale
rotate
GSAP simplifies this with properties like:
x
y
scale
rotation
12.2 
opacity
Controls visibility.
opacity: 0;
Invisible, but still takes up layout space.
12.3 
position
Important values:
static
default
relative
keeps normal flow
allows positioned children to reference it
absolute
taken out of normal flow
often used for layered animation elements
fixed
fixed to viewport
12.4 
overflow
Very important for reveals.
overflow: hidden;
Useful when:
text slides upward inside a wrapper
images reveal from inside a frame
you want to hide animated overflow
12.5 
z-index
Controls stacking order.
If animation looks wrong, sometimes the issue is not GSAP but layering.
12.6 
display
Common values:
block
inline
inline-block
flex
grid
none
Animation can behave differently depending on display type.
13. JavaScript Basics You Need Most
13.1 Variables
let tl = gsap.timeline();
A variable stores something.
13.2 Functions
function runAnimation() {
  gsap.from(".box", {
    y: 30,
    opacity: 0
  });
}
A function groups code for reuse.
13.3 Selecting elements
document.querySelector(".box");
document.querySelectorAll(".card");
GSAP often lets you skip this and pass selectors directly.
13.4 Run code after page load
Common pattern:
document.addEventListener("DOMContentLoaded", () => {
  gsap.from(".box", {
    y: 30,
    opacity: 0
  });
});
Useful in WordPress/Bricks to avoid running too early.
14. WordPress + BricksBuilder Implementation Cheat Sheet 🧱
14.1 Good places for custom animation code
Depending on your setup, you may place code in:
Bricks custom code area
page-level custom code
theme or child-theme files
a code snippets plugin
footer script area
For beginners, a safe custom code area is usually easiest.
14.2 Recommended structure
Add GSAP library
Add ScrollTrigger if needed
Add your own custom script after GSAP
Give your Bricks elements meaningful classes
14.3 Example HTML class strategy in Bricks
For a hero section, assign classes such as:
.hero-section
.hero-title
.hero-text
.hero-button
Then target them in GSAP.
14.4 Good naming style
Use animation-friendly class names:
.js-fade-up
.js-stagger-group
.js-stagger-item
.js-hero-title
This makes your intent clear.
14.5 Query loop caution
If Bricks repeats items, selectors may target all repeated items.
That is good when intended, but dangerous if you expected only one.
Be careful with:
repeated cards
post lists
product loops
sliders
15. Debugging Cheat Sheet 🔍
When animation fails, check in this order:
Is GSAP loaded?
Open console
Test:
console.log(gsap);
Is ScrollTrigger loaded and registered?
Test:
console.log(ScrollTrigger);
Does the selector match a real element?
Test:
console.log(document.querySelector(".my-element"));
Is the script running too early?
Wrap in 
DOMContentLoaded
Is CSS preventing the result?
Hidden parent
overflow
display: none
wrong positioning
transform conflict
For scroll animation: is the trigger correct?
Use 
markers: true
Are there JavaScript errors above your GSAP code?
One earlier error can stop everything
16. Common Beginner Mistakes
Using the wrong selector
You typed 
.hero-title
The real class is 
.hero_heading
Trying to animate before the element exists
Common in builders or dynamic content
Confusing 
from() and 
to()
from() = animate from values into current state
to() = animate from current state to new values
Animating layout properties instead of transforms
Avoid animating things like:
top
left
width
height
Prefer:
x
y
scale
opacity
Using too much animation
A professional website usually needs restraint
Not testing mobile
Motion distance may feel too large on small screens
Ignoring reduced motion
Accessibility matters
17. Performance Cheat Sheet ⚡
Prefer these properties
x
y
scale
rotation
opacity
Be careful with these
width
height
top
left
box-shadow-heavy animation
filter-heavy animation
General rules
Keep animations purposeful
Do not animate everything on a page
Avoid too many simultaneous scroll effects
Test on mobile
Use stagger for elegance instead of chaos
18. Accessibility Cheat Sheet ♿
Respect reduced motion
Basic idea:
Some users prefer less motion
Your site should reduce or remove intense animation for them
Conceptually, your animations should:
avoid large aggressive movement
avoid constant motion
avoid distracting flashing behavior
support content, not fight it
A simple CSS concept you should know:
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}
Later in the course, we can build the GSAP version of this properly.
19. GSAP Pattern Templates
19.1 Basic entrance animation
gsap.from(".element", {
  y: 30,
  opacity: 0,
  duration: 0.8,
  ease: "power2.out"
});
19.2 Scroll reveal template
gsap.from(".element", {
  y: 30,
  opacity: 0,
  duration: 0.8,
  ease: "power2.out",
  scrollTrigger: {
    trigger: ".element",
    start: "top 85%",
    markers: false
  }
});
19.3 Stagger template
gsap.from(".item", {
  y: 20,
  opacity: 0,
  duration: 0.6,
  ease: "power2.out",
  stagger: 0.12
});
19.4 Hero timeline template
let tl = gsap.timeline();
tl.from(".hero-title", {
  y: 40,
  opacity: 0,
  duration: 0.8,
  ease: "power2.out"
})
.from(".hero-text", {
  y: 20,
  opacity: 0,
  duration: 0.6,
  ease: "power2.out"
}, "-=0.3")
.from(".hero-button", {
  y: 20,
  opacity: 0,
  duration: 0.5,
  ease: "power2.out"
}, "-=0.2");
20. Glaze Cheat Sheet 🌿
Because Glaze setups can vary depending on version and implementation style, I’ll keep this section conceptually accurate and workflow-oriented for now, so you do not learn the wrong syntax too early.
20.1 What Glaze is good for
Simple reveal effects
Repeatable animation rules
Lower-code workflows
Faster implementation in visual-builder environments
20.2 Glaze mental model
Instead of writing lots of custom GSAP code, you often:
add attributes or configuration to elements
declare animation behavior in a simpler way
let Glaze translate that into GSAP behavior
20.3 Best use cases for Glaze
fade-up reveals
simple scroll reveals
repeated animation classes or attributes
site-wide animation patterns
quick implementation in Bricks
20.4 When to switch to raw GSAP instead
Use raw GSAP when you need:
custom hero timelines
overlapping multi-step sequences
advanced ScrollTrigger control
interactive states
custom animation logic
timeline labels and playback control
20.5 Practical rule of thumb
Simple and repeatable → use Glaze
Custom and complex → use GSAP
Mixed project → use both
That hybrid approach is often ideal.
21. “Which Tool Should I Use?” Decision Guide
I want a simple fade-up on scroll for many sections
Best choice: Glaze or simple GSAP
I want a premium hero animation with perfect sequence control
Best choice: GSAP timeline
I want cards to enter one after another
Best choice: GSAP stagger
Or Glaze if repeated setup is simple enough
I want animation tied to scroll progress
Best choice: GSAP + ScrollTrigger
I want low-code convenience
Best choice: Glaze
I want to deeply understand what is happening
Best choice: learn GSAP first
22. Professional Defaults You Can Reuse
Here are safe defaults that often work well on professional websites:
22.1 Standard fade-up
{
  y: 30,
  opacity: 0,
  duration: 0.8,
  ease: "power2.out"
}
22.2 Standard stagger
{
  y: 20,
  opacity: 0,
  duration: 0.6,
  ease: "power2.out",
  stagger: 0.12
}
22.3 Standard scroll trigger
{
  trigger: ".element",
  start: "top 85%"
}
22.4 Good motion design advice
Use small to medium distances
Use smooth easing
Keep durations moderate
Avoid exaggerated movement unless stylistically justified
23. Quick Glossary
Target
The element being animated
Tween
A single GSAP animation
Timeline
A sequence of animations
Stagger
A delayed sequence across multiple elements
Ease
The speed curve of motion
Trigger
The element that controls when a scroll animation starts
Scrub
Scroll directly controls animation progress
Pin
Element stays fixed during part of scroll
Transform
Visual movement/scale/rotation without changing layout flow
Opacity
Visibility level
24. Your Personal Beginner Workflow
When creating an animation, think in this order:
What element am I animating?
What should visually change?
Should this happen on page load or on scroll?
Do I need one animation or a sequence?
Can I use a simple repeated pattern?
If yes, consider Glaze
Do I need detailed control?
If yes, use GSAP
Does it still work well on mobile?
Is it subtle enough to feel professional?
25. Super Short “Memory Version” 📝
If you remember only a few things, remember these:
Use 
from() for entrance animations
Use 
to() for animating to a new state
Use timelines for sequences
Use ScrollTrigger for scroll behavior
Use transforms and opacity for best performance
Use stable classes in Bricks
Use Glaze for simple repeated patterns
Use raw GSAP for complex custom motion
Debug with selectors, load order, and markers
Subtle animation usually looks more professional
26. Suggested Next Step 🎯
A good next step would be one of these:
Create an expanded GSAP-only cheat sheet
with more code examples
with beginner explanations line by line
Create a BricksBuilder implementation cheat sheet
exactly where to place scripts
how to structure classes
common builder pitfalls
Create a Glaze-specific cheat sheet
focused on practical usage patterns
focused on simple animations in Bricks
Start the actual course with Module 1 or Module 2
If you want, I can next create three separate cheat sheets:
GSAP Cheat Sheet
ScrollTrigger Cheat Sheet
Glaze + BricksBuilder Cheat Sheet
That would probably be the most useful version for real practice.