Jump to content
Search Community

How do I make my media queries in GSAP exclusive?

IbraheemHaseeb test
Moderator Tag

Go to solution Solved by OSUblake,

Recommended Posts

Hello there,

 

So, I wrote this code for different screen sizes and it seems that as I go to a lower screen, multiple queries get called which causes glitches in my code instead of calling only one query. Kindly let me know how can I make these queries mutually exclusive such that they don't mess with each other.

 

You can see there is a white box in the code and when I scroll down it works fine but scrolling up glitches it. How do I stop other queries to get called?

See the Pen jOBqLow?editors=1000 by ibraheemhaseeb7 (@ibraheemhaseeb7) on CodePen

Link to comment
Share on other sites

  • Solution

The same way you would in CSS.

 

ScrollTrigger.matchMedia({
  "(min-width: 961px)"() {
    ...
  },
  "(min-width: 480px) and (max-width: 960px)"() {
    ...
  },
  "(max-width: 479px)"() {
    ...
  },
})

 

And check out this post on how to DRY up your code.

 

 

 

 

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