Restart a context

[Frizzled]

I'm currently reseting a .context() then restarting it completely by re-running the function that creates the animation.  Is there a cleaner way to do this directly from the context?

 

Current solution:

this.notificationContext && this.notificationContext.revert();
this.notificationAnimation(); // Create animation context and assign to notificationContext

What I tried:

this.notificationContext && this.notificationContext.revert() && this.notificationContext.data[0].restart(); // data[0] is a timeline

What I'm hoping for:

this.notificationContext && this.notificationContext.restart(); // not currently a context function but I can dream

 

[GreenSock]

Welcome to the forums, @Frizzled. 

 

It's pretty tough to offer solid advice without seeing a minimal demo, but here are a few comments/suggestions: 

1. It sounds like you're trying to treat a context() like a timeline. They're very different. Think of a context() like a very simple way to revert() a bunch of GSAP-related code. Period. Inside a context(), you may create a bunch of different timelines, things that are scheduled to happen later, and even interactive stuff that adds animations dynamically based on interactivity like button clicks. Some of the animations might even be reversed. So it doesn't make much sense to .restart() all of that - it could create logic problems. A timeline, however, is PERFECT for having total control anytime, so you can restart(), reverse(), seek(), pause(), etc. 
2. Based on the limited amount of info you shared, it sounds like maybe you just need a timeline (which you can create inside a context() of course) and then restart() that timeline. Sorta like: 

   // I assume you're using React(?) 
   useLayoutEffect(() => {
     let ctx = gsap.context(() => {
       this.notificationTimeline = gsap.timeline().to(...).to(...);
       ...
     });
     return () => ctx.revert();
   }, []);
     
   useLayoutEffect(() => {
     this.notificationTimeline && this.notificationTimeline.restart();
   }, [someDependency]);

    

3. It's totally fine if you prefer to context.revert() and then re-run your function that creates the context and animation. Obviously that's less efficient than just calling restart() on the timeline. But that also assumes that the animation's start/end values don't need to change. For example, maybe you've got an element that's 100px wide and you do a .from(..., {width: 0}) so it animates from 0 to 100, but then something in your app changes (resize?) and the native size of that element should be 500px instead of 100px. If you just restart() your existing animation, it'll still just go from 0 to 100 (because those start/end values were locked in). So in that case, it's better to revert() the context and re-run the function that creates the animation so that it goes from the new native size. But I'd guess that in the vast majority of cases, you'll just need to restart() the existing animation because none of the start/end values needed to change. There's also an invalidate() method if you need to flush any recorded start/end values. 

If you still need help, please provide a minimal demo with only enough code to illustrate the issue (a few colored <div> elements is fine) and we'd be happy to look at it and answer any GSAP-related questions. 

 

Have fun!

[Frizzled]

Thanks @GreenSock

 

I apologize for not including more code ... next time I'll work-up an example.

 

You're correct, this is in React.  I ended-up just reverting and re-running. If that hits issues I'll try a restart() on the timeline itself.

 

Thank you for GSAP!