Step Animation on Bezier Path

[Mendax 1 Likes (Newbie)]

Hi, 

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

[Mendax 1 Likes (Newbie)]

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

[mvaneijgen 1,555 Likes (Superhero)]

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

 

[Mendax 1 Likes (Newbie)]

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.

[Carl 11,108 Likes (Superhero)]

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. 

[Mendax 1 Likes (Newbie)]

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

[Mendax 1 Likes (Newbie)]

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

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