Elindo

This was solved by simply wrapping this section in a useEffect() like this. useEffect(() => { gsap.set("#A1, #A2, #B1, #B2, #P, #Solb, #Sola", { opacity: 0 }); gsap.set("#A, #B, #Stop, #Start", { opacity: 0.7 }); }, []);

Well... That was the GSAP template from here https://codesandbox.io/s/gsap-react-starter-ut42t?file=/src/App.js:0-368 import React, { useEffect, useRef } from "react"; import { gsap } from "gsap"; import "./styles.css"; export default function App() { const boxRef = useRef(); useEffect(() => { gsap.to(boxRef.current, { rotation: "+=360" }); }, []); return ( <div className="app"> <div className="box" ref={boxRef}> Hello </div> </div> ); } Now... I just got the entire logics inside the template and replaced "rotation..." wtih "let animation;" which is the first line of the entire code... I think.... I am going to use the useEffect specifically on the problems items...

Ok... I am trying to use the codesandbox template. Link here: objective-torvalds-tw3k9k - CodeSandbox Would you happen to now why I am getting a syntax error? Basically what I did was this on the template: import React, { useEffect, useRef } from "react"; import { gsap } from "gsap"; import "./styles.css"; export default function App() { const boxRef = useRef(); useEffect(() => { gsap.to(boxRef.current, { All the logics goes here }); }); return ( <div className="app"> <div className="col-md-6" ref={boxRef}> Here goes the SVG stuff </div> </div> ); }

The minimum demo would be this: <g id="Stop" onClick={btnstop} ^^^ this is now going into the SVG document inside the return() section of the component creation in next.js Tje error is btnstop is not defined

