Animate SVG clip path that is referenced in CSS clip-path proporty with url(#xxx)?

[Snail]

Dear supports,

 

I would like to animate a svg clipping path that is applied to a html element by css clip-path:url(#xxx).

 

Basically i have this code, made of a HTML element with  the first path #Curve1 applied. This works statically.

The reference by ID is required, as css clip-path can't do bezier curves in the direct shape declaration.

<div style="clip-path: url(#Curve1);">
        <img src="img.jpg">
</div>

<svg width="0" height="0">
  <defs>
    <clipPath id="Curve1" clipPathUnits="objectBoundingBox">
      <path d="M 0,1
              L 0,0
              L 1,0
              L 1,1
              C .75 .8, .25 .8, 0 1
              Z" />
    </clipPath>
  </defs>
</svg>

<svg width="0" height="0">
  <defs>
    <clipPath id="Curve2" clipPathUnits="objectBoundingBox">
      <path d="M 0,1
              L 0,0
              L 1,0
              L 1,1
              C .75 .95, .25 .95, 0 1
              Z" />
    </clipPath>
  </defs>
</svg>

 

The second svg element #Curve2 would be the target shape of the animation, tweening between them over a timeline.

Basically, just two numbers are different, 0.95 instead of 0.8:    C .75 .95, .25 .95, 0 1

 

So question is how can i animate between these two shapes? Is it possible with this syntax or is any other needed instead (that would have to work with beziers though)? I have all the tools and plugins available that come with gsap premium.

 

(My final goal would be to do this animation on scrolldown, and with an inertia rubberband effect on it, but i'll cross that bridge when i get there.)

 

Happy for any directions ... Unfortunately i couldn't find some forum post with this specific application of clip-path.

 

[GSAP Helper]

Without a minimal demo, it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependencies as possible. Start minimal and then incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. ✅

[mvaneijgen]

Indeed without a minimal demo seeing the code in action it is hard to help you debug. 

 

That said have you seen my post on how to animate all types of different clip masks? Hope it helps and happy tweening! 

 

See the Pen jOdJGQq by mvaneijgen (@mvaneijgen) on CodePen

 

[Snail]

57 minutes ago, mvaneijgen said:

Indeed without a minimal demo seeing the code in action it is hard to help you debug. 

 

That said have you seen my post on how to animate all types of different clip masks? Hope it helps and happy tweening!

 

 

 

Oh yes, that's exactly what i was looking for ... 
wouldn't have guessed i could morphSVG from a class name to another class name.

 

Best library ever!

 

(I promise to learn to use codepen ... it's just firefox obfuscates referrers and these embeds cause all kind of warnings, so i'm somewhat reluctant, but that's my problem to solve.)