Jump to content


Best way to animate clip path for image or video

Recommended Posts


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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.


Link to comment
Share on other sites

  • 3 weeks later...

Hey. Thanks so much. 

I overlooked that setting in the docs :) 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.