Animation Focus on ViewPort

[LIR]

Hello, I hope you are well. First of all may I note that I am new using GSAP and that I am using it in React ("gsap" and "gsap/react" libraries). I want to reuse an animation, that basically is an horizontal scroll. Even though the animation works perfectly, I need the viewport to be centered on the whole parent section (so the title "Algunos proyectos_" and filter stays on sight). I tried setting the trigger by the section ID that is 'projects', by using document.querySelectorAll("sections.projects"), etc but always without the expected results.

 

Can you guide me through or give me some assistance please?

Thanks in advance!

 

P.S.: This is how is seen while the animation takes place:

P.S.2: This is how it should be seen while the animation takes place:

See the Pen jEOaNrg by LIR-UCA (@LIR-UCA) on CodePen.

[mvaneijgen]

Hi @LIR welcome to the forum! 

 

Do you have a working demo for us? Your Codepen demo stays blank. Codepen isn't always the best for demo's with frameworks, but we've got StackBlitz templates for all the mayor once. Although personally I like to create all my animation first on Codepen without any framework, that way I know all my logic is sound and I just have to port it over.

 

Also highly recommend setting markers: true in your ScrollTrigger so that you can visually see what is happening and easily debug common issues. Hope it

 

 

Check out our Stackblitz starter templates, here are the once for React (please read this article!) or Next

 

helps and happy tweening! 

 

[Rodrigo]

Hi,

 

You might need two different ScrollTrigger instances, one for pinning the title and filters section and another to pin the horizontal section.

 

Another option is to wrap both in parent element and pin that element as shown in these demos:

See the Pen ZEVpqjb by GreenSock (@GreenSock) on CodePen.

See the Pen qBLRzVX by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps

Happy Tweening!

[LIR]

First of all, thanks both for your help! I really appreciate your help. I believe what Rodrigo said can be the solution but now that I realize and what is driving me insane is how to handle the references across the components. The section I need to persist in the viewport is located in the main component. The main component contains a 2nd component, that inside has the 3rd component (which handles the animation using GSAP). All this is because of code reusability...

I followed mvaneijgen recommendation in order to provide a better insight of the problem I am facing by creating the following:  https://stackblitz.com/edit/vitejs-vite-s5yaffw3 but removing lot of stuff that were in the middle. I do not want you to go through the same pain I am experiencing, so I am not expecting to have the final solution (do not know if laugh or cry). I tried pinning the section of the main component by using as reference the ID established in the HTML tag but the problem is that so far it did not worked (I tried passing the ID as a prop to the 2nd and 3rd component and also using the document.querySelectorAll with the ID to test it).

In your experience, how would you manage this?

 

Thanks in advance for your assistance and help!

[Rodrigo]

Hi,

 

Your demo is not working. Keep in mind that for importing a CSS file and use it's classes as a module you have to append module.css to the file:

https://vite.dev/guide/features#css-modules

 

Also keep in mind that in React components are rendered from the bottom up, that means the farthest child renders first, so if you're targeting a class or id of a component that is up the component tree, that selector will return undefined because that DOM element is not rendered yet.

 

This mostly sounds like a architecture/design problem rather than a GSAP related one. I understand the approach of a re-usable logic to create your GSAP animations, but you can use another file that creates that functionality instead of placing it directly on the components and perhaps call that logic whenever you need to.

 

Other alternatives are state management alternatives like React Context, Redux, Zustand, etc. in order to communicate between components to know exactly when to create the ScrollTrigger instances.

 

Hopefully this helps

Happy Tweening!

[LIR]

You are totally right, thanks for the help! I forgot about the DOM rendering order and that is why I always got it as undefined... Was to burned out to realize. I will try those approaches. Thanks again for everything!

P.S.: I just finished making the changes and now it works perfectly! Thank you very much!