Best way to animate clip path for image or video

[kasperlegarth]

Hello,

I'm trying to have animate a clip path on a div. The div contains an image or a video.

The clip path is in a svg, and i use css to apply the clip path, but the animation is laggy.

 

I have tried to insert an image into to the svg the animations i smooth.

When i try to use foreignObject to put the video into the svg. The animations is smooth, but there is somekind border on the foreignObject.

Currently im stocked how to proceed, what should i search for, how do i debug?
 

In my codepen the first two examples is clippath on a div with some element inside.

The next two is the element inside the svg.

See the Pen oNoXyYx by legarth (@legarth) on CodePen.

[Trapti]

The border issue is browser specific it is not happening in Firefox. And I don't know the fix, google search for it. 

[OSUblake]

foreignObject has always been buggy, and I would not suggest to use it. And the animation isn't laggy, it's just a rounding issue with plugin as it only does 2 decimals places, but your paths are normalized to 1. It needs more precision to be smoother. Please standby.

 

[GreenSock]

You can set the precision like this: 

tl.to(test1, {morphSVG:{shape: "#test1-2", precision: 5}})

 

See the Pen ZEaMOyY?editors=0010 by GreenSock (@GreenSock) on CodePen.

[kasperlegarth]

Hey. Thanks so much. 

I overlooked that setting in the docs