GSAP + Glaze Course Outline for WordPress + BricksBuilder 🚀

Below is a structured course table of contents designed for your situation:

• GSAP as the core foundation
• Glaze as the practical simplification layer
• tailored to WordPress and BricksBuilder
• friendly for someone with limited JavaScript and CSS experience

The idea is: you’ll first build a solid mental model of how animations work, then learn GSAP properly, and finally learn how to use Glaze efficiently for everyday work—without losing the ability to create advanced custom animations later.

Course Table of Contents

1. Introduction: How This Course Works

   1. Why this course focuses on GSAP first and Glaze second
   2. What you will be able to do after finishing the course
   3. Who this course is for
   4. How to use this course together with me step by step
   5. Recommended learning order and practice method
   6. What tools you need:
      1. WordPress
      2. BricksBuilder
      3. Browser developer tools
      4. A code snippet/plugin workflow
      5. Optional local development environment

2. Animation Fundamentals Before GSAP

   1. What web animation actually is
   2. The difference between:
      1. CSS animation
      2. CSS transition
      3. JavaScript animation
      4. GSAP animation
   3. Core visual concepts:
      1. Position
      2. Scale
      3. Rotation
      4. Opacity
      5. Timing
      6. Delay
      7. Sequencing
   4. The most important CSS concepts you need first:
      1. Classes
      2. IDs
      3. Nesting and hierarchy
      4. Display types
      5. Positioning basics
      6. Overflow
      7. Transform
      8. Transform origin
      9. Z-index
   5. The most important JavaScript concepts you need first:
      1. What JavaScript does in the browser
      2. Variables in simple terms
      3. Functions in simple terms
      4. Selecting elements from the page
      5. Events in simple terms
      6. Running code after the page is loaded
   6. How animation can fail because of layout, not because of GSAP
   7. Common beginner misunderstandings and how to avoid them

3. Setting Up GSAP in WordPress and BricksBuilder

   1. What GSAP is and why developers love it
   2. When to use GSAP instead of CSS-only animation
   3. Different ways to add GSAP to a WordPress site:
      1. CDN
      2. Local files
      3. Plugin/snippet-based inclusion
      4. Theme or child-theme integration
   4. Best setup methods for BricksBuilder users
   5. Where to place custom JavaScript in BricksBuilder
   6. Where to place custom CSS in BricksBuilder
   7. How to safely test animations without breaking a live site
   8. Loading order:
      1. GSAP core
      2. Plugins
      3. Your own scripts
   9. How to verify GSAP is loaded correctly
   10. Creating your first “GSAP is working” test animation
   11. Troubleshooting setup issues in WordPress and BricksBuilder

4. Your First Steps in GSAP

   1. Understanding the three most important methods:
      1. gsap.to()
      2. gsap.from()
      3. gsap.fromTo()
   2. Understanding targets:
      1. Class selectors
      2. ID selectors
      3. Multiple elements
      4. Specific nested elements
   3. Understanding properties:
      1. x
      2. y
      3. opacity
      4. scale
      5. rotation
      6. duration
      7. delay
      8. ease
   4. Writing your first practical animations:
      1. Fade in
      2. Slide up
      3. Slide left/right
      4. Zoom in
      5. Rotate in
   5. How from() can create “entrance animation” behavior
   6. When to use to() vs from() vs fromTo()
   7. The role of default CSS states
   8. How to read GSAP code without feeling overwhelmed
   9. Practice exercises for basic animation creation

5. Understanding Transforms and Motion Clearly

   1. Why transforms are the foundation of smooth animation
   2. Difference between layout properties and transform properties
   3. Understanding:
      1. translate
      2. x and y
      3. scale
      4. rotate
      5. skew
   4. Transform origin explained visually
   5. Combining multiple transform properties in one animation
   6. Why some elements animate “strangely”
   7. How parent containers affect animated children
   8. Practical BricksBuilder examples using transforms
   9. Exercises focused only on motion and transforms

6. Timing, Easing, and Animation Feel

   1. What makes an animation feel smooth, elegant, fast, or awkward
   2. Duration explained in a practical way
   3. Delay explained in a practical way
   4. Easing explained simply
   5. Common ease types and when to use them
   6. Why linear motion often feels unnatural
   7. Matching animation feel to website style:
      1. Corporate
      2. Premium
      3. Creative
      4. Minimal
      5. Playful
   8. How to avoid over-animating a page
   9. Exercises comparing different easing and duration choices

