Невозможно одновременно добиться анимации и отзывчивости CSS-пути клипа. ⇐ CSS

[Anonymous]

I have an element on my page that needs to have its clip-path shape animated. For reference, this is for a draggable carousel.

While the carousel is being dragged, I would like its clip-path to change from a clip-path that looks like a rectangle to one that has curved sides. I also need this element to be responsive and have a changing size, and that's where I get stuck - I can't seem to make a transforming/animating clip-path that is also responsive.

If I use clip-path with path syntax, CSS can handle this animation. I've set up an example only with a hover state, to show that this works.

.testshape { clip-path: path("m 37,0 h 535 c 0,0 0.21081,92.5 0.21081,238 C 572.21081,383.5 572,476 572,476 H 37 C 37,476 35.688413,367.39046 35.688413,239.39046 35.688413,111.39046 37,0 37,0 Z"); background-color:red; transition: all .2s; aspect-ratio: 572/476; width :100%; &:hover { clip-path: path("M37 0H572C572 0 549.5 92.5 549.5 238C549.5 383.5 572 476 572 476H37C37 476 0 366 0 238C0 110 37 0 37 0Z"); } } However - I can't make this clip-path shape responsive.

I can make the clip-path shape responsive by using an inline SVG with

clipPathUnits="objectBoundingBox" but if I do that, CSS won't handle the transform between url(#shape) style clip paths. They change instantly as it switches to the new clipPath ID.

For reference, that looks like this (using some simplified shapes):

.testshape { clip-path: url("#clip-shape"); background-color:red; transition: all .2s; aspect-ratio: 572/476; width :100%; &:hover { clip-path: url("#clip-shape-1"); } } Though having an inline SVG gives me more control over the SVG properties including how it handles aspect ratio changes, my understanding is I can't animate this transition because the CSS can't actually animate any values since all it sees are IDs.

I can make a responsive, animated clip path shape if I use a polygon with percentage values, but I can't then have a curved shape as one of my clip-paths. Since curves can't exist in polygons.

I'm stumped on a solution to this problem. Is there a wasy to use relative, percentage based values in the 'path' syntax for clip-path? My core goal is to transition a rectangular shape to a curved shape with a smooth animation.

Update: In the end, I made use of GSAP's MorphSVG plugin and masking to do what I wanted.


Источник: https://stackoverflow.com/questions/744 ... -same-time