Jump to content
Search Community

Responsive timelines and function based values

jackkemm test
Moderator Tag

Go to solution Solved by mvaneijgen,

Recommended Posts

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

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

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

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

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...