IanStews Posted November 25, 2021 Share Posted November 25, 2021 I've been having this weird bug/ issue in combination with ScrollTrigger.matchMedia and resizing the browser in Gatsby. When resizing the items seem to get stuck in the pre-animation state (making them disappear). I would expect to see the blocks do their animations after a resize but instead I'm just seeing the start state and nothing else.**Note: This only happens when resizing the browser without any reloads. If you resize and reload it will animate according to the query.I've made a simple example for you guys to have a look at in CodeSandbox: https://codesandbox.io/s/gatsby-gsap-matchmedia-issue-l04x8 Link to comment Share on other sites More sharing options...
Cassie Posted November 25, 2021 Share Posted November 25, 2021 Hey @IanStews, I wish I had a proper explanation for you - but I guessed it might be something to do with react's render loop/refreshing and the fact that from tweens are immediately rendered. 🤷🏼♀️ I swopped the initial set to move the elements down and make them hidden and then animated using to() and it worked. Can't explain. Dumb luck. Maybe @OSUblake will be able to give you a more educated analysis.https://codesandbox.io/s/gatsby-gsap-matchmedia-issue-forked-k8d87?file=/src/components/Blocks.jsx Link to comment Share on other sites More sharing options...
OSUblake Posted November 25, 2021 Share Posted November 25, 2021 The same issue will happen without React. You just need to use ScrollTrigger.saveStyles(). https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.saveStyles() 2 1 Link to comment Share on other sites More sharing options...
IanStews Posted November 29, 2021 Author Share Posted November 29, 2021 On 11/25/2021 at 5:40 PM, OSUblake said: ScrollTrigger.saveStyles() This does the trick, thanks @OSUblake! Now I Just have to figure out how to cleanup the matchMedia function and the tweens. I think this post might help Link to comment Share on other sites More sharing options...
OSUblake Posted November 29, 2021 Share Posted November 29, 2021 7 hours ago, IanStews said: Now I Just have to figure out how to cleanup the matchMedia function and the tweens. I think this post might help Yeah, let us know how that goes. I think there might be room for improving how matchMedia works across different components. 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