Thanh Dat Nguyen
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by 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}
-
thank you, you helped me a lot
-
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])
-
wow, that is what I wanted, thank you. But how do I change the duration of the reverse
-
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:
-
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;
Timeline animation overlay problem
in GSAP
Posted
thank you