How I use the (GSAP) Stagger effect with text across a whole page

How To
1

Hi Bricksforge fans,

if you’re interested in 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, then :video_camera: this video will teach you more.

Stagger Text Effect-s

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 (Scrub), add delays and ease effects to refine your animations.

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

@Daniele: If you find the video useful - you could ofc share it with other BF fans in Facebook or wherever. Again: it’s awesome to work with the BF animation panel and discover more and more of its fascinating options of it :+1:t2: :ok_hand:t2:

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

2 Likes
2

Just shared :ok_hand: Again, a really, really great video. Thanks a lot! :slight_smile:

1 Like
3

Thank you for the kind compliment, @Daniele - I appreciate it a lot! :folded_hands:t2:

4

Rather than apply .trigger to every element. Could we use the ‘.brxe-heading, .brxe-text, .brxe-basic-text’ in the BF trigger settings?

I understand using default bricks classes could open up a wide range of problems. But for example purposes, this is possible?

5

Yes, also a good idea - why not? The GSAP trigger accepts IDs and classes, no restriction afak. So, feel free to try it out!

6

I would add the .trigger class to a parent container and then target all the child elements that you would like to animate. This way, you don’t need to manually add the .trigger class to a bunch of elments.

For example, add .trigger to the section and then mark the GSAP trigger like this: .trigger .brxe-text, or even .trigger p. This way, it won’t fire for any p or .brxe-text, just the ones inside a .trigger container.

Anyway, @Heiko this is an amazing tutorial!! Can’t wait for more! :blush: Your videos are top! :fire:

1 Like
7

Very good idea! And thank you very much, Isaura :pray: @knut_studio

8

Thank you for your great tutorials!! I still have to watch the new one you have published today, but so far I really like what you publish :blush:

1 Like
9

Thanks a ton Isaura (@knut_studio) for your kind words! :pray: Hope you also like the new one. :+1:

1 Like