Toso

hi @alexr8 maybe these 2 demos help 1 with draggable and 1 without https://codepen.io/GreenSock/pen/BaQXjWw?editors=0010 https://codepen.io/GreenSock/pen/RwKwLWK

thank you , it worked like a charm 🙏 gonna stick it into Nextjs now 🫡

Hi everyone, I hope you're all doing great! I'm creating a magnet effect for the cursor, and I've run into a small issue. Everything works perfectly until I add ScrollSmoother to the mix. The issue arises when I try to calculate the bounding rectangles of the buttons (`btns`). It seems that the calculations go wrong for buttons that are not initially within the viewport. I suspect that this discrepancy might be due to the way the `getBoundingClientRect` function captures the positions of the buttons before the scrolling comes to a complete stop. you can comment the smoother part and everything will work fine Thanks in advance for your help.

here is a quick one you can add any effect you want or play with the other options, just 5-10 min to take a look at the seamlessloop documentation and you're ready https://codepen.io/ahmed-attia/pen/RwOpyVX?editors=0011 you can check Carl's courses here and GSAP3 Express is free by the way https://www.creativecodingclub.com/bundles/creative-coding-club https://www.creativecodingclub.com/courses/FreeGSAP3Express

hi @clayteller i would recommend going with the seamlessloop to save your time https://gsap.com/docs/v3/HelperFunctions/helpers/seamlessLoop

hi @curajuice it would be great if you could add your question to the main forum https://gsap.com/community/forums/forum/11-gsap so you can have your answer much faster because right now you added it in the jobs and freelance section also, it would be helpful if you added a minimal demo.🙏

with threejs you are making it 10x harder for yourself since you will also need a physics engine with threejs like Rapier or cannon, creating it with a framework like react for example. you will need to study also extra stuff like react three fiber, react three drei, react three rapier / cannon i think Rodrigo gave you the best option here to use a physics engine directly something like this one i created with Matter it was much simpler to do it compared to trying to add physics with threejs https://balls-orcin.vercel.app/ you can grab them and test the zero gravity btn

hi @dinchu you can separate the clear and the draw of the canvas inside a ticker func since now you are handling them inside the tween, here is one example with canvas to see the clearing, drawing, and animation of the stars https://codepen.io/ahmed-attia/pen/yLryMwK and another one with pixi https://stackblitz.com/edit/vitejs-vite-7ycqfl?file=main.js&terminal=dev

hi @amjad_barchini could you please add a minimal demo so we can see what you built and what the issue you have?🙏

hi @aashu007 you can check the terms of use maybe you will find your answer and ofc you can leave a comment if you still need more info https://gsap.com/community/standard-license/ still, having a GSAP business membership and getting access to all the plugins is always a win 🫡

thank you glad you like that switch button 🙏 🫡 I found an old demo that may help, i cleaned all unnecessary code and created a repo https://github.com/Toosoo/laptop ps: the demo was created when I started Bruon's course so i left the i frame of his website as we did in the lesson and added the scrollTrigger animation to it i would highly recommend checking the course https://threejs-journey.com/ hope it helps

hi @Ev1lMush unfortunately, the demo is not loading but i would recommend using only scrollTrigger to do all your scroll-related animations for you, scrollControls was killing me also, and I didn't find a clear fix for making them both work together in most cases drei is great but still not enough to use it alone for everything something like where i was trying to make drei scroll and scrolltrigger work together but in the end, i only used scrolltrigger maybe its different in your case idk what you are building https://garden-self.vercel.app/ (Hit a refresh if it doesn't work it was a demo for testing so it's a mess and dusty) I am not R3F expert so keep looking for a solution that suits you also since you are using react you can check the new useGSAP() its a replacement for useEffect and useLayouteffect https://gsap.com/resources/React#usegsap-hook- and here are some templates you can fork one , for me its easier to work with React on stackblitz https://stackblitz.com/@GreenSockLearning/collections

hi @Umberto you can check this demo to see how container animation works https://codepen.io/GreenSock/pen/WNjaxKp hope it helps

@Rodrigo thank you, 🫡 i didn't see that he wanted to pin the red and green boxes I just saw the code and assumed he was having a problem with the green box

hi @newguy123 it would be great if you could add a minimal demo 🙏

hi @AmanVerma in your demo i would recommend using a loop and animating on Ypercent instead of y it will be easier also take a good look at this post by @mvaneijgen to get a good understanding of how stacking works another great demos https://codepen.io/ahmed-attia/pen/jOROjzb?editors=1010 also you can load gsap from here not in the HTML or just fork this one https://codepen.io/GreenSock/pen/aYYOdN?editors=1010

hi @Tricto since you are using react it is recommended to use the useGSAP() Hook also, you are not passing the tl to the child component you can take a quick look here https://gsap.com/resources/react-advanced#passing-down-a-timeline-prop it would be awesome if you could clean any unnecessary code and test with minimal animation so it is easier for anyone to help hope this helps a little 🙏

got it, great catch I tried to ask Copliot about a use case and he was like 🤔 🤔 🤔(so you trying to lag your project) 😂 , I will add it to my to-never-do list to check it someday, good luck with it 🙏

hi @Sirena where did you find this video i have never seen it before even when searching in docs 🫣 but it's from GSAP 1.12 I don't think it's recommended to use the same technique now (maybe I am wrong ) but now GSAP has powerful tools like easing, staggering, and timelines so the most important question here is, what are you trying to build? 🙏 edit : I think i was wrong i found some recent posts about ppl asking about it so this means it's still a thing I guess 🫡

also since you are trying to animate a model I would add it to a group and animate the group, so you don't worry about the names or axes or children order every time you export from blender if you are using R3F you can easily just convert the glb file to a react component thanks to pmndrs and animate only the part you want instead of just importing the whole object and animating it

something like? i created a setInterval and it fires every 2s you can play with the duration and ease to get the effect you want https://codepen.io/ahmed-attia/pen/KKELGWz?editors=0010

h1 @DW92 maybe something like 🤔 this one without any functions https://codepen.io/ahmed-attia/pen/PoLvaKM?editors=1010 in your demo, you didn't load gsap so this code won't work in a million years 😂 here is how you load gsap or just fork this demo it contains all the plugins https://codepen.io/GreenSock/pen/OPqpRJ

thank you for removing it 🙏 , don't worry about your issue I am sure someone will jump to help at any moment but to be honest the demo is not so minimal and hard to debug

if thats the real smoother file please remove it , you made it public and anyone can download it

hi @lizettevanboom I moved the styling for the div-2 inside the CSS to collect it all in one place also i used 1 scrolltrigger to pin div-1 with pinSpacing false and another trigger for the div-2 to animate it , ofc @mvaneijgen solution is more professional and organized 🫡 but I wanted to give another quick lazy solution https://codepen.io/ahmed-attia/pen/oNVOrxN?editors=0110