Using the GSAP Stagger text effect with Bricksforge (across a whole page, no code)

How To
1

Hi guys,

if you’re interested in animating with and understanding the GSAP Stagger effect (or function) a bit more and how to apply it to a hero headline and text elements across a whole page with 1 class and no code, then :video_camera: this video will teach you more.

Stagger Text Effect-s

What You’ll Learn:

  • How to create stunning animations without writing any code.
  • Applying effects to all elements on a website with a single class.
  • Using Bricks Builder and Bricks Forge with the GSAP animation library.

This video will walk you through:

  1. Setting Up the Big Hero Text Animation: Learn how to animate a headline that triggers upon page load.
  2. Utilizing the SplitText Function: Understand how to split text into lines or characters using GSAP plugins.
  3. Page-Wide Application: Apply the stagger effect to multiple elements across your website efficiently.
  4. Animation Enhancements: Connect it to the mouse scroll, add delays and ease effects to refine your animations.

:arrow_down_small: And you can download the templates for free and adapt all to your own projects. Here.

May this be helpful to all who love GSAP website animations like me.

Best wishes & you’ll have a great day, :wave:
Heiko

6 Likes
2

Hey - thanks for the tutorial … one question though … where is the ‘toggle action’ and the ‘use scrub’ toggle? in fact. my layout of bricksforge is totally different to what Im seeing you use and half the things have gone? Is this the latest UI for the app? No yellow banner at the top of the timeline that runs at the foot of the screen.

Im thinking I’ve missed a setting somewhere - any help would be fab. Ive gotten to 11:52 and now cannot proceed!

thanks