React / GSAP pausing timeline on carousel mouse enter

[chalatum]

Hello.

 

I'm crafting a carousel with React, using GSAP timeline for image transitions. I tried during several hours to make the timeline pause on mouse enter and restart on mouse leave but I wasn't successful. I used and read the documentation about timeline() but even with that I just failed to manage doing what I want.

 

Below is the code of my functional component. I'm using setInterval() setTimeout() and useState() to mount my images one after another. When entering "carousel-wrapper" I would like the animation to pause in order to see the current active image and stay on it. Once removing the cursor from this area I would like the timeline to restart smoothly. All I got with my tries now are glitches, animation not pausing despite using resume(),addPause(), kill()... Frustrating...

 

Thanks by advance for any help.

 

const MyComponent = () => {

    const [state, setState] = useState({
        isActive1: true,
        isActive2: false,
        isActive3: false
    })

    const [count, setCount] = useState(0)
    const [mod, setMod] = useState(0)
    const [entered, setEntered] = useState(null)

    const tl = useRef(null)
    const interval = useRef(null)
    const timeout = useRef(null)

    useEffect(() => {
        interval.current = setInterval(() => {
            setCount(prevState => ++prevState)
        }, 8200)

        if (entered) {
            clearInterval(interval.current)
            interval.current = null
            setState(prevState => ({
                isActive1: prevState.isActive1,
                isActive2: prevState.isActive2,
                isActive3: prevState.isActive3
            }))
        }

        return () => {
            clearInterval(interval.current)
            interval.current = null
        }

    }, [entered])

    useEffect(() => {
        timeout.current = setTimeout(() => {
            setMod(count % 3)
        }, 1250)

        return () => {
            clearTimeout(timeout.current)
            timeout.current = null
        }

    }, [count])

    useEffect(() => {
        setState({
            isActive1: mod === 0 ? true : false,
            isActive2: mod === 1 ? true : false,
            isActive3: mod === 2 ? true : false
        })
    }, [mod])

    useEffect(() => {

        if (!entered) {
            tl.current = gsap.timeline()
                .fromTo('.img-wrapper', {
                    left: 0,
                    width: 0,
                    opacity: 0
                }, {
                    duration: 1.5,
                    opacity: 1,
                    width: '100%',
                    ease: 'power3.inOut',
                })
                .fromTo('.img-wrapper', {
                    left: 'unset',
                    right: 0,
                    opacity: 1,
                    width: '100%',
                }, {
                    duration: 1.3,
                    width: 0,
                    opacity: 0,
                    ease: 'power4.inOut'
                }, "+=5.4")
                .to('.img-wrapper', {
                    duration: 0,
                    right: 'unset'
                })

        } else if (entered) {
			
			// What I'm supposed to put here?
		
        }

    }, [state, entered])

    return (
        <div className='hero'>
            <div
                className='carousel-wrapper'
                onMouseEnter={() => setEntered(prevState => !prevState)}
                onMouseLeave={() => setEntered(prevState => !prevState)}
            >
                <h3 className='carousel-title'>Title</h3>
                <div className='carousel'>
                    <div className='img-wrapper'>
                        {state.isActive1 && <img
                            src='images/img_1.jpg'
                            alt='blabla'
                        />}
                        {state.isActive2 && <img
                            src='images/img_2.jpg'
                            alt='blabla'
                        />}
                        {state.isActive3 && <img
							src='images/img_3.jpg'
                            alt='blabla'
                        />}
                    </div>
                    
                </div>
            </div>
        </div>
    )
}

export default Hero

 

 

 

 

[chalatum]

Don't mind, I was on the wrong path. I shifted to Reac-Transition-Group to reach my goal. It's now working.