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 🙏