Quickly jumping between different timeline animation on same elements causing overlaps in animation (demo code included)

[brightpixels]

https://jsfiddle.net/BrightPixels/xtoemsxf/

 

 

I have a set of buttons that trigger their own timeline animations on the same elements. Two related issues am having (detailed in the demo) is around how these different timeline animation interact (this is very simplified to help to debug issue). Am new to GSAP and the way am doing this may not be the best so would appreciate any better suggestions

See the Pen by BrightPixels (@BrightPixels) on CodePen

[mikel]

Hi brightpixels,

 

Welcome to GreenSock Forums.

 

Its a small point - just position all tweens to the start (,0)

 

  four.addEventListener("click", function() {
  	var tl = new TimelineLite();
    tl.to(".chart-number", 2, {opacity: 0},0);
    tl.to(boxD, 2, {x: 0},0);
  })
  five.addEventListener("click", function() {
  	var tl = new TimelineLite();
    tl.to(boxD, 2, {x: 100},0);
    tl.to(".chart-number", 2, {opacity: 1},0);
  })
  six.addEventListener("click", function() {
  	var tl = new TimelineLite();
    tl.to(".chart-number", 2, {opacity: 0},0);
    tl.to(boxD, 2, {x: 200},0);
  })

 

 For more information : https://greensock.com/position-parameter

 

Happy tweening ...

Mikel

 

[brightpixels]

Hi Mikel, 

That's not an option for me, because I still want the number labels (".chart-number") to fade in, when the yellow line reaches the middle position. Also, when the line is moving away from the middle position, I want the number labels to fadeout first, then for the yellow line to move. If I follow your instructions, then everything plays at the same time.

[mikel]

Hi brightpixels,

 

ofc, calculate time and start time - for example like this:

 

See the Pen JydbzN by mikeK (@mikeK) on CodePen

 

Kind regards

Mikel

[Carl]

The way I understand, this is a bit of a logic puzzle.

You only need to wait for the labels to fade out if they are visible and if they are visible you have to wait til they fade out to play the animation that moves the bar.

 

I created a tween that fades the labels in and has an onReverseComplete callback that will trigger the next animation. The basic idea is I check to see if the labels animation has a progress > 1. If so I know I have to reverse that animation. When that animation reverses I trigger the next animation.

If that label animation does NOT have a progress > 1 I just skip the step of reversing it and move the bar.

 

It took me a little while to figure out and I'm not 100% sure its bullet proof, but give this a spin:

 

See the Pen eENWBq?editors=1010 by GreenSock (@GreenSock) on CodePen

 

 

 

below are 2 more demos that use the concept of waiting for an animation to reverse before another one begins:

See the Pen wMapvO?editors=0010 by MAW (@MAW) on CodePen

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

 

[brightpixels]

@mikel and @Carl - thank you so much. Both sets of answers are helpful and give me much better understanding how to get what I need. Thanks again