Jump to content
Search Community

Best way to animate clip path for image or video

kasperlegarth test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

  • 3 weeks later...

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.
×
×
  • Create New...