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...
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 account
Already have an account? Sign in here.Sign In Now