enda

Hello Cassie! Thanks for your help!? But there are some things that I wanted to do What if I can't put background in the pin, and I just need to use real background what my root component has? (So, I can't change any background style for only the cards page, I have to use the root's one) Also, As the header is shared for other page as well, I can't put my header inside the pinned section.. The codepen one moves scroll to the end and start position both properly, but for some reason, my react demo doesn't move scroll from the end to start?

my sample Hi,there! I'm currently working on my personal project with React. and I wanted to make horizontal scroll cards. I firstly referenced your's the 'Infinite Scrolling Cards' example below. I've just modified it a little bit so that I can apply it to React.(to see how it works) What I want is that my header doesn't move, and also my background doesn't move either, while the cards animation are working. But When I scroll it, they are moved to upper side.(I put on my sample to the top!! ) I tried making an another box which wraps the pin for ScrollTrigger , so that it only move inside of the box and other stuff(my header and background) doesn't move. (I can't use `position:fixed` for my header, as I did other works for other components, my header is connected to other components as well) Is there any way the horizontal scroll animation only works inside of any box, not in the 100% viewport size box(?) Also for some reason, the scroll position is not reversed when I scroll it to the end,(but when I scroll it to the start position, it's reversed to the end position) I'm still learning about coding, If someone can helps me I would really appriciate it?

I got it now. Thank you so much for the explanation! It was helpful!

Hello! @OSUblake Thanks for your help! That is awesome! I completely missed the fact that input causes React to re-render. It might be more about React, but just one thing that I want to understand clearly, the reason that other arrays(cateHeadRef.current, cateGoryRef.current) exist when the re-render happns, is that I created the functions to push elements to cateHeadRef.current / cateGoryRef.current , outside of useEffect ?

Hello, I'm kind of new to coding world and making my portfolio. It's nice that I can use GSAP animation for my project. But I've been stuck with making Accordian menu. I declared some useRefs to controll the Dom elements with Gsap animation, as I read GSAP tutorials with React. and I made some timelines inside of useEffect, I made some functions to handle event and useRefs. It works when I don't type on input component that I created next to the accordion ('category') It's expanded to level 1 menus of category, and when I click the single menu(level 1), then the level2 menu is expanded. and If I click another level1 menus of category, the level2 menu that was just opened , is closed automatically, and the level2 menu for the level1 menu that I click currently is expanded. Also, if I click the main button(like header, it says 'category' in my demo) ,everything is closed automatically. But It doesn't work properly once I type something on input component. the level2 menu is not closed properly, Although I click another level1 menu. and When I click the main button, level1 menus are closed but the level2 menu that was expanded still remains. Guess reverse() animation doesn't work properly when I type or create another event. I made a simple version of demo , I commented out some other animations in Search.js (just in case if it helpful to understand about this problem,I didn't remove) main animation for this issue is in CateGory.js . Also I commented out some explanation about my code. I would really appreciate if someone can halp me. my demo