Timelinelite forward & reverse motions don't match

[captainchemist]

Hi everyone, 

I am having a problem with making a ball roll down a ramp and then bounce off a block when it hits the bottom. I am including a working version in codepen which will speak many more words than I can, but the problem is that the roll works perfectly when it plays initially, but if I grab the progress bar to readjust it, the ball does not roll back up the ramp but only the Top direction moves, not the Left. I can only fix it by reloading the page.  

 

I can fix this problem by removing the "-=0.05" timing parameter from the last timeline transition, but I feel like I shouldn't have to do that and I am missing something more basic.

 

Thanks so much!

Stephen

 

See the Pen Bpyedz by CaptainChemist (@CaptainChemist) on CodePen

[GreenSock]

Looks like you just built things with conflicting tweens. In other words, you had 0.5 seconds when multiple tweens were fighting to control the same property on the same object. By default, GSAP automatically kills the parts of the tweens that are conflicting. That's why that part didn't work in reverse - it had been killed as soon as that other tween started. 

 

You can turn off overwrite protection globally like this:

TweenLite.defaultOverwrite = false;

(or you could set the "overwrite" property on a per-tween basis if you prefer)

 

Or you could just make sure you build your animations so that they're not conflicting

 

Does that help?

[captainchemist]

That was super helpful, thank you! Just as a followup, what would be the proper way to write the ball so that it had the rolling & moving behavior as well as the rolling & bouncing behavior? If I just wanted the little bit of bounce at the end, should I really have just ended the first tween after rolling down say 90%, and then having the second tween pick up there at +=0 and continue to roll down the last 10% but add the bounce animation as well? There isn't a way to specify that the bounce animation only turns on 90% through an animation, for example, right?

[GreenSock]

You can get pretty much any effect by using CustomEase  

 

http://greensock.com/customease