Hey! So I got all of the javascript from GS in an UseEffect like this: Const = GreenSock = () => { useEffect (() => { "here goes all of the GS javascript}), []; ^^^ With this I get no more errors from the javascript part.... But how do I fix something liKe "btnstop is not defined" calling a function from the javascript inside the SVG? "btnstop" is a function from the javascript which is included in the useEffect section above. Now I continue to the return part to include the SVG and all the text divs... return ( <div> all of the SVG stuff go in here.. line 938 <g id="Stop" onClick={btnstop}> ... more stuff </div> ) };

I think.... the problem is that I am calling part of the working logics before the entire SVG gets to be render... Being a not so great coding guy, I need learn/digest/ the UseEffect and the links you gave me... HOWEVER, with Nextjs there might be (I think) quicker solution other than adding more code... Maybe I can get away with just using "next/script" tags... if it happens to work, the logics would come after the SVG is loaded. I would let know about this next failure? __________________________________________ On the other hand the short code problem so I think is that next.js doesnt know what "gsap" is in the code.. const GreenSock = () => { The green sock logics return( the svg stuff) }; export default GreenSock; The problem comes right as soon as you call gsap in here: import React from "react"; import gsap from "gsap"; const GreenSock = () => { let animation; let isButtonADisabled = true; let isButtonBDisabled = true; gsap.set("#A1, #A2, #B1, #B2, #P, #Solb, #Sola", { opacity: 0 }); // ^^^ problem right there

Has this been a change within the last month? So the code is working good in a typical REACT app.. running good in REACT here ( http://www.tu.biz/Interactive) The same code doesn't seem to work when placing it in a Next.js application.

This codepen is working great... But I am trying to move it to a website using Next.js and it isn't working anymore..... Would anybody know how to fix this working with Next.js? It is giving me this error: Server Error TypeError: Cannot read properties of undefined (reading 'querySelectorAll') This error happened while generating the page. Any console logs will be displayed in the terminal window. Source pages\interactive.js (12:2) @ Interactive 10 | let isButtonBDisabled = true; 11 | > 12 | gsap.set("#A1, #A2, #B1, #B2, #P, #Solb, #Sola", { opacity: 0 }); | ^ 13 | gsap.set("#A, #B, #Stop, #Start", { opacity: 0.7 }); 14 | 15 | function stagea1() { The previous REACT-app (which was working just fine) code is here: https://github.com/Elindo586/techunion/blob/main/client/src/pages/Interactive.js The current not working code for Next.js is here: https://github.com/Elindo586/nextprojecta/blob/main/pages/interactive.js TypeError: Cannot read properties of undefined (reading 'querySelectorAll') at toArray (C:\Users\Edgar\Desktop\Stuff\Acode\nextprojecta\node_modules\gsap\dist\gsap.js:621:106) at new Tween (C:\Users\Edgar\Desktop\Stuff\Acode\nextprojecta\node_modules\gsap\dist\gsap.js:2911:130) at Object.set (C:\Users\Edgar\Desktop\Stuff\Acode\nextprojecta\node_modules\gsap\dist\gsap.js:3325:14) at Interactive (webpack-internal:///./pages/interactive.js:26:49) at renderWithHooks (C:\Users\Edgar\Desktop\Stuff\Acode\nextprojecta\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5471:16) at renderIndeterminateComponent (C:\Users\Edgar\Desktop\Stuff\Acode\nextprojecta\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5544:15) at renderElement (C:\Users\Edgar\Desktop\Stuff\Acode\nextprojecta\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5759:7) at renderNodeDestructive (C:\Users\Edgar\Desktop\Stuff\Acode\nextprojecta\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5898:11) at renderNode (C:\Users\Edgar\Desktop\Stuff\Acode\nextprojecta\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6030:12) at renderChildrenArray (C:\Users\Edgar\Desktop\Stuff\Acode\nextprojecta\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5986:7) error - TypeError: Cannot read properties of undefined (reading 'querySelectorAll') TypeError: Cannot read properties of undefined (reading 'querySelectorAll') at toArray (C:\Users\Edgar\Desktop\Stuff\Acode\nextprojecta\node_modules\gsap\dist\gsap.js:621:106) at new Tween (C:\Users\Edgar\Desktop\Stuff\Acode\nextprojecta\node_modules\gsap\dist\gsap.js:2911:130) at Object.set (C:\Users\Edgar\Desktop\Stuff\Acode\nextprojecta\node_modules\gsap\dist\gsap.js:3325:14) at Interactive (webpack-internal:///./pages/interactive.js:26:49) at renderWithHooks (C:\Users\Edgar\Desktop\Stuff\Acode\nextprojecta\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5471:16) at renderIndeterminateComponent (C:\Users\Edgar\Desktop\Stuff\Acode\nextprojecta\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5544:15) at renderElement (C:\Users\Edgar\Desktop\Stuff\Acode\nextprojecta\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5759:7) at renderNodeDestructive (C:\Users\Edgar\Desktop\Stuff\Acode\nextprojecta\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5898:11) at renderNode (C:\Users\Edgar\Desktop\Stuff\Acode\nextprojecta\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6030:12) at renderChildrenArray (C:\Users\Edgar\Desktop\Stuff\Acode\nextprojecta\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5986:7) error - TypeError: Cannot read properties of undefined (reading 'querySelectorAll')

Thanks.... Say... If I created a code like in Codepen with GreenSock.... Can I just install GreenSock in REACT and still use the same code without changing it?

Hey Green Sockers!!! Question... Can Green Sock work in REACT? If so, what is a good way to install Green Sock in REACT and make it work? I want to transfer some work that I did with Green Sock and host it in REACT..

Happy New Year Green Sockers! How do you make any animation responsive? This example is on a banner. So the pencode banner looks good on a laptop and computer size screen, but when I take the same animation phone size screen, then it looks too small. How do you fix / compensate for the size of the drawing when showing on phones vs. computer and still show it to a decent size? .. AND I am using Bootstrap5 .. AND yes, I have not been doing much animation lately, that is because I have slowly been sharpening my coding skills on whatever spare time I have at night...

Thank you!

Its now scrolling... need to loop it.. Is there a way to do a loop in gsap?

On page load I just want to keep scrolling the word "hello" over and over. Is it possible to make an infinite loop and not crash the computer? And how would you make it run on page load?

Yes, that works. Anyway... how you do to think like javascript?