Animated SVG path - as clip-path?

[Mattrudd]

Hi there, I have a question about how best to animate an SVG clip-path with GSAP. 

 

I've got my head around how to make SVGs clip, and how to animate an SVG path, but not got that far in my attempts to combine the two to make an animated SVG clip-path!

 

Attempting to replicate the exact effect shown below (second Codepen)  - animating an SVG path: , except with a clipping effect.

 

Learnt a lot from @nico fonseca's solution to a similar request (below, first pen) Except I don't need the pre-loader elements - just the first div displaying on load, then the SVG clip-path 'arc' sweeping up to unmask the next (bottom of stack)div.

 

I can achieve this effect with CSS 'inset' to get the curve on the clip-path as it move up the screen, but concerned this property isn't widely supported enough yet.

 

Not sure how to remove the preload aspect of the second pen above, without breaking the GSAP code tweening the SVG.

 

Hope that makes sense... Any pointers appreciated as ever!

 

 

See the Pen QWOEbMp by matt-rudd (@matt-rudd) on CodePen

 

 

 

See the Pen RwoyRgo by kohlej (@kohlej) on CodePen

[OSUblake]

Hi Matt,

 

If you want to do a clipPath, just put the <path> inside a <clipPath> element, give the clipPath an id, and then animate like you are doing.

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/clipPath

 

You can reference the clipPath in your CSS via the id.

.my-element {
  clip-path: url(#my-id);
}

 

 

[Mattrudd]

Hi @OSUblake - thanks for you response. Had a go at implementing your clipPath method but it's lacking some styling, so I'll get my head around that next. 

See the Pen dyZXXep by matt-rudd (@matt-rudd) on CodePen

 

In theory it feels like it should be a simple effect to pull off... having studied all the different approaches, if I just needed a black SVG mask animating up to reveal a div I'd be set already, but my goal of having, in effect, a div unmask a div...

 ...makes me think I've a lot more to learn than I thought I had! Better grasp of viewports, defs etc, but perhaps I'm overcomplicating it.

[OSUblake]

One problem is that your clip path is on the .page, which is much wider than your image. If you stack two images on top of each other with absolute positioning, and have the top image with the clip path, you should be good to go.

 

Also, if you're looking for some good tips on SVG, clip paths, masks, etc, you should check out some of the tutorials on @PointC's MotionTricks.

 

 

[Mattrudd]

 

1 hour ago, OSUblake said:

absolute positioning, and have the top image with the clip path, you should be good to go.

 

Doh of course thanks!

 

See the Pen dyZXXep by matt-rudd (@matt-rudd) on CodePen

 

Very nearly there...I've read up on viewports and viewboxes, and experimented with viewport sizing, viewBox values and even "XMidYMid meet" (a little knowledge is a dangerous thing!) Alas, still not sure how to eliminate the top white gap or make the clipPath fit full width and height of the screen.

 

Appreciate I'm pressing my face right up to the bounds of this forum once again though 😬 so I'll keep reading up!

 

(Thanks for the link to @PointC's site - have encountered on Youtube but will get stuck into the collection, looks awesome.)

[OSUblake]

I think you just need to change your paths so all the points are in the range from 0 to 1. Just a demo using a really simple path.

 

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

 

[mikel]

Hey @OSUblake,

 

It depends what you want.

 

objectBoundingBox
This value indicates that all coordinates inside the <clipPath> element are relative to the bounding box of the element the clipping path is applied to. It means that the origin of the coordinate system is the top left corner of the object bounding box and the width and height of the object bounding box are considered to have a length of 1 unit value.

 

So define your <clipPath> coords as you need them relative to the bounding box of the element.

 

See the Pen mdqEBjy??editors=1010 by mikeK (@mikeK) on CodePen

 

Happy bounding ...

Mikel

[mikel]

 

Just an alternative

 

See the Pen MWOeqPy?editors=1010 by mikeK (@mikeK) on CodePen

 

 

[Mattrudd]

On 2/3/2022 at 4:41 PM, mikel said:

 

Just an alternative

 

 

 

 

 

Thanks @mikel Safari doesn't seem to like this method, at least on my machine... any idea why that could be, as this seems the best solution

[GreenSock]

Safari is the new IE. Lots of rendering bugs. It looks like Safari forgets to render/repaint when you update the path data, so you need to remove the clipPath and re-add it on every tick. You could do that in an onUpdate: 

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

 

I'd probably add conditional logic around that so it only runs in Safari, just to maximize performance in other browsers. 

[Mattrudd]

30 minutes ago, GreenSock said:

Safari is the new IE. Lots of rendering bugs. It looks like Safari forgets to render/repaint when you update the path data, so you need to remove the clipPath and re-add it on every tick. You could do that in an onUpdate: 

 

 

 

I'd probably add conditional logic around that so it only runs in Safari, just to maximize performance in other browsers. 

Thanks! 'It doesn't always just work' hey Apple.