Why are content 1 and content 2 overlaped ? Also, what is the best way to add a timeline to a main tween or timeline ?

[johndoe000]

What I'm trying to achieve here is a dinner table like conveyer. If you see my attempt at codepen, content 1 and content 2 are being overlaped and I don't know why ? If I add another div element with content class in it, making 5 total, it shows all five without overlaping and if I delete one, it shows all 3 total without overlaping, but with 4, I don't know what the problem is.

 

Also, in order to give it a 3d look, i chose to scale it to 1 when the element is near and scale it down to 0.5 when its far. so i created a timeline (scaleTl) for that and added it to the beginning of the main timeline (followPathTl). There seems to be some issue as well. the elemnet doesn't seem to scale up when moving from right corner to near (front) end.

 

I know the scale value need adjustment for each element but that's not the concern for me right now. I'd really appreciate if a solution including the scale adjustment was given. Thank You.

See the Pen VwRPoQd?editors=1011 by green_viper (@green_viper) on CodePen

[Toso]

hi @johndoe000 to be honest I didn't read anything I was just curious and wanted to play with the shape but I found that you are creating it inside a loop and 2 timelines, you can do it with one timeline or 1 tween as I did here 

you just need to check how staggers work 

https://gsap.com/resources/getting-started/Staggers

 

also overflow:visible for the svg will prevent this cut on that yellow circle

 

 

See the Pen LYaWGJd?editors=1010 by ahmed-attia (@ahmed-attia) on CodePen

[Rodrigo]

Hi,

 

For some reason I can't really tell you this is about even numbers and start/end positions in the path. Offsetting the start/end values seems to fix it though:

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

 

We'll look into this and keep you posted, but hopefully this works for you at the moment.

 

Happy Tweening!

[johndoe000]

Thank you very much @Rodrigo and @Toso for you help, you guys saved me a lot of trouble.

[GreenSock]

On 1/16/2024 at 5:24 PM, Rodrigo said:

For some reason I can't really tell you this is about even numbers and start/end positions in the path

This was a bug that'd only happen if the starting position landed exactly on top of one of the anchor points on the path **and** it was looping around all the way, but it should be fixed in the next release which you can preview at: 

https://assets.codepen.io/16327/MotionPathPlugin.min.js (you might need to clear your cache).