A single step animation (with reverse possibility)

[CyberAP]

Hello!

Is it possible to make a single step animation with GSAP?

 

I've been trying SteppedEase.config(-1) easing, but it always gets strange results and I need something I can control.

 

TweenLite.set() (or tweens with 0 duration) doesn't work in this case, because I want to use a .reverse() option, which doesn't work with .set().

 

I wish we had something like TweenLite.setFromTo(), but couldn't find anything even close to that.

 

Edit: here is an example Pen 

See the Pen zBQRGz by CyberAP (@CyberAP) on CodePen

Edited August 23, 2016 by CyberAP

[Jonathan]

Hello CyberAP and welcome to the GreenSock Forum!

 

Sorry to hear your having issues. Just so we can see what you are seeing and to see your code i context. Can you please setup a limited codepen demo example so we can test your code live to better help you.

 

 

Thanks!

 

[Carl]

Like, Jonathan said, a demo always helps.

 

It seems to me that set() does work for play() and reverse().

It is a bit of a logical mess to have a tween with no duration manage a start and end state that happen at the same time, but it should work.

 

var degrees = 45;
var tween = TweenLite.set(".arrow", {rotation:45, paused:true, immediateRender:false})


$("#play").click(function(){
  tween.play();
})


$("#reverse").click(function(){
  tween.reverse();
})

 

http://codepen.io/GreenSock/pen/WxBREr?editors=1010

[CyberAP]

Thanks for your replies Jonathan and Carl!

 

That's my bad, I had to explain my issue a bit further. I want some of my animations to have only 1 iteration on mobile devices. Repainting the whole document is very costly so I decided to still provide them with animation, but only with 1 frame of it.

 

So, I have overlay and content that animate at the same time, on mobile devices overlay should change with no animation in a specific order:

 

Overlay visible → Content starts animating → Content animation finishes.

 

When reversed:

 

Overlay hidden → Content starts animating → Content animation finishes.

 

I've made a codepen for better understanding, as you suggested:

 

 

Basically Carl's method is the same as Negative Stepped easing method, but they both don't provide much control of what's happening in reversed state.

 

I can understand why Negative Stepped easing method doesn't work for me, because it steps from bottom (as a ladder), but I need it to step from top.

 

My example is a lot simplified from what I am actually using, it has a lot of callbacks on both Tweens and Timeline, that's why my Callback hell method is called so.

[Carl]

Thanks for the demo and further explanation.

 

From what I understand there is a logic problem with how you are expecting the timeline to reverse. Reversing moves the playhead backwards through the timeline.

If the overlay is the first thing that animates in when you play it is going to be the last thing that animates out when you reverse()

 

I wasn't quite understanding why in the "carl method" you created a set with a delay of 1 second and then added it at time(0) to the timeline.

 

I removed the delay and gave it immediateRender:false here

 

http://codepen.io/CyberAP/pen/zBQRGz

 

This gives the expected behavior of

play: show overlay and immediately start animating content at same time

reverse: animate content in reverse and then hide overlay instantly

 

This will match the "callback hell" results but from what i understand is NOT what you want as you want the overlay to be hidden instantly on reverse and then the content animation to reverse.

 

For that you simply can not play() and reverse() the same timeline. My suggestion is to create separate show() and hide() methods that create the proper timeline animation that you need when requested. There is very little overhead with creating timeline on the fly and I believe this will give you the greatest flexibility and control for multiple scenarios.

[CyberAP]

Thanks for the suggestion! I think I'll go with that, because I also need callbacks on Reverse start and end, and in that case it's probably better to have a separate reversed animation.