[Scroll animation with fixed columns]

something like this? 

I created a simple timeline where the img goes up first then the right-text comes from the bottom 

 

See the Pen XWwKXQq?editors=1010 by ahmed-attia (@ahmed-attia) on CodePen

[Scope issue with useGSAP]

https://stackblitz.com/@gsap-dev/collections

 

you can use this collection to create the demo faster

 

[Coverflow style z-indexing using horizontalLoop()]

hi @alexr8 maybe these 2 demos help 

1 with draggable and 1 without 

 

 

 

See the Pen BaQXjWw?editors=0010 by GreenSock (@GreenSock) on CodePen

 

 

See the Pen RwKwLWK by GreenSock (@GreenSock) on CodePen

[ScrollSmoother and getBoundingClientRect]

thank you , it worked like a charm 🙏

gonna stick it into Nextjs now 🫡

[ScrollSmoother and getBoundingClientRect]

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.

 

 

 

See the Pen gOyxYWa?editors=0011 by ahmed-attia (@ahmed-attia) on CodePen

[Prev/Next Controls for Simple Seamless Loop]

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 

See the Pen RwOpyVX?editors=0011 by ahmed-attia (@ahmed-attia) on CodePen

 

 

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

[Prev/Next Controls for Simple Seamless Loop]

hi @clayteller i would recommend going with the seamlessloop to save your time

https://gsap.com/docs/v3/HelperFunctions/helpers/seamlessLoop

[Scrolltrigger pinned element gets height:0 and max-height:0]

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.🙏

 

[circles don't overlapping and animate]

2 hours ago, amjad_barchini said:

thank you so much but after a lot of searching I think only the three.js can build like this bubbles or vanilla javascript but it is too hard

 

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 

[jpg animation into a canvas]

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

 

See the Pen yLryMwK by ahmed-attia (@ahmed-attia) on CodePen

 

and another one with pixi 

https://stackblitz.com/edit/vitejs-vite-7ycqfl?file=main.js&terminal=dev

[circles don't overlapping and animate]

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

[can I use gsap library to IT services websites?]

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 🫡

[ScrollTrigger pin and drei's ScrollControls don't play well together]

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 

[ScrollTrigger pin and drei's ScrollControls don't play well together]

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

 

 

 

[Animate text in the horizontal scroll]

hi @Umberto you can check this demo to see how container animation works 

 

 

 

See the Pen WNjaxKp by GreenSock (@GreenSock) on CodePen

 

 

hope it helps 

[Box not sticking on pin]

@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 

[Question - 2 overlapping Scrolltriggers with scrub, each with it's own pin - possible?]

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

[Box not sticking on pin]

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 

 

 

 

See the Pen jOROjzb?editors=1010 by ahmed-attia (@ahmed-attia) on CodePen

 

 

 

also you can load gsap from here not in the HTML 

 

 

or just fork this one

 

See the Pen aYYOdN?editors=1010 by GreenSock (@GreenSock) on CodePen

 

[Scroll trigger pin React components start positions]

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 🙏

[Demo lagSmoothing]

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 🙏

[Demo lagSmoothing]

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  🫡

 

[threeJS object rotation trough rotateY instead of rotation]

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 

[GSAP seamplessLoop helper function with flexible width elements and active class on active element.]

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 

 

See the Pen KKELGWz?editors=0010 by ahmed-attia (@ahmed-attia) on CodePen

[GSAP seamplessLoop helper function with flexible width elements and active class on active element.]

h1 @DW92  maybe something like 🤔

 

this one without any functions 

See the Pen PoLvaKM?editors=1010 by ahmed-attia (@ahmed-attia) on CodePen

 

 

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 

 

See the Pen OPqpRJ by GreenSock (@GreenSock) on CodePen

[When using gsap ScrollSmooter, the site content does not move when scrolling the page]

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