bobmalice

GSAP is working beautifully in dev mode. When I try to build my next.js app however, I get a most cryptic error. Here's the relevant part: Invalid property rotateZ set to -10 Missing plugin? gsap.registerPlugin() Invalid property transformOrigin set to bottom left Missing plugin? gsap.registerPlugin() info - Generating static pages (23/23) > Build error occurred Error: Export encountered errors on following paths: /scripts/scripts And here's the relevant code: import { gsap } from 'gsap' import { ScrollTrigger } from 'gsap/dist/ScrollTrigger' gsap.registerPlugin(ScrollTrigger) const shake = element => { gsap.to(element, { rotateZ: -10, duration: 0.125, transformOrigin: 'bottom left' }) gsap.to(element, { rotateZ: 5, delay: 0.5, scale: 1 }) } export default shake I'm pretty sure I don't need to import { ScrollTrigger} here, but when I don't I get the same exact error, so it was my attempt at fixing it. For reference, a few different components that are using ScrollTrigger call shake() onMouseOver.. I imported and registeredPlugin everywhere else where needed. (Side question is that necessary or should I only register in once?) What's my next step? Thanks

Genius! Thanks so much that did it! ?

Hello, I've used similar code in react before, but for some reason in Next.js, even simply importing ScrollTrigger causes this error. Here's some code: import React, { useEffect, useRef } from 'react' import { gsap } from 'gsap' import { ScrollTrigger } from 'gsap/ScrollTrigger' import styles from '../../styles/Store.module.css' const Store = () => { gsap.registerPlugin(ScrollTrigger) const store = useRef(null) const trig = useRef(null) useEffect(() => { let zoom = gsap.timelite({ scrollTrigger: { trigger: trig.current, start: 'top top', end: 'bottom top', scrub: true, pin: true } }) zoom.to(store.current, { scale: 3 }) }, []) return ( <div id='' className='w-full bg'> <div id='longscroll' className='toReveal' ref={trig}></div> <div id={styles.intro} className='toMove'> <h1>Blah blah</h1> <h2> blah blah </h2> </div> <div className='container' ref={store}> <div id={styles.storebg} className='toMove'></div> <h1 id={styles.storename} className='toMove fancy-font'> blah blah </h1> <h2 id={styles.storesign} className='toMove fancy-font'> blaaaaaaaaaaaaaaaah </h2> </div> </div> ) } export default Store I've tried not registering ScrollTrigger, moving the registering around, but nothing seems to do the trick. Here's most of the call stack: Server Error SyntaxError: Unexpected token 'export' This error happened while generating the page. Any console logs will be displayed in the terminal window. Call Stack <unknown> file:/home/HEHEHE/node_modules/gsap/ScrollTrigger.js (825) Object.compileFunction node:vm (352:18) wrapSafe node:internal/modules/cjs/loader (1025:15) Module._compile node:internal/modules/cjs/loader (1059:27) Object.Module._extensions..js node:internal/modules/cjs/loader (1147:10) Module.load node:internal/modules/cjs/loader (975:32) Function.Module._load node:internal/modules/cjs/loader (822:12) Module.require node:internal/modules/cjs/loader (999:19) require node:internal/modules/cjs/helpers (102:18) Object.gsap/ScrollTrigger file:/home/HEHEHE/.next/server/pages/index.js (175:18)