Timeline animation overlay problem

[Thanh Dat Nguyen]

I'm facing a problem with this animation, when I click the add button, it will animate like in the video, but when i click that button again while the previous animation is playing, there will be two animation playing at them same time, that is why when those dots move up to the add button and then later the timelineOpen still playing so it still update the y position making it stay at the same location. I can prenvent it like implement disabled button when timeline is active, but I don’t want it, I want when user click that button whenever they want and the animation if there is one playing it will stop at its position and start another timeline.

 

import { addButton } from "../utils";
import { useDispatch, useSelector } from "react-redux";
import { addButtonClick } from "../redux/action";
import { buttonSelector } from "../redux/selectors";
import { useGSAP } from "@gsap/react";
import gsap from "gsap";
import { useState } from "react";

function Nav() {
    const dispatch = useDispatch();
    const status = useSelector(buttonSelector);
    const [animationActive, setAnimationActive] = useState(false);


    const timelineOpen = gsap.timeline({
        paused: true,
    });
    const timelineClose = gsap.timeline({
        paused: true,
    });

    
    useGSAP(()=>{
        
        timelineOpen.to("#addButton",{
            scale: 0.85,
            y: -12,
            rotate: 316,
            ease: "power1.inOut",
            duration: 0.3,

            
        })
        timelineOpen.to("#addButton",{
            y: 0,
            scale: 1,
            duration: 0.3,
        })
        timelineOpen.to(".First",{
            y: 0,
            scale: 1.3,
            duration: 0.1,
        },'-=0.4')
        timelineOpen.to(".First",{
            y: 80,
            scale: 1,
            duration: 3.2,
            ease: "elastic.out(1,0.7)",
        }, '-=0.3')

        timelineOpen.fromTo(".Second",{
            y: 80,
            // scaleY: 0,
            // duration: 1,
            
            

        },{
            y: 140,
            scaleY: 1,
            duration: 3.2,
            opacity: 1,
            ease: "elastic.out(1,0.7)",


        }, "-=2.7")

        timelineOpen.fromTo(".Third",{
            y: 140,
            // scaleY: 0,
            // duration: 1,
            
            

        },{
            y: 200,
            scaleY: 1,
            duration: 3.2,
            opacity: 1,
            ease: "elastic.out(1,0.7)",

        }, "-=2.9")

        timelineOpen.fromTo(".Fourth",{
            y: 200,
            // scaleY: 0,
            // duration: 1,
            
            

        },{
            y: 260,
            scaleY: 1,
            duration: 3.2,
            opacity: 1,
            ease: "elastic.out(1,0.7)",

        }, "-=2.9")

        timelineOpen.fromTo(".Fith",{
            y: 260,
            // scaleY: 0,
            // duration: 1,
            
            

        },{
            y: 320,
            scaleY: 1,
            duration: 3.2,
            opacity: 1,
            ease: "elastic.out(1,0.7)",
            onComplete: () => {
                setAnimationActive(false);
            }

        }, "-=2.9")


        
        
        


        timelineClose.to("#addButton",{
            scale: 1,
            rotate: 0,
            duration: 0.3,
        })
        timelineClose.to(".selector",{
            y: 0,
            duration: 0.7,
            stagger: 0.1,
            
            
        })
        if(status){
            timelineOpen.play();
            // setAnimationActive(true);
        }else {
            timelineClose.play();
            // setAnimationActive(true);
            
        }
    },[status])

    console.log(animationActive);
    const handleAddBtn = () => {
        dispatch(addButtonClick());
        

    }
    return (
        <section className="nav-grid border-r border-[#ececec] flex items-center flex-col row-span-2">
            <div className="h-20 flex items-center">
                <h4 className="text-xl font-semibold
                bg-gradient-to-r from-blue-500 to-fuchsia-600 bg-clip-text text-transparent
                ">TDNote</h4>
            </div>
            <div className="notes-container">
                <div className="mt-12">
                    <button 
                    // disabled={animationActive}
                    onClick={handleAddBtn} id="addButton" className="z-20 rounded-full bg-black border-none w-14 h-14 outline-none relative cursor-pointer flex items-center justify-center">
                        <img src={addButton} alt="add button" className="w-7 h-7"/>
                    </button>
                </div>
                <div className="note-selector flex justify-center relative z-10 -mt-6">
                    <div className="selector First bg-[#ffcf7d] z-10 !opacity-100 "></div>
                    <div className="selector other Second bg-[#f0a177] z-[9] "></div>
                    <div className="selector other Third bg-[#b095f6] z-[8]"></div>
                    <div className="selector other Fourth bg-[#55cffa] z-[7]"></div>
                    <div className="selector other Fith bg-[#e6ee96] z-[6]"></div>
                </div>
            </div>
            <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
                <defs>
                    <filter id="gooey-effect" xmlns="http://www.w3.org/2000/svg">
                    <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur"/>
                    <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 20 -9" result="gooey-effect"/>
                    <feComposite in="SourceGraphic" in2="gooey-effect" operator="atop"/>
                    </filter>
                </defs>
            </svg>
        </section>
    );
}

