deodat Posted January 23, 2021 Share Posted January 23, 2021 Hello, I'm trying to replicate the animation you can see in this codepen in a React environnement (Gatsby), but I'm unable to pass in the condition where isReversed is equal to false and I don't understand why. Here is my codesandbox where I replicate the problem in a minimal demo : https://codesandbox.io/s/modest-williamson-vw78t So I can't reverse the animation on click. Thanks for your precious advices, Deodat See the Pen OJRYXdV by deodat (@deodat) on CodePen Link to comment Share on other sites More sharing options...
deodat Posted January 23, 2021 Author Share Posted January 23, 2021 I saw this pen : See the Pen vYOrQXb by GreenSock (@GreenSock) on CodePen it seems a better approach for what I'm trying to achieve, and maybe it's gonna be easier to translate in a React way Link to comment Share on other sites More sharing options...
deodat Posted January 23, 2021 Author Share Posted January 23, 2021 So in the codepen, it's much better now : See the Pen cda5dd7005eee22e23571cb8bcb465f9?editors=1011 by deodat (@deodat) on CodePen it drives me crazy Link to comment Share on other sites More sharing options...
deodat Posted January 26, 2021 Author Share Posted January 26, 2021 I've tried soooo many things 😪 Link to comment Share on other sites More sharing options...
ZachSaucier Posted January 26, 2021 Share Posted January 26, 2021 Hey deodat. Unfortunately helping you with the React port of your CodePen is out of scope for these forums. With that being said, if you make a minimal demo of the issue in React (using something like CodeSandbox) often times people will help you out anyway in these forums Link to comment Share on other sites More sharing options...
deodat Posted January 26, 2021 Author Share Posted January 26, 2021 Hey Zach, thanks for the reply. To be honest, I was a little lazy on this, hoping someone will spot some foolishness in my code. But now I'm gonna make this demo on CodeSandbox for my mental health Link to comment Share on other sites More sharing options...
deodat Posted January 27, 2021 Author Share Posted January 27, 2021 Hey Zach, I did it :https://codesandbox.io/s/modest-williamson-vw78t hope it will help someone to help me (and maybe others) Deodat Link to comment Share on other sites More sharing options...
Solution deodat Posted February 1, 2021 Author Solution Share Posted February 1, 2021 Ok, so I've found a solution which is to integrate my timeline in a useState like this : (but it's not very clear to me why this works... ) const [tlBurger] = useState( gsap.timeline({ paused: true, reversed: true, defaults: { duration: 0.5, ease: 'Back.inOut.config(2.3)', }, }) ); const burgerRef = useRef(); const waveTopRef = useRef(); const waveMidRef = useRef(); const waveBotRef = useRef(); const flatTopRef = useRef(); const flatMidRef = useRef(); const flatBotRef = useRef(); useEffect(() => { tlBurger .to(waveTopRef.current, { morphSVG: flatTopRef.current }, '<') .to(waveMidRef.current, { morphSVG: flatMidRef.current }, '<') .to(waveBotRef.current, { morphSVG: flatBotRef.current }, '<') .addLabel('hover') .to(waveMidRef.current, { duration: 0.3, scaleX: 0, transformOrigin: 'right center', ease: 'none', }) .to(waveTopRef.current, { y: 10 }, '-=0.1') .to(waveBotRef.current, { y: -10 }, '<') .to(waveTopRef.current, { rotation: 45, transformOrigin: 'center center', }) .to( waveBotRef.current, { rotation: -45, transformOrigin: 'center center' }, '<' ); }, [ tlBurger, waveTopRef, waveMidRef, waveBotRef, flatTopRef, flatMidRef, flatBotRef, ]); Link to comment Share on other sites More sharing options...
ZachSaucier Posted February 1, 2021 Share Posted February 1, 2021 I'm glad you got it figured out. Note that ease: 'Back.inOut.config(2.3)' is invalid. It should be something like ease: 'back.inOut(2.3)'. 2 Link to comment Share on other sites More sharing options...
deodat Posted February 1, 2021 Author Share Posted February 1, 2021 Indeed !!! thanks Zach Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now