Move several elements on the same path object

[Mental Republic]

Hi all! i am trying to create an animation where several paths move along the same path.

 

I made one element move along the path but i am unsuccessful to make the second animate. 

See the Pen JJNeeR?editors=1010 by ivanguinea (@ivanguinea) on CodePen.

[Dipscom]

Hello!

 

We meet again @ivanguinea 

 

Thanks for the sample pen, it helps a ton.

 

Do you see where you have in your tween the attribute 'repeat:-1' - That means the tween will loop forever. So, the second tween, never actually starts.

 

There are a few ways to achieve what you are after. A cheap and cheerful way is to use the position parameter and make both tweens start at the same point in time.

 

reactor1Tl
            .to('#cajetin-1', 5, 
                {bezier: 
                    {values:seguirForma, type:"cubic", autoRotate:["x","y","rotation", 45, false]}, 
                    ease:Linear.easeNone, repeat:-1}, 0) // Here we're starting at absolute time zero
            .to('#cajetin-2', 5, 
                {bezier: 
                    {values:seguirForma, type:"cubic", autoRotate:["x","y","rotation", 45, false]}, 
                    ease:Linear.easeNone, repeat:-1}, 0); // And here as well.

 

A comment. Why are you using so many circles in your SVG? You can create a pattern instead or nesting so many circles inside the main shape if all you need is a polka-dot pattern.

 

https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Patterns

[Mental Republic]

hahaha

 

Patterns sound new to me, but i will peek at it.. I'm a rookie here... 

 

I changed what you suggested, but the two elements seem not to be following the same path:

 

 

See the Pen JJNeeR?editors=1010 by ivanguinea (@ivanguinea) on CodePen.

 

 

Thanks for all!!!

[Dipscom]

They are following the same path. They are just not sitting on the same spot.

 

All of those superfluous circles make it hard to troubleshoot your SVG because is a ton of code to read through. I can see you have some translation transform, matrix transform and data-svg elements on your SVG, they will be throwing your shapes off position.

 

I know it is hard for you to know what to keep and what to not include when making a demo, you will get better with time. Just try and have as little code in there as possible to illustrate what you are trying to achieve. Two black squares going around one thick line is all you need in here. That will make spotting mistakes an order of magnitude easier.

 

I would love to set an example up for you showing how little you need but I have to be bad cop here and make you do homework. Sorry.

 

So, for now, remove all these other bits from your svg until you have the bare minimum. Put the animation back in and we will work on the offsetting of the second block after that.

 

 

[Mental Republic]

Sure thing, man! Thanks for the advice, i'm new but eager to learn new stuff.

 

I think i did it. I removed all unnecessary code from the pen.

 

 

See the Pen JJNeeR?editors=1010 by ivanguinea (@ivanguinea) on CodePen.

 

[GreenSock]

This is a bit of a tricky scenario because of the way your artwork is built (not "wrong" at all, just tricky). You've gotta adjust the transformOrigin and also offset things with xPercent and yPercent so that things pivot at the right spot and are aligned with the path at that same place too. I found that the point is roughly 30% along the x-axis, and 40% along the y-axis. Here's a fork: 

 

See the Pen 32c40652b779a59e8481f834e620ccd6 by GreenSock (@GreenSock) on CodePen.

 

Also notice that they both start in exactly the same spot on the path, so in order to get them to "follow" each other and loop seamlessly, I just delay the start time of the 2nd animation and then jump the timeline to that spot. Make sense? 

[Mental Republic]

Thanks a lot! You guys saved my life!!

[Dipscom]

Here's an alternative setup - It does require you to write your own SVG code. The upside of it is a lot less code and the same result. I have even stolen @GreenSock's alignment trick to use it myself.

 

See the Pen YQQLEa by dipscom (@dipscom) on CodePen.

 

[Mental Republic]

You are awesome! Any ideas how i can change the direction? In my example the boxes go all the way backwards... Can i make them go the other way round?

[Dipscom]

Backwards in what way?

 

Yes, that's possible and pretty simple. It just depends on what you mean by backwards.

 

Add a third box, with its own id and make it move normally then add .reverse() at the end.

 

var b3 = move('#box3'). progress (0.25). reverse ();

 

I've added the progress() as well just to illustrate you can chain those methods together because our move() function returns a tween and therefore we can treat it as if it's a tween.

[Mental Republic]

Jeez! I'm so bad on this... 

 

Can you help me make them go forward using Jasck's pen? 

See the Pen 32c40652b779a59e8481f834e620ccd6 by GreenSock (@GreenSock) on CodePen.

 

I find this code much understandable as i'm so rookie here... Sorry!!!!

 

[Dipscom]

Forwards? I thought you wanted it backwards?

 

I still am not sure as to what you mean when you say that. Do you want the animation to move in reverse of what it currently is? Just slap .reverse() at the end of the timeline and it will play in reverse.

[Mental Republic]

yeah, to move the opposite way as it is now. The thing is if i add .reverse() in any of those 'to' tweens is just looks weird...

[GreenSock]

I just adjusted the codepen and put a .reverse(10000000) on the end. The reason I put the 1000000 in there is to move the playhead way ahead in the timeline. If you just reverse(), it'll go from whatever the time is back toward 0 and then stop. This way, it'll have 10000000 seconds before it hits the beginning and stops. You can make that number whatever you want, of course. I just chose a big number to ensure it keeps repeating for a long time. 

 

And to be clear, I added the reverse() call to the timeline, NOT the individual tweens inside the timeline. 

[Dipscom]

Sneaking one in...

 

You can reverse the whole timeline.

[Dipscom]

Bigger, not quick enough.

[Mental Republic]

Thanks for all! I changed my code following your instructions and it worked!

 

I have another issue though. It works smooth if i used the same Jack's parameters, but... It does not work if i include this in a function. 

 

Like in this pen:

 

See the Pen JJNeeR?editors=1010 by ivanguinea (@ivanguinea) on CodePen.

 

[Mental Republic]

I managed to  get this working! Thanks for all!

[Mental Republic]

Me again. 

 

How can i make a tween to play after a repeat -1 tween

 

Like this:

 

            .to($luzNaranja, 0.7, {fill: '#FF981D', repeat: -1})
            .to($parpadeo, 0.7, {fill: '#FF981D', autoAlpha: 0.7, repeat: -1})

 

 

[GreenSock]

You can use the position parameter, either by hard-coding an absolute time value or by dynamically grabbing the endTime() of the most recently-added child (and make sure you set the "includeRepeats" parameter to false): 

tl.to($parpadeo, 0.7, {fill: '#FF981D', autoAlpha: 0.7, repeat: -1})
  .to(otherThing, 0.7, {fill: 'purple'}, tl.recent().endTime(false));

 

To learn more about the position parameter, see http://greensock.com/position-parameter.