mattdown Posted November 30, 2020 Share Posted November 30, 2020 Hi all, I've been trying to get my head around Matchmedia and Savestyles should be correctly used. In this Codepen, the boxes are meant to fade in scroll if the viewport is wider than 1023px but then just appear as blocks without any animations for screen sizes smaller than that. If I start by viewing it as large size, the animations work as expected and then if I shrink the browser down they become non-animated for smaller screens, also as expected. If I then stretch the browser to the larger size again, they appear full opacity until the trigger is reached. It's as if the initial state isn't being calculated by Scrolltrigger again? What am I doing wrong here? Any help would be appreciated. See the Pen RwGwBWO by mattdown2478910 (@mattdown2478910) on CodePen Link to comment Share on other sites More sharing options...
akapowl Posted November 30, 2020 Share Posted November 30, 2020 Hey @mattdown Setting up a media-query in your CSS and using fromTo() tweens instead of your .from()-tweens is already making it work. See the Pen 6d6c4ac513af81a37bf8e0b481bdc2b5 by akapowl (@akapowl) on CodePen 2 Link to comment Share on other sites More sharing options...
mattdown Posted November 30, 2020 Author Share Posted November 30, 2020 Ahh, I see. I must admit, I hadn't tried that yet. Yeah, that works much better. Thanks. 2 minutes ago, akapowl said: Hey @mattdown Setting up a media-query in your CSS and using fromTo() tweens instead of your .from()-tweens is already making it work. 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