Jump to content
Search Community

Disabling ScrollTrigger on mobile with mediaMatch()

Guest
Moderator Tag

Recommended Posts

Hi everybody!

 

I've been reading all the threads in the search results and reviewing documentation but I'm just really new to this, green you might say. 

 

I'd like to disable the left/right animation on mobile or if it's easier, disable all of them if I can't isolate them.

 

It might look really stupid reading what I've done below but I'd love some help please if possible. I just don't know what I'm doing. 

 

Thanks in advance!

 

ScrollTrigger.saveStyles(".gs_reveal_fromLeft, .gs_reveal_fromRight, .gs_reveal");

ScrollTrigger.matchMedia({
	
  // desktop
  "(min-width: 800px)": function() {

//Reveal Animations Scrolltrigger
function animateFrom(elem, direction) {
  direction = direction | 1;
  
  var x = 0,
      y = direction * 100;
  if(elem.classList.contains("gs_reveal_fromLeft")) {
    x = -100;
    y = 0;
  } else if(elem.classList.contains("gs_reveal_fromRight")) {
    x = 100;
    y = 0;
  }
  gsap.fromTo(elem, {x: x, y: y, autoAlpha: 0}, {
    duration: 1.25, 
    x: 0,
    y: 0, 
    autoAlpha: 1, 
    ease: "expo", 
    overwrite: "auto"
  });
}

  },

  // mobile
  "(max-width: 799px)": function() {
    return function() {
      gsap.kill(); 
      // other cleanup code can go here. 
    };
  }

  },
	
  // all 
  "all": function() {
    function hide(elem) {
      gsap.set(elem, {autoAlpha: 0});
    }
    
    document.addEventListener("DOMContentLoaded", function() {
      gsap.registerPlugin(ScrollTrigger);
      
      gsap.utils.toArray(".gs_reveal").forEach(function(elem) {
        hide(elem); // assure that the element is hidden when scrolled into view
        
        ScrollTrigger.create({
          trigger: elem,
          onEnter: function() { animateFrom(elem) }, 
          onEnterBack: function() { animateFrom(elem, -1) },
          onLeave: function() { hide(elem) } // assure that the element is hidden when scrolled into view
        });
      });
    });
  }
	); 

 

See the Pen poEobje by bleenwithcream (@bleenwithcream) on CodePen

Edited by Guest
Added Codepen
Link to comment
Share on other sites

 

Yeah, I don't think it would work the way you set it up, because the creation of your ScrollTriggers is inside a function, that in your script only gets triggered in the ScrollTrigger's callbacks, but since there is no ScrollTrigger to begin with, the function to create the ScrollTrigger will never get fired. See the problem?

 

Instead of wrapping all that code inside the .matchMedia, you should only wrap the creation of the ScrollTrigger.

Also, I think, you'd probably only want to apply the .saveStyles on the width below 800px, because otherwise, on every resize/refresh above 800px, the content would become hidden over and over again.

 

 

 

In following demo, I also added a media-query in CSS for the .gs_reveal

 

.gs_reveal {
  opacity: 1;
  visibility: visible;
  transition: transform 0s;
}

@media only screen and (min-width: 800px) {
  .gs_reveal {
    opacity: 0;
    visibility: hidden;
    transition: transform 0s;
  }
}

 

 

 

and in the JS a check for window-with on DOMContentLoaded, to make sure the hide(elem) function only is being triggered above 800px

 

  var	wideScreen = window.matchMedia("(min-width: 800px)");
  var	narrowScreen = window.matchMedia("(max-width: 799px)");
        
    if(wideScreen.matches) {
          hide(elem); // assure that the element is hidden when scrolled into view above 800px screen-width
    }
    else {
          unhide(elem); // assures that the element is visible when scrolled into view below 800px screen-width
    }

 

 

All in all this works as probably intended, but note, that all this is not trivial to wrap your head around, if you don't know what you are doing.

I myself, am not sure, I am doing everything in the most  suitable way there.

 

It's good to at least know the basics of how functions do work and general JS, before you dive deeper into animations like those.

 

See the Pen 03e5397325da0adf151499250a4a1942 by akapowl (@akapowl) on CodePen

 

 

 

Hope this helps get you on track, though.

 

Cheers,

Paul

 

  • Like 2
Link to comment
Share on other sites

I appreciate your help, it's a lot easier to know where I went wrong with your break down. My JS is very limited and consists of stripping things and tinkering to see if they break or not. I'm finishing off a custom WP build and trying my to finesse the site without installing plugins.

 

Once again, thank you so much!

 

You'll be hearing from me soon. 😏

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