crntn

Thanks, Rodrigo! That makes sense!

Hey everyone, I'm trying to migrate my React project (made with CRA) to a Next.js environment. I wonder if someone already has a similar error when importing GSAP modules (Flip, DrawSVGPlugin…). When I try to animate DOM elements in my hooks, I have this error : ReferenceError : document is not defined(cf. screenshot) That's frustrating because I have no issue with React (CRA), but only with Next.js. I read the Next.js documentation and searched questions about it before writing this topic, and saw nothing about this issue. Thank you!

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.

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.

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 !