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

I wanna uninterrupt the flip animation that's it just a simple problem but I cannot find to not interrupt but can't do it anyone care to explain? https://codesandbox.io/s/lively-snowflake-uno0rn?file=/src/styles.scss

Hi Rodrigo I forked his project however it seems inertia plugin is not working properly? It seems that something changed here or what? https://codesandbox.io/s/draggable-slider-with-gsap-forked-1tvogv?file=/src/components/Slider.js

Thanks pal @PointC however I find more alternative cause I'm using a typescript which might be better.. const progressProxy = { progress: 0 }; tl.add( gsap.to(progressProxy, { duration: 1, onUpdate: () => { drawCircles(i, progressProxy.progress); }, }) );

Hi no need for big explanation here how can I get the progress of animation in a gsap? is it a onUpdate or what? cause I'm trying to update the animation in a canvas Here is the code, but it seems like it is giving me undefined and null...its completely nothing..care anyone to explain if I'm using it wrong? tl.add( gsap.to( {}, { duration: 0.5, onUpdate: (animation) => { console.log(animation) // drawCircles(i, animation.progress()); }, } ) );

Hope you can help me here thank you sir @Rodrigo

Oh thanks for the reply. I'm looking for to lock it up the fill animation upward (meaning it will stay white after it maximize all the black colors to white colors) 2.5seconds even if it release the hold spacebar because you must hold it in 3secs but you can release the space once it reach 2.5seconds. Now for the second part the fill-down color animation. It is to hold spacebar to fill down the color white to black meaning it will go down as the initial state...but it doesn't work that way because it is waiting for me to release the hold spacebar before it filled down the white color. That's my problem. And also I wanna get rid of bugs in the text as well but I can't...I feel its not right to use the proper change of "Hold to Still" and "Hold to Live" as I think its not way smooth as I space it. Or I think it is already fine.

Adding these another one, which works the same but more different. Because this one does not stop the animation when you release in fill up at around 2.5s. import React, { useRef, useEffect } from 'react'; import { gsap } from 'gsap'; const Circle = () => { const circleRef = useRef(null); const afterRef = useRef(null); const textRef = useRef(null); let fillTween = null; let dropTween = null; let spacebarHeld = false; useEffect(() => { const handleKeyDown = (event) => { if (event.key === ' ' && !dropTween) { spacebarHeld = true; textRef.current.innerText = 'Hold to Live'; if (!fillTween) { fillTween = gsap.to(afterRef.current, { height: '100%', duration: 3, onComplete: () => { textRef.current.innerText = 'Hold to Still'; fillTween = null; }, }); } } }; const handleKeyUp = (event) => { if (event.key === ' ' && fillTween && fillTween.progress() < 2.5 / 3) { spacebarHeld = false; fillTween.pause(); textRef.current.innerText = 'Hold to Still'; dropTween = gsap.to(afterRef.current, { height: '0%', duration: fillTween.progress() * 3, onComplete: () => { textRef.current.innerText = 'Hold to Live'; dropTween = null; }, }); fillTween = null; } }; document.addEventListener('keydown', handleKeyDown); document.addEventListener('keyup', handleKeyUp); return () => { document.removeEventListener('keydown', handleKeyDown); document.removeEventListener('keyup', handleKeyUp); }; }, []); return ( <div className="circle" ref={circleRef}> <div className="circle-text" ref={textRef}> Hold to Live </div> <div className="after" ref={afterRef}></div> </div> ); }; export default Circle;

I have a problem in locking a hold space bar. Basically what I want to happen is that. Let say...If I have to hold space (in first initial state) to fill up the circle black color to white color, and then when it fills up it will lock up before 3s and that is around 2.5secs or 2.3secs. When I mean lock up the animation must fill up all the black colors to white by releasing the hold space. The same with vice versa as it fill down the white color so it will go back to black color again. The animation in fill up seems fine but in the fills down it seems something wrong about it. It waits for me to release hold space in fill down so it can animate to fill down...anyone care to explain how to change it? Also it affects with the text... Thanks anyone for the help ? The code is in below but here is the codesandbox. https://codesandbox.io/s/polished-moon-ylpoty?file=/src/CircleAnimation.jsx This is the SCSS .circle { visibility: visible; opacity: 1; display: flex; align-items: center; justify-content: center; width: 135px; height: 135px; background: black; border-radius: 50%; position: fixed; overflow: hidden; border: 1px solid white; right: 5%; bottom: 5%; z-index: 301; .after { width: 100%; height: 0%; position: absolute; z-index: -1; background: white; bottom: 0; left: 0; } } And this is the handleKeyUp const handleKeyUp = (event) => { if (event.key === ' ') { spacebarHeld = false; if (fillTween) { if (fillTween.progress() < 2.5 / 3) { fillTween.pause(); textRef.current.innerText = 'Hold to Still'; dropTween = gsap.to(afterRef.current, { height: '0%', duration: fillTween.progress() * 3, onComplete: () => { textRef.current.innerText = 'Hold to Live'; dropTween = null; }, }); fillTween = null; } else { if (fillTween.progress() >= 1) { fillTween.pause(); fillTween = null; } else { fillTween.eventCallback('onUpdate', () => { if (!spacebarHeld && fillTween && fillTween.progress() < (2.5 / 3)) { fillTween.pause(); const remainingDropDuration = (1 - fillTween.progress()) * 3; dropTween = gsap.to(afterRef.current, { height: '0%', duration: remainingDropDuration, onComplete: () => { textRef.current.innerText = 'Hold to Live'; dropTween = null; }, }); fillTween = null; } }); } } } else if (!fillTween && !dropTween) { textRef.current.innerText = 'Hold to Still'; dropTween = gsap.to(afterRef.current, { height: '0%', duration: 3, onComplete: () => { textRef.current.innerText = 'Hold to Live'; dropTween = null; if (spacebarHeld) { fillTween = gsap.to(afterRef.current, { height: '100%', duration: 3, onComplete: () => { textRef.current.innerText = 'Hold to Still'; fillTween = null; }, }); } }, }); } } };

Addition this animation is supposed to be similar to these.

I'm tryna use a clipPath in transitioning closing the animation but apparently its not working as expected. Can anyone tell me how can I make it smoother? Like I don't wanna wait for the other animation to be done before animating the another one. Also there is a bug here its not animating properly. It's like closing just so sudden but it in my browser it is moving well. Downward, is this a bug or what? Here is the link source https://codesandbox.io/s/epic-liskov-1s9wci?file=/src/App.js And this is my problem useEffect(() => { // // welcome screen function pathFunc(idx) { return `polygon( 0% ${idx >= 4 ? "100%" : "0%"}, 0% 100%, 20.0% 100%, 40.0% 100%, 60% 100%, 80% 100%, 100% 100%, 100% ${idx >= 0 ? "100%" : "0%"}, 80% ${idx >= 0 ? "100%" : "0%"}, 80.0% ${idx >= 1 ? "100%" : "0%"}, 60.0% ${idx >= 1 ? "100%" : "0%"}, 60.0% ${idx >= 2 ? "100%" : "0%"}, 40.0% ${idx >= 2 ? "100%" : "0%"}, 40.0% ${idx >= 3 ? "100%" : "0%"}, 20.0% ${idx >= 3 ? "100%" : "0%"}, 20.0% ${idx >= 4 ? "100%" : "0%"} )`; } if (anim) { tl.play(); } tl.to(".box", { duration: 3, keyframes: [ { clipPath: pathFunc(0) }, { clipPath: pathFunc(1) }, { clipPath: pathFunc(2) }, { clipPath: pathFunc(3) }, { clipPath: pathFunc(4) } ], ease: "power2.inOut" }); }, [anim]);

Hey @SeventySeven can you elaborate more about this problem? I use gsap a lot in 3D animation..also you can ask at the https://discourse.threejs.org/ if you have a question about R3F. I can help you with this but I don't understand well why you put out the script.js in the useEffect method. You should have put it in the useEffect and also don't create this in the index.html that is so messy. <div id="wrapper"> <div id="content"> <section id="first"> <div class="element"></div> </section> <section id="second"> <div class="element"></div> </section> </div> </div> <script type="module" src="src/script.js"></script>

Basically I have this image. First What happens here is that when I click it. It gonna pop up the white bars and gonna remove those layers from right to left and left to right and then there is something gonna pop up in the middle of it. I'm using react for it. But yeah it seems possible but the technique here I'm imagine is way rich and not good for performance. Cause I'm gonna have a double copy of THE RISING PHASE 1. and then use a clip path. Here is the code for opening first but I don't have an idea for the closing which is removing the layers using clip path or maybe you have an idea??. https://codesandbox.io/s/agitated-rosalind-bie401?file=/src/themeMasking.scss If anyone can help I would be thankful a lot please thank you :>>