7. Animating Multiple Elements

   1. Selecting a group of elements
   2. How GSAP handles multiple targets
   3. Stagger animations explained clearly
   4. Common patterns:
      1. Cards entering one after another
      2. List items fading upward
      3. Icons popping in sequence
      4. Gallery elements revealing progressively
   5. Controlling order and rhythm
   6. Grid and loop-like animation thinking
   7. Avoiding common issues with dynamic content
   8. Practical BricksBuilder examples with repeated elements
   9. Exercises for staggered animations

8. Timelines: The Real Power of GSAP ⭐

   1. What a timeline is
   2. Why timelines are better than many separate animations
   3. Creating your first timeline
   4. Adding steps to a timeline
   5. Sequencing animations properly
   6. Running animations at the same time vs one after another
   7. Position parameters explained simply
   8. Overlapping animations without confusion
   9. Reusable timeline thinking
   10. Building a hero section animation with a timeline
   11. Building a card reveal sequence with a timeline
   12. Common beginner timeline mistakes
   13. Exercises focused on sequencing

9. ScrollTrigger: Animations on Scroll

   1. What ScrollTrigger is and why it matters
   2. How to load and register ScrollTrigger
   3. Trigger, start, end, and scrub explained simply
   4. Difference between:
      1. Scroll-triggered animation
      2. Scroll-linked animation
   5. Typical use cases:
      1. Fade in on scroll
      2. Slide in on scroll
      3. Section reveal
      4. Pinned storytelling sections
      5. Progress-based motion
   6. Using markers for debugging
   7. How viewport position really works
   8. Building your first ScrollTrigger animation
   9. Building scroll reveal animations for Bricks sections
   10. Building image and text animations triggered on scroll
   11. Understanding scrub
   12. Understanding pin
   13. Understanding toggleActions
   14. Common ScrollTrigger mistakes
   15. Performance and mobile considerations
   16. Exercises for scroll-based interactions

10. Working Safely Inside WordPress and BricksBuilder

    1. How Bricks structures the DOM
    2. Choosing stable selectors in Bricks
    3. Using classes instead of overly specific selectors
    4. Avoiding selector problems when templates repeat
    5. Animating elements inside:
       1. Sections
       2. Containers
       3. Blocks
       4. Query loops
       5. Popups
       6. Sliders/tabs/accordions
    6. Dealing with content that appears later
    7. Page-specific vs global animation scripts
    8. Organizing code snippets cleanly
    9. Preventing conflicts with optimization and caching plugins
    10. How to debug when an element exists visually but GSAP cannot target it
    11. Safe workflow for staging and production

11. Responsive Animation

    1. Why animations should change across screen sizes
    2. What works on desktop but not on mobile
    3. Adjusting movement distances for small screens
    4. Adjusting timing for mobile
    5. Hiding or reducing non-essential motion
    6. GSAP approaches for responsive behavior
    7. ScrollTrigger considerations on mobile devices
    8. Building animations that still feel elegant on tablet and phone
    9. Exercises for responsive adaptation

12. Accessibility and User Experience

    1. Why accessibility matters in animation
    2. Understanding reduced motion preferences
    3. Respecting prefers-reduced-motion
    4. When animation improves UX
    5. When animation harms UX
    6. Avoiding motion sickness and distraction
    7. Keeping animations fast, meaningful, and readable
    8. Making animation support content instead of overpowering it
    9. Accessibility checklist for every project

13. Debugging GSAP Like a Beginner-Friendly Developer

    1. A simple debugging mindset
    2. Common reasons animations do not run:
       1. GSAP not loaded
       2. Wrong selector
       3. Script running too early
       4. Element hidden or not rendered yet
       5. CSS conflict
       6. ScrollTrigger setup issue
    3. Using browser developer tools without fear
    4. Logging and testing in small steps
    5. Isolating animation code from layout problems
    6. Debugging timeline issues
    7. Debugging ScrollTrigger issues
    8. Debugging in Bricks-specific environments
    9. Creating a repeatable troubleshooting checklist

