Stop tween midway & stop on element

[uiguy]

Having trouble figuring out 2 things on a project.

 

1. when the button is clicked either have the tween go faster or have another tween "take over" from that point. Currently Im just resetting it but its not what I want.
2.  on the second tween/animation stop the animation at a specific point - in this case either of the two "3s" i have on the page - tried a label but failed miserably.

 

thanks, in advance.

 

M

See the Pen KeROrN by mrtips (@mrtips) on CodePen

[Carl]

Thanks for the demo. Very helpful!

 

GSAP is great for this type of control. You can tween the timeScale() of an animation.

 

var spinA = new TimelineMax({paused: true, repeat: -1, delay:0 })
spinA.to("ol",5,{top:-210, repeat: -1, ease:Linear.easeNone})    
spinA.play()

    

$("input").click(function(){
   TweenLite.to(spinA, 1, {timeScale:5})
})

 

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

 

Read: https://medium.com/net-magazine/7-hidden-gems-of-the-greensock-animation-platform-4fb71389f6ca to learn more about tweening progress() and timeScale() (demos too!)

[uiguy]

Thanks Carl - this is *perfect* for my takeover scenario. Any thoughts on how i can stop this at a particular point  (the #3) next (maybe with an ease bounce)?

[Carl]

Sorry, that's a bit trickier and I don't have a solution for that at a moment.

 

However, consider that each number will be in middle at a specific progress() and since you have 10 numbers, you will see the number 3 in the middle if you tween to progress(2) (which will put 2 at the top).

 

 

The demo below will bounce to the number 3 being in the middle:

 

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

 

 

However, what if the progress() is at 6 and you tween to 3? well then the animation will spin backwards which is not wanted.

Maybe the demos above will help you or someone else come up with some ideas. Unfortunately I just can't build this whole thing out for you.

 

 

[uiguy]

No sweat Carl! The animation is going so fast that i can just apply a different tween to it and it feels pretty seamless.