Jump to content
Search Community

Clear timeframe with window.matchMedia

JamesGrubb test
Moderator Tag

Recommended Posts

Hello, Im trying to prevent a timeline from affecting the visibility of my nav item at wider screens (min-width: 30em) I was trying with 

tl.clear(window.matchMedia('min-width: 30em'))
 

as I thought clear() took a boolean value?

 

I then tried it in an if statement but no joy. Any ideas please?

See the Pen QWNvPWa?editors=0111 by limitedunlimited (@limitedunlimited) on CodePen

Link to comment
Share on other sites

 

I am not exactly sure, what it is, you want to achieve, but you can always use codepens Debug view and the console of your Dev tools to see, what part of your code might be giving issues.

 

I just did so, and noticed, there was a '}' missing in your ScrollTrigge and that was causing errors in your code.

 

After adding it in, the toggle toggled below that width as expected and didn't togle on wider browser width. Is that what is supposed to happen?

 

 

 

See the Pen 85f0561e6c2e9f49b88c8368a292020e by akapowl (@akapowl) on CodePen

 

 

  • Like 3
Link to comment
Share on other sites

 

Thanks for looking in to this. In the current codepen my last two lines of javascript are intended to clear the timeline when the the window matches the query but it is currently preventing the timeline from working at all.

 

When you remove the if statement, at narrow viewport i am animating an mask-imge to reveal the nav on mobile, unintentionally thought, the animation is affecting the nav's opacity at wider viewports (min-width: 40em).
 

Im trying to clear the timeline for wider viewports. Hope that makes sense? 

 

 

 

Link to comment
Share on other sites

I'm fuzzy on what exactly you want, but I noticed:

  1. Your code was malformed (as @akapowl mentioned)
  2. You had if (!this.tl && window.matchMedia('max-width: 39em')) but you're missing ".matches" at the end, like if (!this.tl && window.matchMedia('max-width: 39em').matches)
  3. There are logic issues in the function - this.tl could be null initially and you're attempting to call reversed() on it which will of course throw an execution error. 

I'm not sure if this is what you want, but here's a quick fix of what you posted: 

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

  • Like 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...