How to stop/kill existing tween before starting new one

[brightpixels]

Hello,

I am relatively new to Greensock and struggling to fix a particular issue am experiencing with timelines. I have built a single web page using scrollify (jquery plugin) to smooth-scroll between "sections", initially with no Greensock animation (apart from section 3 to navigate between the chart options): [web page no longer available] (responsive design in action so please make sure to view with min 1024px wide screen and 661px high screen).

 

Now, the next challenge is to animate elements (mainly the big circles) across sections, whenever you navigate between them, as follows:

• If going forward to the next section, tween animate
• If going forward but not in order, or reveseing (regadless in order or not), no animation all.

 

This is the vision from design: [web page no longer available] (prototype animates both forward and reverse but requirement is just for forward

 

I have made a start up till section 3: [web page no longer available] which works well, ONLY if you allow animation to finish, before moving again. For example: go from section 1 to section 2 and back to section 1; once slowly and another time very quickly to see the difference. Another example, go from 1 to 2 to 3, once slowly enough to allow animation to complete, and another time very quickly and stop at section 3 to see how it break down. NOTE: GS animation is only avialable from min 1024px wide and min 661px high.

 

My approach:

• Scrollify gives a "before" hook whenever you scroll or jump to a new section, which allows me to call a function, let's call it animateSection() to execute before section scrolls
• In this animateSection() function, am declaring a series of timelines. For example: I created a timeline  "tl1" which is for going section-1-to-2, which looks like this

if (currentSection === 1 && prevSection === 0) { // Going forward from 1 to 2
  /* Lots of "set"s to prepare elements to be in the right state for animation */
  tl1.set(".fund-circles.fund-circles--overlapping svg:nth-child(1)", {css: {position: "fixed", top: "50%", left: "50%", xPercent:-50, yPercent:-50, x:-300}});
  tl1.set(".fund-circles.fund-circles--overlapping svg:nth-child(2)", {css: {position: "fixed", top: "50%", left: "50%", xPercent:-50, yPercent:-50, x:-150}});
  tl1.set(".fund-circles.fund-circles--overlapping svg:nth-child(3)", {css: {position: "fixed", top: "50%", left: "50%", xPercent:-50, yPercent:-50, x: 0}});
  /* .. and so on ... */

  /* followed by the animation straight after */
  tl1.to(".slide--introduction .slide-title", 0.5, {css: {opacity: 0, y:"-=300"}});
  tl1.to(".slide--introduction h2", 0.5, {css: {opacity: 0}}, "-=0.5");
  tl1.to(".slide--introduction p", 0.5, {css: {opacity: 0}}, "-=0.5");
  /* .. and so on ... */
}

 

• If I know, you are going navigating to a previous section, no animation occurs but lots of "set" statements to clear inline styles

TweenMax.set([".slide-title, .fund-circles--overlapping svg, .slide--introduction h2, .slide--introduction p, .fund-circles.fund-circles--overlapping text"], {clearProps:"all"});
TweenMax.set(".circle-list.circle-list--desktop-diagram", {clearProps:"all"});

 

 

So my question, how to stop a previous running timeline from animating and act upon the new timeline that has been triggered.

 

Thanks

 

[Carl]

I appreciate the time and thought that went into providing the details, but quite frankly its a bit overwhelming and I really don't follow it all. 

We really can't dive into a full production site and try to assess what's happening and what isn't with just a few code snippets.

if you can create a very simple CodePen demo that can clearly illustrate the issue (nothing fancy) perhaps we can take a deeper look.

 

I can take a stab at your more general question:

 

So my question, how to stop a previous running timeline from animating and act upon the new timeline that has been triggered.

 

I would offer a few things

 

Part of the problem may be that you don't know if a timeline is currently running. In that case I would recommend using isActive(): https://greensock.com/docs/Core/Animation/isActive()

 

If you have multiple timelines fighting over controlling the same properties of the same elements, you may need to rebuild those timelines fresh each time you need them (as they may contain tweens that get overwritten by the other timeline). We often suggest that you use functions to create timelines on demand.

Here is a little example of that: 

 

 

That is a relatively simple application of that concept, you may need to also reset certain properties of some elements before re-creating the timelines.

Again, what I saw on your site is just too complex at this point to really dig into and I didn't ascertain much from the code snippets provided. We definitely can provide better help with a simpler demo, just try to isolate and reduce the problem as much as possible. it doesn't need fancy graphics or anything.

 

 

 

 

 

[brightpixels]

Thanks Carl (and ignore previous reply). I have a feeling KillTweensOf, which I wasn't aware of, is what I need. Will go through your suggestions, and if they still don't work, I will provide a more simple codepen. Thanks again.

[brightpixels]

Just did quick test, and indeed, TweenMax.killTweensOf, does the job. Thank you