Jump to content

Search the Community

Showing results for 'not extensible'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Personal Website



Company Website



Found 17 results

  1. 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!
  2. Just added a codepen which illustrates this! In it, the toggle will simultaneously try to apply a `min-height: 100vh` w/ transition to each panel while also scrolling to the top of Panel 3 I'd be happy to try doing this all in GSAP and agree with your recommendations for why! I think it'd make this cleaner and more scalable/extensible in the future. Can you think of a way to properly do this with GSAP only (now having seen the codepen)? The "keep the top of Panel3 pinned" while the 100vh gets applied is where I'm stuck. Thanks @jack! UPDATE: I forgot to mention the other wrinkle which is that there are other properties I am changing that cause the height to adjust, such as font-size. I've updated the codepen to include this. I believe any CSS property can be applied with GSAP though so if we find a solution for the height, it can be applied to the others as well.
  3. harp

    React and GSAP error

    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;
  4. harp

    react and ref

    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> ); }
  5. 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?
  6. 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 })
  7. I'm not a React guy either, but that error sounds like you're trying to animate something that's not an object. GSAP adds a _gsap property to any target(s) in order to cache some values and improve performance. Whatever you're tweening is basically saying "Dude, you can't do that...I'm not an object you can add a property to". JavaScript objects, from my understanding, are virtually all extensible except for primitive values like a boolean or null or undefined, etc. Maybe try to console.log() the objects you're attempting to tween right before each tween so you can verify they're valid objects.
  8. 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.
  9. 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?
  10. 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?
  11. 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;
  12. That's what I was thinking. If I specify the to() being 0,0 essentially, it shouldn't affect the end position, and should clear this up, yes? I appreciate it. I'm trying to learn more about conditional from and to objects, so I can build a helper function that assembles any given animation based on some values, making my little mini-engine very extensible and robust. Re: your solution -- That's what I was thinking after some research. I appreciate the help!
  13. 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
  14. 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?
  15. 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
  16. Hello, I am very new to GSAP, and relatively new to front-end web development in general. I am always trying to optimize my workflows and organize my code such that it is readable, extensible, DRY and all the other fun acronyms associated with best practice. I recently worked on a vanity project where I coordinated multiple animations with a single event (a click), and I came across two problems that might possibly cost me a rewrite: 1) GSAP animates using element-level styling, overriding my CSS 2) Coordinating multiple animations in a single event is non-trivial Has anyone posted a best-practice of using GSAP responsibly? I'm looking for something similar to how Hugo described the 7-1 pattern for SCSS (https://github.com/HugoGiraudel/sass-boilerplate). I know that with trial and error, I can figure this out, but with all the experience in the forum, what do others do? For a solution to (1) that I am considering: Try to always use ClearProps at the end of an animation, and replace the destination of the animation with a CSS class. Is this a pattern that makes sense, assuming the animation is a transition? For (2): I am a bit stuck. I have two components that I have built to be plug and play for re-usability. However, I want these animation components to now coordinate with each other. Are there general patterns to follow on how to achieve this?
  17. When the ball reaches an intersection of another line, I would like that ball to split/duplicate itself and begin traversing that second path while the first ball continues on its own course. I am trying to determine a method programmatically to make this happen, so that the solution is extensible to any number of additional lines. So far, I have come up short. Is it possible to use TweenMax to detect when a set of coordinates is reached on a path? (e.g. where the second path begins at M90.7, 86.7) Or is this going to rely solely on timing, in which case easing is pretty much thrown out the window because everything must be linear? Thanks in advance for any assistance rendered.