Multiple animations SVG pathsand bezier

[fernandofas]

Hi everyone,

 

I'm trying to animate two paths at the same time using svg paths and javascript, but seems something is not right with my codes where I can't find out what is missing.

 

I want each box to run on the different paths.

 

Any idea/s what is wrong with this code?

 

See on codepen:

 

 

 

Thank you very much in advance.

 

Kind regards,

 

 

Fernando Fas

See the Pen WrQeOp by anon (@anon) on CodePen

[OSUblake]

Put multiple elements inside an array.

 

TweenLite.to(["#foo", "#bar"], 1, { x: 100 });

 

See the Pen vLNBrO?editors=001 by osublake (@osublake) on CodePen

[fernandofas]

Hi OSUblake,

 

Thanks for your reply.

 

I want to make the red box go through the path (first on the left) and the blue box on the path1 (on the right), at the same time.

Your example was great, but both boxes are running at the same path.

 

Thank you

[OSUblake]

You need multiple tweens for that...

See the Pen vLNBrO?editors=001 by osublake (@osublake) on CodePen

[fernandofas]

Hi OSUblake,

 

You are right. 

Your code is awesome and your replies are amazing.

That's exactly what I was trying to do.

 

You are Master!