14. Performance and Best Practices

    1. What makes animations feel slow
    2. Why transforms and opacity are usually best
    3. Avoiding layout thrashing and expensive properties
    4. Reducing animation overload on a page
    5. Performance considerations for scroll animations
    6. Performance considerations for mobile devices
    7. Lazy loading, dynamic content, and refresh behavior
    8. Organizing animations for maintainability
    9. Reusing patterns instead of rewriting everything
    10. Practical performance checklist for WordPress projects

15. Intermediate GSAP Concepts

    1. Callbacks explained simply
    2. Repeats and yoyo
    3. Defaults in timelines
    4. Labels in timelines
    5. Controlling playback:
       1. Play
       2. Pause
       3. Reverse
       4. Restart
    6. Setting states with gsap.set()
    7. Relative values
    8. Function-based values
    9. Basic utility methods worth knowing
    10. Building slightly smarter animations without advanced JavaScript

16. Advanced GSAP Possibilities You Should Understand Conceptually

    1. Why this chapter is about understanding, not memorizing
    2. Advanced possibilities overview:
       1. Complex timelines
       2. Scroll storytelling
       3. Parallax systems
       4. Menu animations
       5. Page transition ideas
       6. Interactive hover systems
       7. Mouse-follow effects
       8. SVG animation
       9. Text splitting animation concepts
       10. State-based animation systems
    3. Which advanced ideas are realistic inside BricksBuilder
    4. Which advanced ideas may require stronger JavaScript skills
    5. How to grow from “simple user” to “custom animation builder”

17. Introduction to Glaze: Why It Exists

    1. What Glaze is
    2. How Glaze relates to GSAP
    3. When Glaze is a better choice than raw GSAP
    4. When raw GSAP is a better choice than Glaze
    5. The mental model of “declarative” animation
    6. How Glaze can help non-JavaScript-heavy users
    7. The limitations of simplification tools
    8. Why learning GSAP first makes Glaze much more powerful

18. Setting Up Glaze in WordPress and BricksBuilder

    1. How Glaze is added to a project
    2. Required dependencies and loading order
    3. How Glaze works with GSAP and ScrollTrigger
    4. Where Glaze configuration or attributes live
    5. Typical setup inside BricksBuilder
    6. Testing whether Glaze is working
    7. Troubleshooting Glaze setup issues

19. Your First Animations with Glaze

    1. The basic Glaze syntax and mental model
    2. Creating simple entrance animations
    3. Creating fade, slide, and scale effects
    4. Applying animations through attributes/classes
    5. Repeating the same animation pattern across many elements
    6. Practical BricksBuilder examples using Glaze
    7. Comparing the same animation in:
       1. Raw GSAP
       2. Glaze
    8. Exercises for simple Glaze usage

20. Scroll Animations with Glaze

    1. How Glaze simplifies ScrollTrigger patterns
    2. Creating scroll reveal effects
    3. Creating stagger-on-scroll effects
    4. Trigger settings in Glaze
    5. Debugging scroll-based Glaze setups
    6. Practical reveal systems for Bricks sections
    7. Comparing Glaze scroll setup with raw GSAP ScrollTrigger

21. Choosing Between GSAP and Glaze

    1. A practical decision framework
    2. When to use Glaze:
       1. Fast implementation
       2. Reusable simple effects
       3. Lower-code workflows
    3. When to use GSAP:
       1. Complex sequencing
       2. Advanced control
       3. Interactive behavior
       4. Highly custom motion systems
    4. Hybrid workflows:
       1. Glaze for simple reveal effects
       2. GSAP for hero sections and complex components
    5. Project planning examples
    6. How professionals often mix abstraction and custom code

22. Reusable Animation Systems for Real Projects

    1. Creating a consistent motion style for a website
    2. Building a small animation library for yourself
    3. Naming conventions for reusable classes
    4. Reusing reveal patterns across multiple pages
    5. Building “animation recipes” for common sections:
       1. Hero
       2. Feature cards
       3. Testimonials
       4. Pricing tables
       5. FAQ
       6. CTA sections
       7. Footer reveals
    6. Combining Bricks classes, GSAP, and Glaze systematically
    7. Maintaining consistency across client sites

