Jump to content
Search Community

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

LeoZ test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

 

  • Like 2
Link to comment
Share on other sites

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

 

  • Like 6
  • Thanks 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...