How to properly setup SVGs for Clip Path transitions?

[akalex_x]

Hi, im working on this zoom in transition using clipPath and ScrolTrigger but im having issues with properly transitioning from one path to another.

I am not sure if the issue lies in my gsap animation code, or if I prepped my svgs incorrectly.

Here is a link to a demo of it

As you can see it starts as a small flag crop that then grows full screen, and then I wanted to change it into a simple rectangle shape but when I try to do that it instead jumps to an awkward crop.

I made my SVGs in figma and made sure they are the same size and have the same about of points. I then exported the SVGs and used https://yoksel.github.io/relative-clip-path/ to change the absolute paths to relative.

Any help here will be super appreciated, thanks!

See the Pen mdvOLxX by akalex-x (@akalex-x) on CodePen

[mvaneijgen]

Hi @akalex_x,

 

I've removed a lot from your demo, there where like hundreds of lines of CSS and a whole html webpage. It is much easier to just show the current issue you're having without everything else around it. 

 

SVG mask are not that simple, check the following 

 

1. The image needs to be part of the SVG via the <image> tag https://developer.mozilla.org/en-US/docs/Web/SVG/Element/image

 

2. Or the SVG mask needs to be 1px by 1px, see following post https://davesmyth.com/clip-path-scaling

 

3. If your mask is just a 'simple' shape it is much easier to use a CSS clip-path https://bennettfeely.com/clippy/ (make sure if you want to animate a clipPath that you animate between shapes that have the same amount of points and that all your values are suffixed with a '%' sign. ⚠️ this is important!)

 

Your shape is not that complex, so I would go with the last option. It could then look something like this. I've just created the shape quickly, but you could spend a lot more time optimising it to your liking. Hope it helps and happy tweening! 

 

See the Pen RwvovWB?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen