How to animate on scroll?

Hi.

I am trying out Bricksforge and Animations currently. I just want to animate a text, e.g. moving it on the x-axis, while scrolling. And if you scroll back again, it simply should reverse the animation while scrolling.

But it seems like I can not make it work.

I just created a new timeline, set a ScrollTrigger, selected the trigger element (it is a heading element), added a fromTo-Animation and enabled SplitText and Stagger for style.

The animation starts right ahead if it is in viewport though, it is not bound dynamically on scrolling. I expected it to scroll forward and backward when I scroll up and down on the page.

How can I achieve that, what am I doing wrong?

The function you’re searching is called “Scrub” (https://greensock.com/docs/v3/Plugins/ScrollTrigger)

Just click on “Use Scrub” in the timeline settings and it should work :slight_smile:

Oh I didn’t know that. Whoops. Thanks for clarifying.

Suggestion: Maybe add a little info badge to that too (and the other options) with a short sentence what each of them is used for so that it is possible to understand without deeper GSAP knowledge.

Thanks for the quick support! :slight_smile:

2 Likes