MediaQuery to offset ScrollToPlugin

[tomektomczuk 5 Likes (Newbie)]

Hello Everyone,

 

how can I put a different [MEDIAQUERYVALUE] to below ScrollToPlugin function ?

 

function menuScrollToId() {

    // Detect if a link's href goes to the current page
    function getSamePageAnchor (link) {
        if (
            link.protocol !== window.location.protocol ||
            link.host !== window.location.host ||
            link.pathname !== window.location.pathname ||
            link.search !== window.location.search
        ) {
            return false;
        }

        return link.hash;
    }

// Scroll to a given hash, preventing the event given if there is one
    function scrollToHash(hash, e) {
        const elem = hash ? document.querySelector(hash) : false;
        if(elem) {
            if(e) e.preventDefault();
            gsap.to(window, 1, {scrollTo:{y:elem, offsetY: [MEDIAQUERYVALUE]}});
        }
    }

// If a link's href is within the current page, scroll to it instead
    document.querySelectorAll('a[href]').forEach(a => {
        a.addEventListener('click', e => {
            scrollToHash(getSamePageAnchor(a), e);
        });
    });

// Scroll to the element in the URL's hash on load
    scrollToHash(window.location.hash);
}

 

[ZachSaucier 7,162 Likes (Superhero)]

Hey tomektomczuk. What do you mean [MEDIAQUERYVALUE]? Can you please create a minimal demo that exemplifies your issue?

 

[tomektomczuk 5 Likes (Newbie)]

For example, How can I use Media Query to set 90,120,160 as a variable that depend on screen size? 

 

"(min-width: 1280px) and (max-width: 1919px)"
gsap.to(window, 1, {scrollTo:{y:elem, offsetY: 90}});

"(min-width: 1920px) and (max-width: 2559px)"
gsap.to(window, 1, {scrollTo:{y:elem, offsetY: 120}});

"(min-width: 2560px)"
gsap.to(window, 1, {scrollTo:{y:elem, offsetY: 160}});

 

Is that more clear? 

[ZachSaucier 7,162 Likes (Superhero)]

Use a function:

gsap.to(window, 1, {scrollTo:{y:elem, offsetY: () => {
  // Lots of ways of doing it in the function - using innerWidth or matchMedia
  // just make sure to return the value you need for the given viewport
  
  // for example
  return innerWidth < 2560 ? 
    innerWidth < 1920 ? 
      innerWidth < 1280 ? 0 : 90
    : 120 
  : 160
}}});

 

[tomektomczuk 5 Likes (Newbie)]

2 hours ago, ZachSaucier said:

Use a function:

gsap.to(window, 1, {scrollTo:{y:elem, offsetY: () => {
  // Lots of ways of doing it in the function - using innerWidth or matchMedia
  // just make sure to return the value you need for the given viewport
  
  // for example
  return innerWidth < 2560 ? 
    innerWidth < 1920 ? 
      innerWidth < 1280 ? 0 : 90
    : 120 
  : 160
}}});

 

Zach this doesn't work for me

[ZachSaucier 7,162 Likes (Superhero)]

It's untested  If you'd like help debugging please make a minimal demo.

[tomektomczuk 5 Likes (Newbie)]

59 minutes ago, ZachSaucier said:

It's untested  If you'd like help debugging please make a minimal demo.

See the Pen ZEWaQPR by timovega (@timovega) on CodePen

[ZachSaucier 7,162 Likes (Superhero)]

I forgot that offsetY can't handle functional values (most properties in GSAP can), so just run the same code before the tween and use a variable instead:

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

 

But I might use matchMedia instead of the innerWidth.