MotionPath translate concurrent override issue

[cesare.polonara]

Hi, I'm in this situation and I don't know how to manage the fact that MotionPath animation takes control on the translateX property when reversing the scroll ( go to the very end of the scroll animation, then reverse scrolling back, you will see the circles going to the straight right instead of doing the bending curve as they did in forward mode ).
`overwrite:auto` does not seem to help, and `overwrite:true` breaks the animation.

TIA.

See the Pen KKxaeEG by kais3rp (@kais3rp) on CodePen

[GreenSock]

That's because you created conflicting animations - you've got your motionPath animation first in the timeline that controls the x/y position, and then you ALSO have another one that's affecting x to go in a completely different direction. So they're both fighting for control. If you do overwrite: "auto" (or true), all that does is basically KILL the overwritten part (so of course you won't see it affecting things after that point at all). 

 

You definitely should not be creating conflicting animations like that. The reason it looks different when scrolling forwards vs backwards is because the rendering order inverts in reverse. In other words, when moving the playhead forward, the LATER tween would render last whereas when moving the playhead backwards, the EARLIER tween would render last. That's exactly how it's supposed to work. 

 

Possible solutions:

1. Don't overlap the animations. 

   See the Pen dyqNQRR?editors=1010 by GreenSock (@GreenSock) on CodePen

2. Use a different (invisible) motionPath that has the shape you want. Basically copy the path you have now, but add that extra part at the top that's curved in the way you want your objects to travel. You can still leave the red stroked path as-is. Everything would look the same visually, but you'd just use one motionPath tween where the path actually has the shape you're going for. 
3. You technically could write a bunch of extra JavaScript to force things to render in a particular order no matter which direction the playhead travels, but honestly that seems quite hacky and unintuitive to me. It is doable, though. If you need help with that, we're available for paid custom consulting - just reach out directly to explore those options.

I hope that helps!

[cesare.polonara]

14 hours ago, GreenSock said:

That's because you created conflicting animations - you've got your motionPath animation first in the timeline that controls the x/y position, and then you ALSO have another one that's affecting x to go in a completely different direction. So they're both fighting for control. If you do overwrite: "auto" (or true), all that does is basically KILL the overwritten part (so of course you won't see it affecting things after that point at all). 

 

You definitely should not be creating conflicting animations like that. The reason it looks different when scrolling forwards vs backwards is because the rendering order inverts in reverse. In other words, when moving the playhead forward, the LATER tween would render last whereas when moving the playhead backwards, the EARLIER tween would render last. That's exactly how it's supposed to work. 

 

Possible solutions:

1. Don't overlap the animations. 
2. Use a different (invisible) motionPath that has the shape you want. Basically copy the path you have now, but add that extra part at the top that's curved in the way you want your objects to travel. You can still leave the red stroked path as-is. Everything would look the same visually, but you'd just use one motionPath tween where the path actually has the shape you're going for. 
3. You technically could write a bunch of extra JavaScript to force things to render in a particular order no matter which direction the playhead travels, but honestly that seems quite hacky and unintuitive to me. It is doable, though. If you need help with that, we're available for paid custom consulting - just reach out directly to explore those options.

I hope that helps!

Hi Jack, thanks for the answer, yes I imagined the overlapping was bad, I was fooled by the fact that it worked well in forward mode, I guess that's just a coincidence due to the fact the SVG is on a vertical straight line hence the x is not animated on the last motion path hence the overlapping animation can make that bending. 
Yes I fixed it by changing the SVG line to make a slight bending to the left and then start the staggering animation. 

[GreenSock]

6 hours ago, cesare.polonara said:

I was fooled by the fact that it worked well in forward mode, I guess that's just a coincidence due to the fact the SVG is on a vertical straight line hence the x is not animated on the last motion path hence the overlapping animation can make that bending. 

 

It's not a coincidence. I tried to explain exactly what's happening in my previous post: 

 

20 hours ago, GreenSock said:

The reason it looks different when scrolling forwards vs backwards is because the rendering order inverts in reverse. In other words, when moving the playhead forward, the LATER tween would render last whereas when moving the playhead backwards, the EARLIER tween would render last. That's exactly how it's supposed to work. 

 

Glad you've got a solution working now. Good luck with the project. 

[cesare.polonara]

1 hour ago, GreenSock said:

 

It's not a coincidence. I tried to explain exactly what's happening in my previous post: 

 

 

Glad you've got a solution working now. Good luck with the project. 

Yeah sorry, not meaning a "coincidence" in that way, your explanation was pretty straight"forward"
Thanks!