23. Real-World Project Modules

    1. Project 1: Simple business website animation system
    2. Project 2: Premium agency-style landing page
    3. Project 3: Scroll-based storytelling homepage
    4. Project 4: Animated cards and content reveal system
    5. Project 5: Interactive header and mobile menu
    6. Project 6: Query loop animation patterns in Bricks
    7. Project 7: WooCommerce-friendly subtle animations
    8. For each project module:
       1. Planning
       2. Structure
       3. Animation goals
       4. GSAP version
       5. Glaze version where appropriate
       6. Performance checks
       7. Accessibility checks

24. Common Patterns You Will Use Again and Again

    1. Fade up reveal
    2. Fade in with slight delay
    3. Staggered card entrance
    4. Hero text sequence
    5. Image mask reveal concept
    6. Counter or number emphasis concept
    7. Hover emphasis animations
    8. Section transition feel
    9. Pinned section concept
    10. Before/after comparison thinking
    11. Reusable code and Glaze pattern library

25. Mini JavaScript and CSS Support Modules

    1. JavaScript essentials specifically for animation work
    2. CSS essentials specifically for animation work
    3. Selectors cheat sheet
    4. Positioning cheat sheet
    5. Transform cheat sheet
    6. Easing and timing cheat sheet
    7. ScrollTrigger cheat sheet
    8. BricksBuilder-specific implementation cheat sheet
    9. Glaze syntax cheat sheet
    10. “How to read code without panic” support lesson

26. Workflow, Planning, and Creative Decision-Making

    1. How to decide what should animate and what should not
    2. Designing animation with purpose
    3. Starting with low motion and increasing only if needed
    4. Planning animation before writing code
    5. Creating animation hierarchy on a page
    6. Matching animation to branding and audience
    7. Knowing when restraint is more professional
    8. Turning inspiration into practical implementation

27. Final Integration: From Beginner to Independent Use

    1. How to approach a new project from scratch
    2. Choosing your workflow:
       1. Mostly Glaze
       2. Mostly GSAP
       3. Hybrid
    3. Building your own starter animation toolkit
    4. How to keep improving after the course
    5. How to use documentation effectively
    6. How to ask better questions when stuck
    7. Personal roadmap:
       1. Beginner stage
       2. Confident implementer stage
       3. Advanced custom creator stage

28. Appendices

    1. Glossary of animation terms
    2. GSAP terminology glossary
    3. ScrollTrigger terminology glossary
    4. Glaze terminology glossary
    5. BricksBuilder implementation notes
    6. WordPress-specific troubleshooting notes
    7. Common selector patterns for Bricks users
    8. Recommended animation defaults for professional websites
    9. Resource list:
       1. Official docs
       2. Practice inspiration sources
       3. Debugging tools
       4. Performance tools

Suggested Learning Path for You 🎯

If I may recommend a practical path, I would suggest this order:

1. Modules 1–6

   • Build your foundation
   • Learn just enough CSS/JS to not feel lost
   • Create first basic GSAP animations

2. Modules 7–10

   • Learn stagger, timelines, and ScrollTrigger
   • Start thinking in real website sections
   • Understand Bricks-specific implementation

3. Modules 11–14

   • Learn responsive, accessibility, debugging, and performance
   • This is where you become reliable, not just creative

4. Modules 15–16

   • Expand into more capable GSAP usage
   • Understand what is possible, even if you do not use all of it yet

5. Modules 17–21

   • Learn Glaze
   • Compare it directly with raw GSAP
   • Develop judgment about when to use which tool

6. Modules 22–28

   • Build systems
   • Practice real-world projects
   • Become independent in planning and execution

Best Way to Build This Course Together 🤝

A good workflow would be:

1. You choose a chapter from the table of contents.
2. I write the full lesson for that chapter.
3. If you want, I can include:
   1. Beginner explanations
   2. WordPress + BricksBuilder examples
   3. GSAP code samples
   4. Glaze equivalents
   5. Exercises
   6. Cheat sheets
4. Then we move chapter by chapter until the course is complete.

My Recommendation for the First Lesson

We should probably start with:

1. Module 1: Introduction: How This Course Works

or, if you want to begin immediately with useful foundations:

2. Module 2: Animation Fundamentals Before GSAP

or, if you want to get quickly into practical use:

3. Module 3: Setting Up GSAP in WordPress and BricksBuilder

If you want, I can next turn this outline into either:

1. a more detailed curriculum version with learning goals per chapter, or
2. the full content for Module 1, or
3. the full content for Module 2.