ClipPath with ScrollTrigger (Safari issue)

[crntn]

Hey, 

 

I'm trying to animate a clipPath from SVG, with ScrollTrigger. Everything's fine on Chrome, Firefox, … But as usual, Safari is a little freak.

Here's the idea : when the user scrolls, the clipPath scales to show us the entire image in the background.

Here's an online preview

 

The problem is : on Safari the transform-origin (to have a center scaling) is not respected, and the xPercent and yPercent (to center perfectly the clipPath) are ignored. And weirdly, the code generated by GSAP before scrolling is not the same on Chrome and Safari (cf. transform matrix).

 

I look forward to a response because I'm pretty lost. Thanks ! 

 

[Cassie]

Heya, It's a little overcomplicated. Often helps to keep everything in the SVG, more cross browser friendly

https://codesandbox.io/s/mask-st-forked-gwlq09?file=/src/index.js

Here's a simpler version, hope it helps.

[crntn]

Hey Cassie !

 

Thanks for your time.

According to you, there's no alternative without using an image tag inside the SVG ?

I'd like to keep the same structure as in my demo with the img tag.

[Cassie]

There's possibly a way. I don't know because I just go this route - tried and tested.

This might help though? 

https://meyerweb.com/eric/thoughts/2017/02/24/scaling-svg-clipping-paths-for-css-use/

[Cassie]

Also - don't animate the clip path itself. You want to be animating paths inside the clip path.

[crntn]

Thanks a lot, Cassie!

 

We need to animate the path, not the clipPath. It works on Safari now!

For those who want to see the solution.