GSAP + Webflow: Resetting timeline animations inside Tab components

[orip]

I’m using the new Timeline feature in Webflow to create a GSAP animation on a specific element. The animation is set to trigger on scroll into view.

This element is reused as a component inside a multi-tab WF component. When switching tabs, I’d like the animation to reset and play again once the element is visible.

What’s the best way to restart or re-initialize the GSAP timeline on tab switch?

 

The layout is something like this:

WF settings as follows:

Thanks in advance!

 

[Rodrigo]

Hi,

 

Is really hard to debug without a minimal demo that clearly illustrates the problem. 

 

One thing could be that when you change the tab call the refresh method:

https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.refresh()

 

Is worth mentioning though that if the start point has already passed the animation has already triggered, especially if the element is already in the DOM, the animations of all the tab elements will be triggered at the same time, even if the elements are not visible.

 

When using code you can restart the animation when clicking the tab element, but for that you need to store the ScrollTrigger instance and the animation associated with the ScrollTrigger instance, but I couldn't really tell you when using a third party component and the IX3 interactions panel/timeline.

 

Another option could be use unique selector like a custom attribute for each tab and not a single class that is used for every tab component.

 

Unfortunately I'm not an expert when using IX3 and the interactions' timeline, I'm more familiar with the custom code approach.

 

Hopefully this helps in some way, if not feel free to post a simple demo or a WF clonable that I can tap into and see what I can find out.

Happy Tweening!

[orip]

Thanks! here is the clonable:

https://webflow.com/made-in-webflow/website/gsap-in-webflow-tabs-tester

 

When recreating this demo, I ran into another issue: the component appeared in the first tab but was hidden in the others once published, even though it was visible in all tabs inside Designer. The problem was caused by the initial interaction (fade-in) being applied to a trigger instead of the class. After switching the interaction to target the class, the component became visible in all tabs.

[Rodrigo]

Hi,

 

Yeah this seems related to the fact that you can't add more triggers to a ScrollTrigger instance when using IX3 timeline. For example here is the interactions panel of a hover interaction:

As you can see you can add a new trigger that could, for example, restart the animation from the beginning. In this case is a simple hover effect that plays/reverses the animation. Now here is the interactions panel of a ScrollTrigger instance:

Unfortunately you can't add a new interaction, like clicking the corresponding tab button, to restart the GSAP Timeline associated with the tab's content and I don't know how simple that would be in this particular scenario, since the tabs panes each have their own fade in/out animations that are handled independently.

 

As I mentioned this can be done with custom code, but not without investing a bit of time, not a lot but definitely a few hours and most likely you wouldn't be able to use the tabs element provided by webflow's editor.

 

I'll ask around some folks in webflow and see what I can find out, but being Saturday we might have to wait until Monday to get an answer.

[orip]

Exactly, couldn't figure how to add another trigger since the ui was missing from the scolltrigger option.. WF should probably add another trigger that allows multiple functions on the same object w/o custom code.. thanks for checking!