Jump to content


Step Animation on Bezier Path

Moderator Tag
Go to solution Solved by Carl,

Recommended Posts


I am trying to create movement of 6 items via bezier path, with ability to move them together on 1/6 of path (or for some distance) left or right.

However, one of the problem is old engine, and I am not sure if it is possible to make.

I am new to gsap, so it is a bit old version before I found autoRotate)
However it's around what I need, but I am looking for ability to move left or right on some distance on bezier path and then pause.

* VERSION: 2.1.2 * DATE: 2019-03-01 * UPDATES AND DOCS AT: http://greensock.com * *
Includes all of the following: TweenLite, TweenMax, TimelineLite, TimelineMax, EasePack, CSSPlugin, RoundPropsPlugin, BezierPlugin, AttrPlugin, DirectionalRotationPlugin

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

Link to comment
Share on other sites

If someone can help me or give some hint, I will be very grateful!

Link to comment
Share on other sites

Hi @Mendax welcome to the forum!


I'm not sure what it is you're trying to do. Instead of copying code from some old pen I would suggest trying your hand at creating something your self, shouldn't be that difficult right? The pen you shared uses GSAP version 1.19.1 we're currently at version 3.11.4! 


You want to move things along a path right? That seems like a perfect use case for MoitonPathPlugin! (check the MoitonPath docs here). Personally I've never use Pixi.js, but to have an image move along a path you don't really need it if you're using the MoitonPathPlugin, with it you can move any element along a path you define. On the docs page there also is a video that dives deep in to all the features. Hope it helps and happy tweening! 


Check out a demo here:


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


  • Like 1
Link to comment
Share on other sites

Yeah @mvaneijgen, Ive already found MotionPathPlugin, however the problem is, that I have old engine used in co. So unfortunately I can't use it.

However the main my question is: 

If it is possible to make movement on bezier path via call custom method(direction: "left" | "right", distance)
so items could shift together a little bit for every call.

Link to comment
Share on other sites

  • Solution

i really can't follow much of the code in your demo (I don't know a lot about pixi and native canvas stuff) and it's been many years since I've touched the old GSAP syntax and bezier plugin.

However, I was able to find and modify an example from the depths of the archives that might help you a bit conceptually.


See the Pen mdGMWmB?editors=1111 by snorkltv (@snorkltv) on CodePen


The basic idea is that you add a bunch of bezier tweens to the same timeline that are offset using the position parameter

The left and right buttons use tweenTo() to tween the progress of the timeline by small amounts in positive or negative directions.


For what it's worth, even back then these were fairly advanced concepts so I'm guessing it could be a much to bite off if you are new to the platform. 

I believe the newer MotionPath plugin would make this quite a bit easier as @mvaneijgen suggested. 

  • Like 4
Link to comment
Share on other sites

@Carl It's actually not bad, thanks a lot, Ill try to adapt and give example here for others)

Link to comment
Share on other sites

@Carl one question, is it possible to use autoRotate here? 

ok, autoRotation works also, but not for first item in array

  • 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.