Jump to content
Search Community

Killing tweens after page unload

ghenry test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi all,

 

I have a "loading" index.html page that bootstraps our Single Page App. That SPA uses gsap via import methods. The SVG animation I'm doing in the index.html tramples all over the stuff in my SPA.

 

I presume the best way is to keep things in a namespace/vars and not just use TweenLite.xx()/TweenMax.xx() every where and kill them off?

 

It's kind of related to https://greensock.com/forums/topic/18460-csspluginjs-ns_error_failure-and-svgs-using-vuejs/?tab=comments#comment-85438 as my index.html includes TweenMax.min.js for the initial loading.

 

Thanks.

Link to comment
Share on other sites

I'm not sure I understand your description of what's going on, but it's always a good idea to cleanup after yourself. Note that staggered tweens are actually an array of tweens, so you would have to loop through it.

 

// Create
myNamespace.tween1 = TweenMax.to(foo, 1, {});
myNamespace.tween2 = TweenMax.staggerTo(foo, 1, {});
         
// Destroy
myNamespace.tween1.kill();
myNamespace.tween2.forEach(tween => tween.kill());

// Remove all references for good measure
myNamespace.tween1 = null;
myNamespace.tween2 = null;
                                       

 

  • Like 3
Link to comment
Share on other sites

Hi Blake,

 

A simpler description would, "How to I kill a tween when you navigate away from a page. Anything built in to the Tween ns that does something like kill(tw.isShowing()) etc.

 

Thanks.

Link to comment
Share on other sites

I'm not entirely sure I understand what you're asking, but...

//kill every animation...everywhere. Nuclear bomb.
TweenMax.killAll();

 

Or just drop your tweens into a timeline that you can easily kill() anytime. 

var tl = new TimelineMax();
tl.to(...);
...

//then later...
tl.kill();

 

  • Like 3
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...