zofia Posted February 15, 2022 Share Posted February 15, 2022 Hi, I need advice on how to create responsive timelines (+ scrollTrigger). In my animation, I want to use different target heights (gsap.to) depending on the width of the browser window. In my case, I have a divider that should be higher on mobile and lower on desktop devices (after the animation is finished). These values should update when someone resizes the browser window. I tried to do this (codepen included) but when I resize the browser window, the animation behaves strange. I'm not sure if I should kill the animation and then recreate it... Ah, my head is tired today, please help Thank you! See the Pen wvPrEqL?editors=1010 by zofiaifoz (@zofiaifoz) on CodePen Link to comment Share on other sites More sharing options...
OSUblake Posted February 15, 2022 Share Posted February 15, 2022 Hi zofia, You can create your ScrollTriggers/animations inside matchMedia with the sizes you want... https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.matchMedia() Or you can put invalidateOnRefresh: true in your ScrollTriggers... Quote invalidateOnRefresh Boolean - If true, the animation associated with the ScrollTrigger will have its invalidate() method called whenever a refresh() occurs (typically on resize). This flushes out any internally-recorded starting values. And then use functions for values that need be dynamic. .to(".b1", { height: () => window.innerWidth < 900 ? "40vw" : "15vw", duration:1 }) 1 Link to comment Share on other sites More sharing options...
zofia Posted February 15, 2022 Author Share Posted February 15, 2022 @OSUblake thanks a lot! 👍👍👍 I've tried both ways and ScrollTrigger.matchMedia() works better for me 👍 Here is the new codepen: See the Pen GROMVBz by zofiaifoz (@zofiaifoz) on CodePen 1 Link to comment Share on other sites More sharing options...
zofia Posted February 22, 2022 Author Share Posted February 22, 2022 Yesterday I noticed that when I navigate from one page to another in my svelte app using ScrollTrigger.matchMedia and then resize the browser window, I see warnings in the console: "GSAP target not found"@OSUblake could you help me to get rid of them? What am I doing wrong? Here is a demo:https://stackblitz.com/edit/sveltejs-gsap-220222-b npm run dev Any help will be appreciated! 🙏 Link to comment Share on other sites More sharing options...
OSUblake Posted February 22, 2022 Share Posted February 22, 2022 Hi zofia, I don't know why, but stackblitz is working for me, at least not at the moment, but I'm pretty sure all you need to do is clear out match media calls in your onDestroy using ScrollTrigger.clearMatchMedia. https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.clearMatchMedia() 1 Link to comment Share on other sites More sharing options...
zofia Posted February 23, 2022 Author Share Posted February 23, 2022 Ah, this time it was a quick and easy fix Thank you! @OSUblake 1 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