How can I move these four circles back and forth along SVG path at the same time?

[LeoZ 12 Likes (Newbie)]

Hi, GreenSock community,

 

I have actually a one SVG image and four circles on it. What I'm trying to achieve here is, move four dots along the SVG path back and forth.

Is there any way we can do this using GreenSock? I'm also actually reading about MorphSVG plugins and checking the below example.

So, would you guys please help to make this animation. Thanks in advance.

 

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

See the Pen QJxzNM by LeoZoe (@LeoZoe) on CodePen

[mikel 1,823 Likes (Superhero)]

Hi @LeoZ,

 

You should also think to align the circle ...

Here QuickTip: Animation along a path

 

//var bezierData = MorphSVGPlugin.pathDataToBezier("#motion-path");

var bezierData = MorphSVGPlugin.pathDataToBezier("#motion-path", {align:"#circle1"});

 

See the Pen RqJmJQ by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

 

 

[mikel 1,823 Likes (Superhero)]

Hi @LeoZ,

 

sorry, I was a little too fast.
Your point was to animate several objects along the path.

 

Here's a great example of @OSUblake:

 

See the Pen jYMVNM by osublake (@osublake) on CodePen

 

Best regards

Mikel

 

 

[LeoZ 12 Likes (Newbie)]

Thank you, Mikel! 

 

The above example is really nice but I'm just a beginner and cannot understand it completely. But still, I'm trying to solve this myself by reading about it. 

I will try my best but I will be also appreciated if you can help me in achieving this too!

 

There is one more thing I would like to mention that, all circle should not follow the whole SVG path, they should move some distance and reverse (such as a pendulum).

[Carl 9,066 Likes (Superhero)]

Yup, Mikel was exactly right about the align property.

Another issue is that you have 3 circles with the same id (id="circle")

ids must be unique so change your svg to use: id="circle1" id="circle2" id="circle3"

 

Also since each circle exists in a different location in your svg you have to align each to the path to get the proper bezier data.

var tl = new TimelineMax({paused:true});

//create unique path data for each circle
var bezierData1 = MorphSVGPlugin.pathDataToBezier("#motion-path", {align:"#circle1"});
var bezierData2 = MorphSVGPlugin.pathDataToBezier("#motion-path", {align:"#circle2"});
var bezierData3 = MorphSVGPlugin.pathDataToBezier("#motion-path", {align:"#circle3"});

//apply to all circles
tl.set("circle", { xPercent:0, yPercent:0});

//animate each circle along its own unique bezierData
//start each animation 1 second after the previous

tl.to("#circle1", 4, {bezier: {values:bezierData1, type:"cubic", autoRotate:70}, ease:Linear.easeNone, repeat:-1, yoyo:true});

tl.to("#circle2", 4, {bezier: {values:bezierData2, type:"cubic", autoRotate:70}, ease:Linear.easeNone, repeat:-1, yoyo:true}, 1);

tl.to("#circle3", 4, {bezier: {values:bezierData3, type:"cubic", autoRotate:70}, ease:Linear.easeNone, repeat:-1, yoyo:true}, 2);
tl.play();

 

 

 

Here is your example with a few modifications:

 

See the Pen PxBGqP?editors=0110 by GreenSock (@GreenSock) on CodePen

 

[Carl 9,066 Likes (Superhero)]

To get each circle to move on its segment of the path is pretty advanced. You could create a custom svg path segment for each circle that controls how far it should move and hide it on top of the visible path.

 

Another approach is that you can make each ball tween along the same full path and then tween the progress of each of those tweens.

So  1 circle could animate on the first 50% of the path or another on the last 50% or another on the middle 50% of the path.. 

 

Keep in mind this is a very advanced concept and pretty much requires that you've experimented with the GSAP API for a few weeks. I really can't explain it all in proper detail but here is a demo:

var tl = new TimelineMax({paused:true});

//create unique path data for each circle
var bezierData1 = MorphSVGPlugin.pathDataToBezier("#motion-path", {align:"#circle1"});
var bezierData2 = MorphSVGPlugin.pathDataToBezier("#motion-path", {align:"#circle2"});
var bezierData3 = MorphSVGPlugin.pathDataToBezier("#motion-path", {align:"#circle3"});

//apply to all circles
tl.set("circle", { xPercent:0, yPercent:0});

var circle1tween = TweenMax.to("#circle1", 1, {bezier: {values:bezierData1, type:"cubic", autoRotate:70}, ease:Linear.easeNone, paused:true});

var circle2tween = TweenMax.to("#circle2", 1, {bezier: {values:bezierData2, type:"cubic", autoRotate:70}, ease:Linear.easeNone, paused:true});

var circle3tween = TweenMax.to("#circle3", 1, {bezier: {values:bezierData3, type:"cubic", autoRotate:70}, ease:Linear.easeNone, paused:true});

//create a timeline that tweens each tween to and from unique progress values
var tl = new TimelineMax();
//red
tl.fromTo(circle1tween, 4, {progress:0}, {progress:1, repeat:-1, yoyo:true, ease:Power0.easeNone})
//green
tl.fromTo(circle2tween, 2, {progress:0.25}, {progress:0.6, repeat:-1, yoyo:true, ease:Power0.easeNone}, 0)
//blue
tl.fromTo(circle3tween, 3, {progress:0.3}, {progress:0.8, repeat:-1, yoyo:true, ease:Power0.easeNone}, 0)

 

See the Pen xQJEZQ?editors=0010 by GreenSock (@GreenSock) on CodePen

 

[mikel 1,823 Likes (Superhero)]

Hi,

 

Just for fun ...

 

See the Pen vQaKJQ by mikeK (@mikeK) on CodePen

 

Happy pathDataToBezier ...  or somethinmg else.

Mikel

[LeoZ 12 Likes (Newbie)]

? You guys are really amazing! I'm so thankful for everything! 

And yes its really motivating me to learn GreenSock in deep!

Thank you so much, guys!