Brian Mwangi

Update: I imported from the dist directory: import {ScrollTrigger} from "gsap/dist/ScrollTrigger"; It works!!. ?

I'm having trouble importing ScrollTrigger in my React app. I'm importing it like this: import {ScrollTrigger} from "gsap/ScrollTrigger"; This is the error I'm getting and I don't know how to go about it. The error is coming from ScrollTrigger.js in the node_modules. import { Observer, _getTarget, _vertical, _horizontal, _scrollers, _proxies, _getScrollFunc, _getProxyProp, _getVelocityProp } from "./Observer.js"; ^^^^^^ SyntaxError: Cannot use import statement outside a module Here is a pic of the ScrollTrigger.js file:

Alright, thanks very much. I'll be waiting for the articles?

How would you explain the difference in environment? i.e the code working on codesandbox but not on my local environment. They all use React 18.2.0

So this is the ideal way to write tweens in React 18..

I'm using React and I'm using gsap for my animations but gsap.from() does not work correctly in my local environment. I'm using the same code both on my local environment and codesandbox. Both environments have the same dependencies(same version of react and gsap). The code works fine on codesandbox but not on my local environment. What could be the issue? Here is the code: useLayoutEffect(() => { let from = gsap.from(ref.current, { xPercent: 100, ease: 'expo', duration: 2, immediateRender: false, }); return () => { from.kill(); } }) And here is the svg that I want to move: <svg viewBox="0 0 100 100" > <rect ref={ref} x="0" y="0" width="100%" height="100%" fill="green" /> </svg> In the local environment the <rect /> just moves slightly(and it's different every time) instead of all the way