Jump to content
Search Community

Smooth Movement

Mendax test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution



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!

Link to comment
Share on other sites



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!

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...