Multiple animations SVG pathsand bezier

[fernandofas 11 Likes (Newbie)]

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 9,990 Likes (Superhero)]

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 11 Likes (Newbie)]

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 9,990 Likes (Superhero)]

You need multiple tweens for that...

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

[fernandofas 11 Likes (Newbie)]

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!