Enable / Disable scrolltrigger and animation on switch

[noob_jimi]

I'm trying to create a toggle switch "Animation on / off", by default on page load, it is set to animation on. Now when I set animation to off, it should remove all scroll trigger and tweens and its css. and when i turn it on again it should re-enable all animations.

 

Taking inspiration from following page, i used the code to make this work. but i'm not able to get the concept still.

 

It disables the scrollTrigger, but it doesnt reset the position of elements to their normal value. When you set the animation off, you can notice that second box is not visible, because it was set to tween from opacity 0 to 1. so i think we need to use clearprops, but i cant find a way to get all the timelines and do it at once, and then re-enable them animation checkbox is set to on.

 

Can anyone please suggest the correct to make the animation on/off toggle working. Thanks in advance.

See the Pen jOBVEqR by jimishsoni1990 (@jimishsoni1990) on CodePen

[Cassie]

Hi there! There's a lot going on in this demo - afraid I don't have time to dig in to it, but i've popped together a codepen that should help.

See the Pen 3a472d99c0d8cb9f371ac2d2b99f44a5?editors=0010 by cassie-codes (@cassie-codes) on CodePen

 

[noob_jimi]

Hi @Cassie, sorry for the poor demo, i update the demo to yours. thank you. so lets try with the demo you created.

 

I just changed your tweens to FROM instead of TO. and now the demo isn't working. When i set the animation to off:

1. The second box will not appear because it set to tween from opacity 0 to opacity 1, so its inline css is still set to opacity:0 by gsap.

2. First box is set to tween from 100px below from its actual position, it doesnt go to normal position when animation is off.

 

Thank you so much for your response.

 

Codepen demo :

 

 

[OSUblake]

Kill is just meant to kill it, not reset everything. For that you can clear the props after killing your triggers.

gsap.set(".grow, .spin", { clearProps: "all" })

 

[noob_jimi]

Hi @OSUblake 

 

yes kill is not an option here, clear props will help. but this is just an example of two tweens, in real world i could have a list of 10 or 15 timelines with different tweens in it. Is there a function using which i can get all the timelines  on the given page and then apply clear props to it. and when user set animation to on, set the props again.

 

I tried with the globalTimelines.getChildrens(), but i could not figure out what to do with the response from that function. in foreach loop on that when i set tl.clear(), it says clear is not a function. 

 

[OSUblake]

You can check your scroll triggers for an associated animation. 

 

See the Pen 51e4a1fa1e2d0e129a15bebb35b8d247 by osublake (@osublake) on CodePen

 

You can also do the same use same pattern with the globalTimeline.

 

 

1 hour ago, noob_jimi said:

tl.clear()

 

That's assuming it's a timeline and not a tween. Tweens don't have a clear method. But that still doesn't reset the inline styles. It just removes animations from the timeline.

https://greensock.com/docs/v3/GSAP/Timeline/clear()

 

[noob_jimi]

you are the best @OSUblake

[noob_jimi]

Hi @OSUblake

Just to understand things more clearly, i have two question:

1. Why not use scrolltrigger .enable() and .disable() method instead of kill().

2. What these three parameters in .getChildren(true, true, false) I couldn't find it in doc.

 

[OSUblake]

7 minutes ago, noob_jimi said:

Why not use scrolltrigger .enable() and .disable() method instead of kill().

 

I guess it would probably work the same. I was just using the code that was already there. 

 

8 minutes ago, noob_jimi said:

What these three parameters in .getChildren(true, true, false) I couldn't find it in doc.

 

It's in the Timeline docs.

https://greensock.com/docs/v3/GSAP/Timeline

 

.getChildren()

https://greensock.com/docs/v3/GSAP/Timeline/getChildren()

 

We want nested animations and we want tweens. We don't care about timelines because they don't have .targets().

https://greensock.com/docs/v3/GSAP/Tween/targets()

 

[Cassie]

This is great - thanks for explaining that Blake.