deodat
Members-
Posts
16 -
Joined
-
Last visited
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Everything posted by deodat
-
ScrollTrigger: issue with scroll position when I navigate to a page
deodat replied to ThinkingAbout_dev's topic in GSAP
Updating GSAP from 3.7.1 to 3.8.0 resolves the issue for me. Deodat -
ScrollTrigger: issue with scroll position when I navigate to a page
deodat replied to ThinkingAbout_dev's topic in GSAP
Hi @ThinkingAbout_dev, Did you manage to face this issue? I'm facing exactly the same and it drives me nuts Thanks, 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
- 2 replies
-
- scrolltrigger
- matchmedia
-
(and 1 more)
Tagged with:
-
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
- 2 replies
-
- scrolltrigger
- matchmedia
-
(and 1 more)
Tagged with: