Smooth Movement

[Mendax]

Hi ❤️

I am trying to understand how to create smooth movement. If I want different eases on every step.

The key problem that:
- I guess I need start, progress, and finish parts because
- progress could repeat a lot of times (for example it will rely on time needed to get response from backend)

I am pretty new to gsap, sometimes trying to learn it. So maybe I am losing some method.


A lot of thanks if you could give me some hint!
 

See the Pen OJrOEba by Gerikvolf (@Gerikvolf) on CodePen

[Rodrigo]

Hi,

 

You can tween the progress of a timeline and apply an ease in/out function, like this:

See the Pen zYyPaJw by GreenSock (@GreenSock) on CodePen

 

GSAP can tween the numeric value of any property on any object. Since Timelines are just objects, that can be done with a regular gsap.to() instance.

 

Hopefully this helps.

Happy Tweening!

[Mendax]

Your expertise was invaluable. Thank you for helping! 
This cat is for u!
≽^•⩊•^≼

[Rodrigo]

You're welcome and thanks for the cat! 😺

[Mendax]

@RodrigoSmall additional question, as I understood, back.inOut(1.7) ease will not work with whole timeline?) 

I mean, ease that must pass over edge and come back not works. 

See the Pen YzdEONW by Gerikvolf (@Gerikvolf) on CodePen

[Rodrigo]

Hi,

 

Yeah, I'm afraid that in the case of tweening the progress of a timeline, those type of easing functions are not going to work in the way you expect.

 

At the top of my head I don't know if such animation could be possible if you target a timeline. I think your best choice is to target all the elements and animate all of them at the same time, but given the way you want/need to construct this, it might not be super simple.

 

I wish I had a simple solution for you, but as I mentioned I can't think of something right off the bat.

 

Good luck with your project!

Happy Tweening!