export default Nav;

 

[GSAP Helper]

Without a minimal demo, it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependencies as possible. Start minimal and then incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

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

that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

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

 

Finally here is a simple demo that toggles a GSAP timeline using a button:

https://stackblitz.com/edit/gsap-react-basic-f48716?file=src%2FApp.js

[Thanh Dat Nguyen]

here is the problem I'm facing. I edited your code so it can act like my project. when you hit the toggle button, the animation is fine but when you hit it again it just does not behave like I wanted, it have to reverse the animation of when it open. And one more thing is I want to adjust the duration when it reverse (close), I want it faster than the open. 

I'm just a newbie into gsap so I have been struggling with these problems, hope you can help me.

 

here is the link:

GSAP & React Simple Starter (forked) - StackBlitz

[Rodrigo]

Hi,

 

Maybe something like this?

https://stackblitz.com/edit/gsap-react-basic-f48716-xgub73?file=src%2FApp.js

 

Hopefully this helps.

Happy Tweening!

[Thanh Dat Nguyen]

wow, that is what I wanted, thank you. But how do I change the duration of the reverse

[Thanh Dat Nguyen]

and I have another problem with the reverse like, when i click the button first time, it rotate 316, and I click again it suppose to back to 0 but it just play the new one like when first click, can you spot where I am wrong

 

const dispatch = useDispatch();
    const status = useSelector(buttonSelector);
    const [firstRender, setFirstRender] = useState(true);

    const timelineOpenBtn = gsap.timeline({
        paused: true,
        defaults: {
            duration: 0.3,
            ease: "power1.inOut",
        },
    });
    
    useGSAP(()=>{
        timelineOpenBtn.to("#addButton",{
            scale: 0.85,
            y: -12,
            rotate: 316,
            opacity: 1,    
        })
        .to("#addButton",{
            y: 0,
            scale: 1,
        }).reverse();

        /
        if(status){
            timelineOpenBtn.play();
        }else if(!status && !firstRender){
            timelineOpenBtn.reversed(!timelineOpenBtn.reversed());
        }
    },[status])

 

[Rodrigo]

23 hours ago, Thanh Dat Nguyen said:

wow, that is what I wanted, thank you. But how do I change the duration of the reverse

Just change the timeScale property on the timeline based on it's reversed state:

const toggleTimeline = () => {
  const { current } = tl;
  const reversed = current.reversed();
  current.timeScale(reversed ? 1 : 2).reversed(!reversed);
};

https://gsap.com/docs/v3/GSAP/Timeline/timeScale()

 

I updated the demo to reflect that change:

https://stackblitz.com/edit/gsap-react-basic-f48716-xgub73?file=src%2FApp.js

 

22 hours ago, Thanh Dat Nguyen said:

and I have another problem with the reverse like, when i click the button first time, it rotate 316, and I click again it suppose to back to 0 but it just play the new one like when first click, can you spot where I am wrong

Can't really tell you, the only thing I can spot is that you're creating your timeline instance outside the useGSAP hook. Is always better to create every GSAP instance inside the useGSAP hook. If you need to access the instance outside the useGSAP hook then just use a reference like in the demo I posted. You can also use contextSafe in order to create other GSAP instances based on event handlers as well:

https://gsap.com/resources/React

 

Hopefully this helps.

Happy Tweening!

[Thanh Dat Nguyen]

thank you, you helped me a lot

[Thanh Dat Nguyen]

Hi, sorry that I want to ask one more thing, how to adjust opacity duration,

for example of animejs, they have something like this 

opacity: {value:1, duration: 10}

[Rodrigo]

Hi,

 

Right now everything is handled by a single Tween instance:

tl.current = gsap
  .timeline({
  defaults: {
    duration: 2.5,
    ease: 'elastic.out(1,0.7)',
  },
})
  .to('.box', {
  y: (i) => 80 + i * 40,
  opacity: 1,
  stagger: 0.4,
})
  .reverse();

For that you'd have to create a different tween and use the position parameter to sync both of them:

tl.current = gsap
  .timeline({
  defaults: {
    duration: 2.5,
    ease: 'elastic.out(1,0.7)',
  },
})
  .to('.box', {
  y: (i) => 80 + i * 40,
  stagger: 0.4,
})
  .to('.box', {
  opacity: 1,
  duration: 10,
  stagger: 0.4,
}, "<")
  .reverse();

Hopefully this helps.

Happy Tweening!

[Thanh Dat Nguyen]

thank you