Toggle Animation

[JamesGrubb]

Hi. Im porting over an example created in this forum demonstrating toggling an animation using Gsap 2.1.3/TweenMax.min Im trying to recreate the same toggling function using with Gsap 3.4.2/gsap.min. I've kep the code the same except change new TimelineMax() to gsap.timeline() , but im getting a jump at the neginning of the animation. Original pen

See the Pen WqKyye by PointC (@PointC) on CodePen

 Hope you can help.

See the Pen c3bd68c1d3a190eae707728c28166853?editors=1011 by limitedunlimited (@limitedunlimited) on CodePen

[JamesGrubb]

Just been playing some more. I might have fixed this but would appreciate some feedback. I added tl.reverse(-1)


See the Pen 137ef911a59cb7fc3c48b76fc309eb98?editors=0110 by limitedunlimited (@limitedunlimited) on CodePen

[ZachSaucier]

Hey James.

 

I believe that you actually stumbled upon a little bug. Thanks for posting about it! We'll get it fixed ASAP. 

 

Side note: We recommend using the more condensed GSAP 3 syntax. You can read more about that here:

 

[GreenSock]

Indeed, that is a bug with a rare edge case (from() tween inserted at the very start of a reversed timeline). It should be resolved in the upcoming release which you can preview at https://assets.codepen.io/16327/gsap-latest-beta.min.js

[JamesGrubb]

Ah, ok thanks for your time and swift response. Much appreciated.

[PointC]

Just FYI for anyone stumbling onto this thread. The original reference demo pen was one of mine and I took this opportunity to update it to GSAP 3. The from() tween at the beginning of the reversed timeline works perfectly now with the fix from Jack.

 

That is all. Happy tweening.