crntn
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by crntn
-
-
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.
-
1
-
-
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.The problem is : on Safari the
transform-origin
(to have a center scaling) is not respected, and thexPercent
andyPercent
(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 !
Importing GSAP modules with Next.js : "document is not defined"
in GSAP
Posted
Thanks, Rodrigo! That makes sense!