Share Posted March 3 Hi there, I am playing around with an animation for a menu takeover and was wondering about responsive function based values in a timeline? I am trying to update values being passed to a timeline based on the browser size when a user resizes their browser. I have seen this but can't see it working with media queries/dynamic values: I have tried this using a window.matchMedia within the function but understandably from what I have read elsewhere, GSAP stores the initial value on the first run for performance? There are two other options I tried... updating a variable on resize and doing x: () => movement to get the new value, or updating a CSS custom property on resize and trying to use that too, none of which work. The values are expected to change when the user resizes the browser be it when the timeline is at the beginning or end so ideally I need to be able to update these dynamically. I have set up a basic Codepen of something similar to the route I am going down. I was wondering if there's a simple way to update these values? Scroll trigger has invalidate on refresh, I was thinking there may be something similar for timelines? Any help on this would be amazing! Thanks, Jack See the Pen gOdWReX by jackkemm (@jackkemm) on CodePen Link to comment Share on other sites More sharing options...
Share Posted March 3 Have you seen gsap.matchMedia which is build for exactly that! I'm still of the opinion that 'normal' users don't resize their browser, that is only something developers do while testing websites, but Here is a quick video explaining it all: 1 Link to comment Share on other sites More sharing options...
Author Share Posted March 3 Hi @mvaneijgen thanks for the answer. I understand that thought you have about resizing, but in my case I would like to make this work flawlessly if a user does decide to resize so the animation works just as good. I have used gsap.matchMedia() before, but in this instance I am updating the value on resize. I plan to change the values on resize so there's no defined value to be within a break point (sorry Codepen was a bad example in the end lol). Have updated the Codepen to show better what I am after. The values will be based on window.innerWidth for example and naturally these update on resize. Thanks, Jack Link to comment Share on other sites More sharing options...
Share Posted March 3 Maybe you're just looking for viewport widths? See the Pen jOvmpav?editors=0010 by GreenSock (@GreenSock) on CodePen If that's not quite what you're after take a look at invalidate() https://greensock.com/docs/v3/GSAP/Timeline/invalidate() Hope this helps! 2 Link to comment Share on other sites More sharing options...
Author Share Posted March 3 Hi Cassie, I have done another example closer to what I am working on: See the Pen JjaNmEa by jackkemm (@jackkemm) on CodePen I tried invalidate()previously, but I was setting the original transform for the text elements in CSS rather than using a fromTo in my timeline which was breaking the animation when triggering it again🤦♂️ Looks like that was the answer after all! Thanks guys. Jack Link to comment Share on other sites More sharing options...
Solution Solution Share Posted March 3 Are you trying to calculate the size of the circle so that is grows always go the full size of the browser? If so check this tutorial our own @Carl did 4 Link to comment Share on other sites More sharing options...
Author Share Posted March 6 Hi @mvaneijgen, That's perfect, no need to calulate the height/width of the browser now 👌 Thanks for your help guys! Thanks, Jack 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