Search the Community

Hi there, I have searched all over the internet for hours without any luck. My guess is it has something to do with the gsap.registerPlugin(ScrollTrigger) I have attached some screenshots. I would appreciate any help. Thank you!

Error: Uncaught TypeError: Cannot add property _gsap, object is not extensible import React, { useRef, useEffect } from 'react'; import { gsap } from "gsap"; function Loading() { // Store a reference of needed dom elements const loadingHeading = useRef(); // wait until DOM has been rendered useEffect(() => { gsap.from(loadingHeading, { opacity: 0 }) }) return ( <> <section className="loading"> <div className="loading__content"> <h1 ref={loadingHeading} className="loading__heading heading--xl color--dark-grey mb-60"> La Camicia </h1> <p className="para--lg color--mid-grey"> An elegant <span className="font--italic">Shirt Configurator</span> prototype created by Harpreet Singh. </p> <p className="para--lg color--mid-grey"> Thank you for visiting. Hope you enjoy it. </p> </div> </section> </> ) } export default Loading;

Why do have to use a function in ref when using gsap and react? import React, { useRef, useEffect } from 'react'; import logo from './logo.svg'; import './App.css'; import gsap from 'gsap'; import gsapCore from 'gsap/gsap-core'; function App() { let circleYellow = useRef(null) let circleRed = useRef(null) let circleBlue = useRef(null) useEffect(()=> { gsap.from(circleYellow, {duration: 0.8, opacity: 0, x: 90, ease: 'power3.out'}) gsap.from(circleRed, {duration: 0.8, opacity: 0, x: 90, ease: 'power3.out'}) gsap.from(circleBlue, {duration: 0.8, opacity: 0, x: 90, ease: 'power3.out'}) }, []) return ( <div className="App"> <header className="App-header"> <div className="circle-container"> <div ref={el => circleYellow = el} className="circle circle--yellow"></div> <--- when I use just circleYellow I get this error: TypeError: Cannot add property _gsap, object is not extensible <div ref={el => circleRed = el} className="circle circle--red"></div> <div ref={el => circleBlue = el} className="circle circle--blue"></div> </div> </header> </div> ); }

Hello! Me again. I have this codepen here: https://codepen.io/ynsmrsk/pen/PomEvLR I want to implement it to my React / Next.js project. I wanted to have gsap animation codes be seperate from my page/component codes. So the codebase could be clean and I would have reusable animation component. But I have problems with Ref's I think. Here is the error I get when I try to animate multiple imported children element with a loop, in parent gsap animation component: https://codesandbox.io/s/gsap-react-nextjs-tuli0?file=/src/App.js I may be using the Refs wrong but not sure. What do I have to change to get it to work?

Not really a gsap or React error. You're not providing a valid target... or at least not one that can be modified. Console.log your targets to make sure they are what you think they are. const obj = { prop: 42 }; Object.freeze(obj); // Cannot add property _gsap, object is not extensible gsap.to(obj, { prop: 0 })

A few other people have asked about the error: https://greensock.com/search/?&q="not extensible"&search_and_or=or&sortby=newest Hard to say what the cause is without a minimal demo. Maybe @OSUblake, @Rodrigo, @elegantseagulls, or @Ihatetomatoes have an idea since they use React more than I.

I'm integrating this into a React project and am somewhat stuck. Getting the error: Cannot add property _gsap, object is not extensible I'm adding images into an ImagesLoaded component in this manner: (this is somewhat pseudo-code since I trimmed out a lot of other bits that weren't related) class Stage extends Component { constructor(props) { super(props) this.AuroraContainer = React.createRef() this.images = [] } componentDidMount() { this.animToFrame() } setRef = (ref) => { this.myRefs.push(ref) } animToFrame = () => { this.distance = this.getShortDistance( this.currFrame.i, this.nextFrame, this.myRefs ) if ( this.currFrame.i == this.distance + 1 || this.currFrame.i == this.distance - 1 || this.currFrame.i == this.distance ) { return } if (this.animation) { this.clearVals() } if (this.distance !== 0) { // this is where the error occurs this.animation = gsap.to(this.currFrame, { i: this.distance, modifiers: { i: gsap.utils.pipe( gsap.utils.snap(1), gsap.utils.wrap( 0, this.myRefs.length - 1 ) ), }, onStart: () => { console.log(this.distance) }, onUpdate: () => { const newFrame = this.currFrame.i gsap.set( this.myRefs[this.lastFrame], { visibility: "hidden", } ) gsap.set(this.myRefs[newFrame], { visibility: "visible", }) this.lastFrame = newFrame }, //onComplete: () => gsap.delayedCall(1, rotate360), ease: "power1.inOut", duration: 0.7, }) } } render() { this.images = [...Array(144).keys()].map((image, index) => { var file = `${image.toString().padStart(5, "0")}` return ( <img ref={this.setRef} key={`image_${index}`} src={`my-image-url.png`} className="rotator-image" /> ) }) return ( <div className="animatedImageWrapper"> <ImagesLoaded ref={this.AuroraContainer} > {this.images} </ImagesLoaded> </div> ) } Any idea as to where the error stems from?

Hi guys, a bit new to this gsap thing. I saw a few threads around here talking about how to use gsap for landing animations that also utilise localstorage. I have some code at the moment for this, but it seems as if gsap is breaking on the initial load, cancelling the animation entirely import React, {useRef, useEffect} from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import Nav from './nav' import {TweenMax} from 'gsap' ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById('root'); ); export default function App() { let app = useRef(null); let loader = useRef(null); var animPlayed = localStorage.getItem("loadingAnimPlayed"); console.log(animPlayed); if (!animPlayed) { // This is the localstorage animation to be run. console.log("Loader run"); TweenMax.to(loader, 1, { opacity: 1, onComplete: function() { localStorage.setItem("loadingAnimPlayed", true) } }) } useEffect(() => { TweenMax.to(app, 0, {css: {visibility: "visible"}}) }, []) return ( <> <div className="loader" ref={el => {loader = el}}></div> <div className="page" ref={el => {app = el}}> <div className="header"> <Nav /> </div> </div> </> ) } I get a series of errors on the first load, when the condition of the animation are met, the main one being: "TypeError: Cannot add property _gsap, object is not extensible" I'm not sure how to fix my code in order to get the animation to run. Any ideas?

I'm having some trouble moving into React (i'm actually building on my website to Gatsby). I have a menu animation that's pretty much working fine, except for one part. I'm animating the menu on open and close. I've moved the animations into dedicated functions so it's clearer (and reusable) for me. I've got 3 functions right now. The first two (`staggerReveal()` and `fadeInUp()`) works great. But the third one (staggerText) makes it crash and throw the following error : "TypeError: Cannot add property __gsap, object is not extensible". I've built this `staggerText()` function the same way i did for the other 2 functions, and they work fine. I can't find what i'm doing wrong with this function right here.. I'm assuming the error doesn't come from gsap but from the `<Link>` ? Maybe it doesn't work like this when you want to animate <Links> in React? Here is my component code : import React, { useEffect, useRef } from 'react'; import { Link } from 'gatsby'; import gsap from 'gsap'; const MainMenu = ({ state }) => { let menu = useRef(null); let revealMenuBackground = useRef(null); let revealMenu = useRef(null); let line1 = useRef(null); let line2 = useRef(null); let line3 = useRef(null); let info = useRef(null); useEffect(() => { if (state.clicked === false) { // close menu gsap.to([revealMenu, revealMenuBackground], { duration: 0.8, height: 0, ease: 'power3.inOut', stagger: 0.07, }); gsap.to(menu, { duration: 1, css: { display: 'none' }, }); } else if (state.clicked === true || (state.clicked === true && state.initial === null)) { // open menu gsap.to(menu, { duration: 0, css: { display: 'block' }, }); gsap.to([revealMenuBackground, revealMenu], { duration: 0, opacity: 1, height: '100vh', }); staggerReveal(revealMenuBackground, revealMenu); fadeInUp(info); staggerText(line1, line2, line3); } }, [state]); const staggerReveal = (node1, node2) => { gsap.from([node1, node2], { duration: 0.8, height: 0, ease: 'power3.inOut', stagger: 0.1, }); }; const fadeInUp = (node1) => { gsap.from(node1, { y: 60, duration: 1, delay: 0.2, opacity: 0, ease: 'power3.inOut', }); }; const staggerText = (node1, node2, node3) => { gsap.from([node1, node2, node3], { duration: 0.8, y: 100, delay: 0.1, ease: 'power3.inOut', stagger: 0.1, }); }; return ( <div ref={(el) => (menu = el)} id="main-menu"> <div ref={(el) => (revealMenuBackground = el)} className="menu-secondary-background-color" ></div> <div ref={(el) => (revealMenu = el)} className="menu-layer"> <div className="menu-projects-background"></div> <div className="container"> <div className="menu-links d-flex jc-space-between ai-start"> <nav> <ul> <li> <Link ref={(el) => (line1 = el)} to="/"> Homepage </Link> </li> <li> <Link ref={(el) => (line2 = el)} to="/about"> About </Link> </li> <li> <Link ref={(el) => (line3 = el)} to="/contact"> Contact </Link> </li> </ul> </nav> <div ref={(el) => (info = el)} className="info"> <h3>Infos Box</h3> </div> </div> </div> </div> </div> ); }; export default MainMenu;

I have a React App with a functional compoment where I use an little GSAP Animation. Today I tried to migrate the App from vanilla JS to TypeScript and I started with that little Component: interface Props {} const Item1Content: React.FC<Props> = ({}) => { let centerLabel = useRef(null); const timeLine = useRef<TimelineLite | null>(null); useEffect(() => { timeLine.current = new TimelineLite({ paused: true }); timeLine.current.to(centerLabel, 0.5, { opacity: 0.1 }); }, []); return ( <> <CarouselItemWrapper backgroundImage={background} backgroundImageVerticalPosition={"bottom"} > <CenterLabel ref={centerLabel}>blupp blupp</CenterLabel> </CarouselItemWrapper> </> ); }; export default Item1Content; The code works fine as .js file (there is actually a second useEffect that plays the animation. I deleted it for error search), but when I turn it to .tsx I get the following error in the browser: TypeError: can't define property "_gsap": Object is not extensible The cause is that line: timeLine.current.to(centerLabel, 0.5, { opacity: 0.1 }) So do I get that right? The TimeLineLite-Object that is referenced behind timeLine.current is not allowed to get add new properties, which the problem line is trying to do? The error was always there, but javascript just did not care and added the property anyways, but typescript is that strict that it tells me "no way, do it right!"? But how can I do it right? Sorry, that there is no Codepen-Link.... I dont know how to demonstrate that TypeScript-only errors. Thanks

When I try to use a ref like this: const tl = useRef(); tl.current.to(...) // This would be in an effect that runs once on mount I get this error: Uncaught TypeError: Cannot add property _gsap, object is not extensible at new GSCache (gsap-core.js:1502) at _harness (gsap-core.js:122) at new Tween (gsap-core.js:2983) at Object.to (gsap-core.js:3325) at goToAndAnimate (StatusIcon.tsx:62) at StatusIcon.tsx:43 at commitHookEffectList (react-dom.development.js:21997) at commitPassiveHookEffects (react-dom.development.js:22031) at HTMLUnknownElement.callCallback (react-dom.development.js:336) at Object.invokeGuardedCallbackDev (react-dom.development.js:385) The line that seems to be triggering this is: let currentTime = tl.current.time() Things just work when I put it in a state rather than a ref (although then the timeline seems to get really wonky). Any idea why this might be happening?

Hi Blake, I tried to change it to the umd version, and it's still not working. Now I'm getting this error below in the console when I run it in the browser. I tried importing the CSS and AttrPlugin, because that fixed this error for another user, but the error is still throwing. animation.js:184 Uncaught TypeError: gsap_umd_TweenMax__WEBPACK_IMPORTED_MODULE_1__.TimelineMax is not a constructor It's also not working in the test file. It throws this error: TypeError: Cannot add property _gsTweenID, object is not extensible