Jump to content
Search Community

Move several elements on the same path object

Mental Republic 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

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

  • Like 2
Link to comment
Share on other sites

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.

 

;)

 

Link to comment
Share on other sites

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? 

  • Like 3
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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. 

  • Like 2
Link to comment
Share on other sites

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.

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