Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
enda

How can I close sub-level items properly, in my Accordion (React)?

Go to solution Solved by OSUblake,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

Welcome to the forums @enda

 

Did you see our React tutorials?

 

6 hours ago, enda said:

But It doesn't work properly once I type something on input component.

 

Changing the input causes React to re-render, which calls your CateGory component again, which is clearing out the DeepAnim array you created in your effect. So just comment this out.

 

const DeepAnim = useRef([]); // for the animations

// Don't do this for an array that needs to persists between renders
// DeepAnim.current = []; 

 

Also, a timeline doesn't have an ease property. Perhaps you meant to use it in the defaults.

 

// bad
const headani = gsap.timeline({ ease: "expo.inOut" });

// good
const headani = gsap.timeline({
  defaults: {
    ease: "expo.inOut"
  }
});

 

 

  • Like 2
Link to comment
Share on other sites

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 ?

 

 

Link to comment
Share on other sites

22 hours ago, enda said:

t 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 ?

 

 

Correct. The arrays that are for the DOM refs are filled every time React re-renders. However, the array with the animation will only be filled one time inside the useEffect.

 

  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×