Cannot use RTG + GSAP

[Hemananthan H P]

Hi All,

 

I am building simple website in react, while opening the navigation menu, GSAP animation not working for entering and exiting the Navigation menu component. I am providing the link below for a very very rough demo, I just need functionality for now. Thanks!

 

I am using RTG for tracking the component Enter/Exit state,


https://stackblitz.com/edit/vitejs-vite-iuxsfufp?file=src%2FApp.tsx

Edited February 23 by Hemananthan H P

[GreenSock]

I noticed quite a few problems in your file but the main one had to do with: 

{openMenu && (<Transition onEnter={onEnter} ...)

You're only rendering the <Transition> component when openMenu is truthy, so it's completely eliminated from the DOM otherwise. Your onEnter and onExit are NEVER getting called. They're getting recreated on every render, as is the whole Transition component. 

 

Other problems: 

1. You never registered useGSAP or SplitText plugins. 
2. In your exit tween, you were animating the Ref object itself instead of the actual element (gsap.to(menuRef, ...}) instead of menuRef.current)
3. Originally you were using an invalid reference to "container" but it looks like you fixed that. 

Is this better? 

https://stackblitz.com/edit/vitejs-vite-aelkaytt?file=src%2FApp.tsx

[Hemananthan H P]

3 hours ago, GreenSock said:

I noticed quite a few problems in your file but the main one had to do with: 

{openMenu && (<Transition onEnter={onEnter} ...)

You're only rendering the <Transition> component when openMenu is truthy, so it's completely eliminated from the DOM otherwise. Your onEnter and onExit are NEVER getting called. They're getting recreated on every render, as is the whole Transition component. 

 

Other problems: 

1. You never registered useGSAP or SplitText plugins. 
2. In your exit tween, you were animating the Ref object itself instead of the actual element (gsap.to(menuRef, ...}) instead of menuRef.current)
3. Originally you were using an invalid reference to "container" but it looks like you fixed that. 

Is this better? 

https://stackblitz.com/edit/vitejs-vite-aelkaytt?file=src%2FApp.tsx

Thanks for the reply Jack! Solution looks good. However I want create seperate component for menu like <MenuMobile>. So If I conditionally rendering <MenuMobile> component from <HeroSection> page, react will never call the functions in the <MenuMobile> ?

[Rodrigo]

Hi,

 

Keep in mind that transition group will do the mounting/unmounting for you nso there is no need for that conditional rendering logic in your case, something you already have in your Transition config:

https://reactcommunity.org/react-transition-group/transition#Transition-prop-mountOnEnter

 

In the case of different menus depending on the screen size I would recommend putting the conditional logic inside the <Transition> tag and not in the main component, something like this:

<Transition
  in={openMenu}
  timeout={{ enter: 0, exit: 250 }}
  nodeRef={menuRef}
  mountOnEnter={true}
  unmountOnExit={true}
  onEnter={onEnter}
  onExit={onExit}
>
  {
    /*Some conditional logic here to show a menu based on screen size*/
    isMobile ? 
      // render mobile menu
      (<div>/* HTML here */</div>) :
      // render desktop menu
      (<div>/* HTML here */</div>)
  }
</Transition>

It should be as simple as that.

 

Hopefully this helps

Happy Tweening!

[Hemananthan H P]

Thanks for your time and help Jack & Rodrigo!