Jump to content
Search Community

Help understanding functions

NickNo test
Moderator Tag

Recommended Posts

Hi, I'm trying to get my head around the best way to structure gsap when it comes to multiple tweens/timelines, and also controlling interactions between these and events on the page...

 

This stripped down example is from a project where I've got multiple separate animations going on in an overlay window - they start when the window opens - when I close the window I want to kill all the animations. 

 

My issue is just getting my head around the best way to structure it and call timeline functions from inside other functions etc...(and I do realise the problems here might just be a general noobness and lack of understanding of scope etc..)  Also, you'll see if you press start a couple of times it looks like the timeline doubles up or something - is there a way to stop any currently running animation that might be occurring on an instance of a timeline?

 

So, if one of the awesome helpful and patient regular contributors could point me in the right direction....:)

See the Pen bGERqMe?editors=0011 by nickjacobsnz (@nickjacobsnz) on CodePen

Link to comment
Share on other sites

Hey Nick and welcome.

 

I have no idea what the result is supposed to look like. With that being said, almost always in situations like this you want to create the animations at the start and just control them using control methods. You should also try to avoid killing animations if you want to do the same animation later. You also almost never want to put event listeners inside of event listeners, especially if you never remove them. 

 

Basing things completely off of your code (again, not sure what the end result you're expecting it), I'd set it up along the lines of this:

See the Pen QWygxJx?editors=0010 by GreenSock (@GreenSock) on CodePen

 

For more information about setting things up at the start and using control methods please read my article on animating efficiently.

  • Like 2
Link to comment
Share on other sites

Thanks Zach, and sorry for the vague-ness - part of my question was how to actually stop all (including the hint which was nested)- I ended up using 

var root=gsap.exportRoot();
root.pause();

Just for my own understanding - in that start button click - changing from my function call to your  on('click', startGlobal) stopped the double up of the animation - why is that?

Link to comment
Share on other sites

6 minutes ago, NickNo said:

var root=gsap.exportRoot(); root.pause();

I would try to avoid using this sort of thing. It's very rarely what you should be doing as it could cause other issues down the road. Most likely what would be best is for you to use something along the lines of what I have.

 

6 minutes ago, NickNo said:

in that start button click - changing from my function call to your  on('click', startGlobal) stopped the double up of the animation - why is that?

I changed a fair many things about your approach. I avoided adding a click listener multiple times like your demo does. I also make use of control methods more like I mentioned. I highly suggest that you read the article that I linked.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...