Scrolltrigger svg mask

[Sukru]

Hello, I want to mask svg with scrolltrigger, but there is a problem in the code, I think it does not work. I want to bring the img from top to bottom, or from right to left, with an svg mask. Can you help me?

 

See the Pen poGEmZP by sukruemanet (@sukruemanet) on CodePen.

[mvaneijgen]

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

 

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

 

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. 

 

Hope it helps and happy tweening! 

[Sukru]

@mvaneijgen hello again, i tried a few times but it works, can Codepen help via the link?

[mvaneijgen]

I don't know what you're saying. I would just use a clip-path if your shape isn't to complex. You can just make your shapes with  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)

 

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