Change the progress of timeline when clicking text element

Hey guys,

I set up horizontal scrolling animation with 3 sections and 4 text elements above it.

As the link anchor don’t works well with the animation I would like to set up an event that progress the timeline when clicked on menu text element .

So each menu element would progress the animation to different time of the animation.

If anybody would know how to do that , let me know

Thank you for help
Patrik

Hey :slight_smile: Bricksforge is saving all timeline instances here: brfPanel.timelines:

Then, you can use native gsap methods to set the progress.

Example:

brfPanel.timelines[0].tl.progress(0.5);

Hello Daniele,

Thank you so much for help .

That solved everything .

Have a nice day.

Best Regards
Patrik

1 Like

Hello Again.

Only problem I found out is that when I update the progress with the menu buttons and then scroll up or down the progress get bugged by the scroll trigger or reseted back to 0.

I will try to found out myself , but if you would have any fast solution that would be perfect :slight_smile: .

thank you
Patrik

Can you share an URL? :slight_smile:

Yes , here you go

Could you try to refresh the scrollTrigger after running some custom progress changes?

I added the scroll trigger refresh after the animation to each section is completed.
What it did is it returned the timeline to start.
Was it correct from my side?

Hmm… could you try to deactivate the gsap scrollsmoother or change it to lenis? Does this change the behavior?

Hello Daniele,

I hope you had nice weekend.
I turned off the gsap scroll and tried also lenis.

Both times it always return to the last scrolled position and don’t update the scroll trigger.
I was think of creating different solution with each button scroll certain amount so the scroll trigger would be also updated .

I don’t want to take too much of your time , so if you need we can drop this post .

Thank you
Regards
Patrik

1 Like