useEffect preventing executing of useGsap

[donnie94]

Hello i have following piece of code:

 

'use client';

 

import Link from 'next/link';

import { useEffect, useRef, useState } from 'react';

import { useGSAP } from '@gsap/react';

import gsap from 'gsap';

import { useParams } from 'next/navigation';

 

export default function Navbar() {

const containerRef = useRef() as any;

 

const [selectedSection, setSelectedSection] = useState('');

 

useEffect(() => {

const handleHashChange = () => {

setSelectedSection(window.location.hash);

};

 

window.addEventListener('hashchange', () => {

console.log('called');

handleHashChange();

});

handleHashChange(); // Initial call to set the state based on the current hash

 

return () => {

window.removeEventListener('hashchange', handleHashChange);

};

}, []);

 

console.log(selectedSection);

 

const tl = gsap.timeline({ paused: true });

 

const { contextSafe } = useGSAP(

() => {

tl.to(containerRef.current, {

width: 150

})

.to('.link', {

opacity: 1,

background: 'inherit',

overflow: 'visible',

border: 'none',

stagger: { each: 0.2 }

})

.to('.label', { opacity: 1, stagger: { each: 0.2 } }, '<');

},

{ scope: containerRef }

);

 

const handleMouseEnter = contextSafe(() => {

tl.play();

});

 

const handleMouseLeave = contextSafe(() => {

tl.reverse();

});

 

return (

<nav

ref={containerRef}

onMouseEnter={handleMouseEnter}

onMouseLeave={handleMouseLeave}

className='fixed flex flex-col transform top-1/2 -translate-y-1/2 gap-6 bg-black left-0 rounded-r-xl border px-1 py-3 border-red-500'

>

<Link

href='#sec1'

className={`link w-3 h-3 rounded-full border border-red-500 overflow-x-hidden ${

selectedSection === '#sec1' ? 'bg-red-500' : 'bg-black'

}`}

>

<span className='label opacity-0'>Sec1</span>

</Link>

<Link

href='#sec2'

className={`link w-3 h-3 rounded-full border border-red-500 overflow-x-hidden ${

selectedSection === '#sec2' ? 'bg-red-500' : 'bg-black'

}`}

>

<span className='label opacity-0'>Sec2</span>

</Link>

<Link

href='#sec3'

className={`link w-3 h-3 rounded-full border border-red-500 overflow-x-hidden ${

selectedSection === '#sec3' ? 'bg-red-500' : 'bg-black'

}`}

>

<span className='label opacity-0'>Sec3</span>

</Link>

<Link

href='#sec4'

className={`link w-3 h-3 rounded-full border border-red-500 overflow-x-hidden ${

selectedSection === '#sec4' ? 'bg-red-500' : 'bg-black'

}`}

>

<span className='label opacity-0'>Sec4</span>

</Link>

<Link

href='#sec5'

className={`link w-3 h-3 rounded-full border border-red-500 overflow-hidden ${

selectedSection === '#sec5' ? 'bg-red-500' : 'bg-black'

}`}

>

<span className='label opacity-0'>Sec5</span>

</Link>

</nav>

);

}

 

And everything works good if useEffect is comment in, but once is comment out useGsap is not executing,

any idea why is happening and how to prevent it?

[GSAP Helper]

One clear problem is that you're creating your timeline OUTSIDE of the useGSAP() hook. So it's not getting cleaned up properly, plus it gets re-created every time your component renders (that's a React thing). You should probably use a useRef() for that timeline instance and create it inside of the useGSAP() hook. 

 

If you still need help, please make sure you provide a minimal demo. Here are some React starter templates. Also, please read this article about using GSAP in React. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[donnie94]

Thank you so much for advices! BTW Amazing library 🙇‍♂️ 
PS: React article throw 404

[GSAP Helper]

Sorry about the bad link - it's fixed now. ✅