Run GSAP animations after cookie consent

[Marko81]

Hello everyone,

 

This is my first post on the forum. I am a complete beginner with GSAP and Javascript. I have some knowledge in HTML and CSS though.

 

I have used GSAP and Scrolltrigger plugin to animate some elements on my website https://smiles.fi.

 

I have a question about how can I prevent or pause the GSAP animations until the user has given the "Cookie Consent"? My company is based in the European Union so I need to use the cookie banner to ask for the consent. Currently on my homepage GSAP animation run behind the cookie banner which obviously isn't an ideal situation. Could someone please help me with this?

 

I'm sorry if this isn't directly GSAP related question. I suppose this is more of a Javascript general question too. I would appreciate any tips you might have. Thank you very much!

[mvaneijgen]

Hi @Marko81 welcome to the forum! 

 

We love seeing minimal demos here, so that we can dive directly in the code, we can't edit anything on a live website. And indeed it is more like a normal JS question, but seen that you're new here. 

 

What I would do is add a hook to your cookie buttons and if a user has click on one of them I would restart the timeline you have made in GSAP, eg something like this, where myTimeline is your timeline animation with than will .restart() from the beginning. Hope it helps and happy tweening! 

 

myContentButton.addEventListener('click', function() {
	myTimeline.restart()
});

 

[Rodrigo]

Hi,

 

Maybe you'll find some helpful information this thread:

 

Hopefully this helps.

Happy Tweening!

[Marko81]

Thank you very much for the help. I'll include a demo next time I post on the forum.

 

I know the solution you told @mvaneijgen will work. Thank you very much.

 

I didn't get it working perfectly yet though. The Event Listener I added works on some occasion. It works little bit inconsistently. But because this isn't a GSAP related issue I'll try to find a solution elsewhere.

[Rodrigo]

Hi,

 

Yeah in this cases is better to get the cookie stuff working without GSAP and then, when the rest of the JS logic works as expected, just plug GSAP into it.

 

Good luck and let us know if you have any GSAP related question.

Happy Tweening!