Different behaviour on chrome and firefox when animating svg

[popland]

In a page i am animating an SVG logo that work as a mask to reveal the content of the page

the animation is pretty basic: i center the svg logo on the page, make it bigger and then even more bigger until the page is totally in view:

 

gsap.set('#yes', {

      transformOrigin: 'center',

      scale: 1,

      x: window.innerWidth / 2,

      y: window.innerHeight / 2,

    });

    gsap.to('#yes', {

      transformOrigin: 'center',

      scale: 15,

      duration: 1,

      ease: 'power4.easeInOut',

    });

    gsap.to('#yes', {

      scale: 350,

      transformOrigin: 'right',

      duration: 0.7,

      delay: 1,

    });

 

but it looks like firefox and chrome interpret the transform orgin differently (and safari too)

you can have a look here with both browser: https://paca.popland.it

of course the chrome version is the correct one

 

any way (besides making the animation browser dependant which i found hard to mantain) to make it work the same way? or at least in a way that firefox works a little better

 

thank you

[Cassie]

Hey there!

 

This is definitely not an issue with the GSAP code you've posted.

I'd need to see the SVG code itself and the styles.

Could you possibly post a minimal demo for us?

[popland]

hello @Cassie

i know this is not a GSAP issue, but since i'm animating the svg with gsap, maybe someone already faced the issue

this is codepen demo i made:

See the Pen GRyvBEa by lenna-the-vuer (@lenna-the-vuer) on CodePen

in chrome it works as expected, in firefox not really, and im really scared to watch it in safari

 

in firefox transform-origin is supported but "Keywords and percentages refer to the canvas instead of the object itself", so i think i cant achieve a total compatibility in animation

[Cassie]

No you don't need to worry about transformOrigin in this case. GSAP doesn't actually use the browser implementation. There's maths going on behind the scene for you.

The issue you're encountering is because you're scaling the clipPath element - you should be scaling the path inside. I've made it into a compound path for you so you can do this.

Also using clip path in CSS is a little complicated. You have to do some scaling to make sure it's in the right 0-1 unit range for CSS.

https://css-tricks.com/scaling-svg-clipping-paths-css-use/

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

You could also clip an image inside the SVG itself instead, better browser support.

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