Jump to content
Search Community

Clear inline styles with viewport change

JamesGrubb test
Moderator Tag

Recommended Posts

Hello, hope you are all staying well. I am applying a timeline at a particular matchMedia size and attempting to remove it when the matches boolean returns false. So from the Codepen, there is a frame that animates on scroll at 'min-width: 700px' . For some reason (my terrible coding) it animates twice but it still animates on the smaller viewport. Any ideas?

See the Pen ZEbXKoO by limitedunlimited (@limitedunlimited) on CodePen

Link to comment
Share on other sites

Hey James.

 

I recommend using two timelines: one for mobile and one for desktop. Then if the breakpoint is reached you clear the styles on the elements which were affected and switch out which timeline is being progressed through. Adding new tweens to old timelines each time is... messy.

  • Like 1
Link to comment
Share on other sites

It does. I don't really understand your approach though. I would just change the timeline's progress to 1 on mobile unless there's an issue with that:

See the Pen OJyxvKb?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Make sure to not add to the timeline each time the media query is changed. In general you should setup timelines at the start and just use control methods to affect them inside of event listeners. More on that in my article on animating efficiently

  • Thanks 1
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...