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?

What could be wrong with this syntax? btnstart.onclick = () => { isButtonBDisabled = false; isButtonADisabled = false; if (animation == stagea1, stagea2, stageb1, stageb2){ animation.isActive(); } else animation = stagestart(); } What I want to do is: Enable buttons A and B <-- this is working Check if A or B are playing any of their tweens, which are located in the functions or stagea1, stagea2, stageb1, and stageb2... if any of these stages are playing, then I want the Start button to do nothing and just let them play. If none of the stages are playing, then I want the Start button to play stagestart. The .isActive I took it from gsap cheat sheet under control methods, but Codepen is telling me it can't read it.

So my friend @nicofonseca created a variable called isbuttonADisabled and gave a value of false.. then called out the variable on another set of buttons to give it a true or false value.. how does JavaScript or gsap recognizes that I am looking to disable the button by simply pulling a word out of the air and giving a true or false value? what if the word was enable and you have the same true or false values? How does JavaScript recognizes between a bunch of words and know what I want?

@nico fonseca Thanks that worked! How do you set the A and B buttons as normally disabled? I see you created 2 variables, one for each button, and then added the variable with a value to the push button sections. Why exactly is this line needed? if(isButtonADisabled) return; I added one variable for both buttons, and didn't do a line as the one you did above.... and of course it didn't work.

Thanks... I'll try that later on.. All my drawings are svg. I am using the reference variable to link them to the svg object drawing. The latest code I have is above.. I need some time to digest the code you are showing.. Thank you much..

btna and btnb are the links for buttons A and B... for whatever reason the buttons are not getting disabled. I added: let disabled = false; gsap.set ("#A, #B", {disabled:true}); btnstop.onclick = () => { if(animation)animation.kill(); animation = stagestop(); btna.disabled = true; btnb.disabled = true; } btnstart.onclick = () => { animation = stagestart(); btna.disabled = false; btnb.disabled = false; } https://codepen.io/Elindo586/pen/vYZLjJz

let disabled = false; btna.setAttribute("disabled", ""); btnb.setAttribute("disabled", ""); btnstop.onclick = () => { if(animation)animation.kill(); animation = stagestop(); btna.disabled = true; btnb.disabled = true; } btnstart.onclick = () => { animation = stagestart(); btna.disabled = false; btnb.disabled = false; } So... what I am doing wrong? I am just creating a variable named disabled and giving it a false value.. then trying to set A and B as normally disabled.. Then expecting button A and B to work and not work when I say disabled is true or false when pushing the start or stop buttons. https://codepen.io/Elindo586/pen/vYZLjJz

Well... I need to change my code...

I think I can digest that.. How do you set the button to be normally disabled? Can you do something like.. ?? gsap.set ("#A, #B", {disabled:true}); Just to make some notes when I get back. you created a let disabled = false; then a click eventlistener for each button and gave it a name. Then a function to call out the event listener to do an If / else task. Maybe later I can try something like.. let disabled = false; btnstop.onclick = () => { if(animation)animation.kill(); animation = stagestop(); btna.disabled = true; btnb.disabled = true; } btnstart.onclick = () => { animation = stagestart(); btna.disabled = false; btnb.disabled = false; }

Now, I didn't minimize the demo any smaller because everything is linked together However, the items to add some functionality are these last buttons of the code: btnstart.onclick = () => { animation = stagestart(); } btnstop.onclick = () => { if(animation)animation.kill(); animation = stagestop(); } For the STOP button I want it to kill the animation, and go to the stagestop animation (<-- this part is done) And.. once you click the Stop button I want to disable button A and button B... meaning if you push A or B they won't work. How do you go about to do these things about disabling other buttons? For the START button If nothing has been previously touched ... at the very begining of the animation it would play animation stagestart (that is in the code), PLUS enable buttons A and B so they can now be functional. If the STOP button has been pressed, then It would kill animation for button STOP, play animation stagestrat and enable buttons A and B so they can now be functional again. If A or B are playing, then nothing would happen. Buttons A and B would be normally disabled. To play the proper line I suppose I can do something like: if (functionx) function.play (); if (functionx) funtion.kill (); animation = startstage ^^ that is likely wrong.. But how do you go about to enable and disable buttons?

@nico fonseca thanks!! it worked!!