Ehrgein

Thank you so much for the explanation Rodrigo! gsap.context() definitely seems to make things easier! I didn't know about using two different useLayoutEffects, that's awesome to know! Yes, I wasn't happy AT ALL with the arrow approach, my main problem was that I was having a hard time rendering the text on the click of the arrow, and since the text was rendering conditionally with the arrow, the animation was never triggering since the falsey condition for the ternary was a null div (Hence not being able to animate since there was no ref) Thank you for the playgrounds! EDIT: I managed to make it work with a codepen like this: https://stackblitz.com/edit/gsap-react-basic-f48716-kwum8b?file=src%2FApp.js In the codepen it doesnt show, but here's the result O I'll definitely be using Context from now on. If you were to recommend me an aproach for doing this with multiple columns, would you recommend doing a timeline for each specific project? I was thinking of say : User clicks on B project while A is open, then the handler for the B one should toggle the timeline for A and the timeline for B? or is there a better approach for this? Thank you so much by the way!

I made a gif to show how the animation works, if it helps at all: Tha

Hey there! First of all, merry christmas. I'm a little new to GSAP and I've been trying to make an accordion for my portfolio. So far my code "works" but I KNOW it's EXTREMELY convoluted/messy, so I was wondering if anyone could help me 'refactor' it in some way. Or rather, show me how someone would do it properly, than kyou very much! I'm coding it on React along with GSAP. This is the layout effect that controls the animation timeline. const AnimationRef = useRef(); const ProjectRef = useRef(); const ProjectRefTwo = useRef(); const arrowAnimationRef = useRef(); const [menu, setMenu] = useState(false); useLayoutEffect(() => { let tl = gsap.timeline(); tl.from(ProjectRef.current, { height: 0, ease: Power4.easeInOut, }); const arrowbtn = document.getElementById("arrowbtn"); if (menu) { arrowbtn.addEventListener("click", () => { tl.reversed() ? tl.play() : tl.reverse(); }); } }, [menu]); const onRotate = () => { setisRotated((rotated) => !rotated); }; And here's the JSX: (BsChevronDown is a react-icons icon and IconContext Provider is just to change the colour of the arrow, the isRotated state is controlling a small animation that turns an arrow up or down depending on if the project is open or not. <div className=""> <span className="">KEEP MOVING</span> <IconContext.Provider value={{ size: "50px", color: "black" }}> <div> {menu ? ( <BsChevronDown onClick={onRotate} ref={arrowAnimationRef} id="arrowbtn" className={ isRotated ? "project-arrow-down-new" : "project-arrow-down open" } /> ) : ( <BsChevronDown onClick={() => setMenu(!menu)} className={ menu ? "project-arrow-down open ml-1 pepito11 " : "project-arrow-down ml-1 duration-300 pepito40" } /> )} </div> </IconContext.Provider> </div> <div id="projects"> {menu ? ( <div ref={ProjectRef} className="overflow-hidden"> <div>PROJECT TEXT</div> <div>PROJECT TEXT</div> <div>PROJECT TEXT</div> <div>PROJECT TEXT</div> <div>PROJECT TEXT</div> <div>PROJECT TEXT</div> <div>PROJECT TEXT</div> </div> ) : null} </div> Any help I'd greatly appreciate it. If you need any other code or anything please do let me know, I'm not used to sharing my code so I don't know what could be more useful specially when it comes to GSAP. Also, you ll see a "pepito40" class, that was just my way of identifying which arrow was getting render, it doesnt have any css or anything.