deodat

Indeed !!! thanks Zach

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, ]);

Hey Zach, I did it : https://codesandbox.io/s/modest-williamson-vw78t hope it will help someone to help me (and maybe others) Deodat

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

I've tried soooo many things 😪

So in the codepen, it's much better now : https://codepen.io/deodat/pen/cda5dd7005eee22e23571cb8bcb465f9?editors=1011 it drives me crazy

I saw this pen : https://codepen.io/GreenSock/pen/vYOrQXb 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

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

Hello Zach, thanks for the quick reply! indeed, as you summarized it pretty well, I need to do a scroll jacking (I'm not a big fan of scroll jacking but it's what I'm asked for...) thanks for the thread ! David

Hello! I'm trying to build a slider with fixed backgrounds and slides with content that come with a vertical transition (at the end of this post). I'm not sure I've chosen the good strategy, I begun with this ScrollTrigger demo codepen : https://codepen.io/GreenSock/pen/rNOebyo The result isn't totally fluid... I'd like to know what you would have done to achieve this? I'd like to trigger the slide change (background's fading and content transition) each time I begin to scroll. I tried something with the ScrollTo plugin but it was pretty janky when I started to use my trackpad : https://codepen.io/deodat/pen/GRjNjxx (now I'm trying to set a variable to avoid scrolling when the animation isn't completed). Thanks a lot in advance for your advices and ideas! Deodat

Thanks you so much Paul for taking the time to explain all the process in details to me (and maybe others)! It's exactly what I wanted to achieve. I know it would have been a lot easier with a real horizontal scroll (I did it pretty fast with the vertical scroll) but it's not easy to scroll horizontally with a mouse I'm gonna to dissect it all and play with it!

Hello, I'm trying to scroll sections horizontally with a first section that scrubs the time a split text is animating (that one works). The problem is that my others sections seem to go below the first one with the pin and scrub of this last one. And I can't scroll the sections anymore (if I remove the split text animation, it does). I've tried many things (pinSpacing, etc.) but I can feel I miss something important. Any help very much appreciated, Deodat

Hey Zach, thanks a lot for your precious help ! It works perfectly great for me Pass the animation as a parameter, I'll remember it ! Best, David

Hello, I'm trying to implement matchMedia with ScrollTrigger, it works very well but I have this little problem with gsap.set that I'm required to use because the pin method overrides my CSS transforms (in my CSS comments). But it doesn't seem to apply at all, or just for a brief moment when crossing my 800px breakpoint. Any help and comment very much appreciated, Thanks, David