How do I uninterrupt a timeline animation when I click already a one item until it ends...

[ashura]

In reactjs, I keep trying over and over again how do I stop interruption from one item that is animating so that it could easy but I couldn't do it properly. 

Here is the main code problem I think I have...

    const handleMouseClick = (wholeWrapper, item, index) => {
        animation = true;  // <-- Set flag to true when a new animation starts
        // Create new timeline for each click
        tlRepr = gsap.timeline({ 
            defaults: { duration:1.25, ease:"power2.inOut" },  
            onStart:() => setSliding(true),
            onComplete:() => {
                setSliding(false)
                animation = false;  // <-- Set flag to false when animation ends
            }
        })
        if (!animation) { // <-- check if currently animation
            return;
        }
        if (selectedItem === index) {
            wholeWrapper.forEach((elem) => {
                tlRepr.to(elem, {
                    width: "100%",
                    duration: 1.25,
                    ease: "power2.inOut",
                    onComplete:() => {
                        elem.style.removeProperty('width'); 
                    }
                },0);
            });
            tlRepr.to(mainThemeRef.current,{
                width:'96%',
                gap: '2rem',
                duration:1,
                ease:"sine.inOut"
            },0)
            setSelectedItem(null);
        } else {
            setSelectedItem(index);
            wholeWrapper.forEach((elem, i) => {
                tlRepr.to(elem, {
                    width: "0%",
                    duration: 1.25,
                    delay:0.25,
                    ease: "power2.inOut",
                },0);
            });
            tlRepr.to(wholeWrapper[index],{
                width:"100%",
                duration:1.25,
                delay:0.25,
                onStart:() => {
                    tlRepr.to(mainThemeRef.current,{
                        width:'100%',
                        gap: '0rem',
                        duration:1,
                        ease:"sine.inOut",
                    },0)
                }
            },0)
            gsap.to(item.querySelectorAll('.themeWord'), {
                duration: 1.1,
                stagger: 0.0125,
                ease: "power3.inOut",
                translateY: "100%"
            });
        }
    }

So, what's happening here is that is trying to full screen width a certain item that was click and then others go 0% of width. But when I click other items after I click a certain item. That item I click and click again will be the one will be full screen width so there is a confliction between others. 

Here is the codesandbox for more clarifications.

https://codesandbox.io/s/jovial-haslett-73ju3r?file=/src/Borders.jsx

Edited June 8, 2023 by ashura
For more clarification

[ashura]

can anyone help me through this huhuuh :< it's hard I don't understand why but the logic seems plausible to me but I don't understand why it isn't working as I wanted to.

[Cassie]

Hi there, some notes to help.

 

Handling interaction

 

The best way to handle interaction is by creating ONE timeline or tweens and then controlling it with timeline methods
 

let tl = gsap.timeline({paused: true)

tl.to....

// control methods
 
tl.play() 
tl.reverse()  
tl.pause()

 

See the Pen eYWGeGe by GreenSock (@GreenSock) on CodePen

Also I can see you're not using GSAP's context - it's very important to use context in React to clean up your animations, especially with React 18, not using context can lead to some unexpected behaviour/bugs.

 

Check out the article here -

 

 

[Rodrigo]

Hi,

 

Adding to Cassie's great advice, I'd like to know what is not working exactly? If you want to prevent the click handler to run on an element when another is already active, you can just create a boolean and store it in a ref so it's preserved through re-renders. Other than that I don't see anything wrong with your code, besides the fact that you're not using GSAP Context and you're not cleaning up in your effect hook.

 

Happy Tweening!

[ashura]

thanks @Cassie @Rodrigo but I already got fixed it before you give me the link.. I'm so dumb hahaha I just use gsap.context and it is way more efficient in handling in react hooks.