Dylan Bozarth

Looks like that was the issue. I was targeting the whole page instead of the elements on the page. Now that I'm targeting the first element of the page it is working as intended. Thank you much for your help!

I took away all of the unnecessary code (for the problem) in my page here. I have it on codesandbox here: https://codesandbox.io/s/wizardly-flower-s4s20?file=/src/mainpage.js I tried to use codepen but I kept getting syntax errors, even for a simple hello world react component I just want a function to trigger the same time as the animation does, I left only 2 components on the page for simplicity. Please let me know if I can do anything else to make myself more clear.

That does help! thanks for that seems to have been the problem. It is working how I intended but I do not really understand why. I wrote this code to test it out, and it works for when I scroll past that component the function is invoked, however I removed the className of "crewTrigger" from my div and it is still working, there is no class of crewTrigger and it is still recognizing it. I have my full page here if you'd like to take a look https://github.com/Imstupidpleasehelp/Curb-Appeal/blob/main/src/pages/crew.js <div > <Crew /> </div> ScrollTrigger.create({ trigger: '.crewTrigger', onEnter: test, //onLeave: myLeaveFunc, //onEnterBack: myEnterFunc, //onLeaveBack: myLeaveFunc });

Hello, I am using gsap scrollTrigger to control the animations on my webpage. This is working fine but I also would like to be able to call a function when this element is scrolled to. The issue is that the function is being called as soon as the page loads, regardless of scroll position. I found this related answer here So I am using the answer's code to try and solve this issue const test = () => { console.log('ssssssssssssssssss') } ScrollTrigger.create({ trigger: '#crew', onEnter: test(), //onLeave: myLeaveFunc, //onEnterBack: myEnterFunc, //onLeaveBack: myLeaveFunc }); However the issue persists. The 'sssssssss' will log as soon as the page loads. My page is 4 react components in the following layout <div id="crew"> <Crew /> </div> I'd really like to be able to call a certain function when the user scrolls to this div. Is there a way I can do that? I have a codesandbox with my full page code available here https://codesandbox.io/s/fancy-darkness-62voz?file=/src/mainpage.js Thank you in advance for your help.

I think you are right. This might be the issue, I've started experimenting and I've made some progress, thank you for your help. I'll continue tinkering with it and post my solution here when I find it

Sorry that I wasn't clear. I mean that if I try and get the component to orbit around in the circle, it will also rotate while orbiting and that was my original problem. And for the rest of the classes that aren't applied, I am going to finish them later after I get a perfect orbit animation for just one of the objects. After that I will take the solution and apply it to the rest of the elements. For the gsap.utils.selector(), I am not sure how that would work. At the moment the components are generating just fine and I'm selecting them after they are generated. I updated the codepen and removed all of the excess code and added more comments. I really appreciate your continued assistance.

Thank you for this example. I've been toying with it for a few days and I've noticed some odd behavior. I am trying to use this on a reusable component. The problem is I cannot get the component to follow this path. I try your example with just a simple div element and it works fine, but when it loses the functionality that the component would bring to it. When I use it on the component the div will rotate the way that brought me here in the first place. I managed to put all of the affected code in the same file, and I added words to the planets so others can better understand their positions without having the texture files. You can view it all here on codesandbox. I thank you all for your continued assistance. https://codesandbox.io/s/elated-black-qzu79?file=/src/systems/sol/solsystem.js

Hello and thank you for replying, sorry that I didn't include this outright. I am animating regular dom elements, it's part of a much larger project so I can't use codepen, but I have a codesandbox here that you can view it https://codesandbox.io/s/fervent-leavitt-1lhrr?file=/src/systems/generatesystem.js " Do they need to counter-rotate so they don't pivot? ", I don't think so, I just need them to stay facing up like the react/angular logos in the greensock example from the first post

I am trying to create an orbit animation but without the object rotating with the path. It's very similar to what is on the front page of gsap (codepen is linked). I only need the objects to move in a circle around the center, but the GSAP example is beyond my ability to understand because of all the extra features of it. So far I've only been able to create things like this, however this rotates the object with the path. Could anyone help me? Thank you in advance. ``` gsap.to(".orbit-container7", {rotation: -360, ease: "linear", repeat: Infinity, duration: 57})

Thank you! I had no idea you could use two useEffects.

Thanks for your response, I will study these links. I have a quick question about the useEffect hook however. I had experimented with using an if statement to get the functions to wait, however when I add anything to the dependency array it seems to run constantly instead of just once? I set up a code sandbox https://codesandbox.io/s/fervent-leavitt-1lhrr in case I'm not describing it well

I am building an app that will generate a random amount of planets. What I am trying to do is create a simple orbit animation on these planets. The problem is I am getting an error of "Gsap target not found" I am generating the planets in the following way const makePlanets = (num = 5) => { if (num > 0) { return ( <div className={`planetWrap ${posList[Math.floor(Math.random() * 8 + 1)]}`} > <MiniPlanet name={`${makeid()}`} label={``} className={`${planetTypes[Math.floor(Math.random() * 56 + 1)]} }`} > {" "} </MiniPlanet> {makePlanets(num - 1)} </div> ); } }; And the animation is a simple rotate animation for now (also if anyone knows of a way for the animation to move in a circle but not rotate I would appreciate it.) function Orbit() { gsap.to(".a1", { rotation: -360, ease: "linear", repeat: Infinity, duration: 15, }); } How can I get GSAP to target the elements properly? My full page of code is viewable here https://github.com/Imstupidpleasehelp/planetviewer/blob/main/src/systems/generatesystem.js