Animate clipped path inside SVG

[ouadielim]

Hi, I would like to achieve the following animation but I'm not sure what I'm missing:

- The Pink shapes need to move inside the Blue shapes indefinitely to show some motion.

 

I used clip path to get the Pink shapes within the Blue shapes, but after applying a Tween on them, they "overflow" the clip path.

 

Any ideas?

Thank you!

See the Pen VweJNwd by olimouni (@olimouni) on CodePen

[PointC]

Hi @ouadielim 

 

Welcome to the forum.

 

The problem is you're moving the clip-path group. You need to move the paths inside the clipped group.

gsap.fromTo(
  "#clipInFooterShape1 path",
  9,
  { x: 100 },
  { x: -200, repeat: -1, yoyo: true }
);

See the Pen bd8f3ce625237b788f6f54f208f3279e by PointC (@PointC) on CodePen

 

Happy tweening.