GreenSock: ScrollTrigger Media Queries with matchMedia()

Topics covered in this JavaScript tutorial:

Defining Different Animations for Different Screen Sizes, Fixing Inline Style Contamination Across Media Queries

Exercise Preview

Exercise Overview

In this exercise, you’ll learn how to change ScrollTrigger based on different screen sizes (like we do with media queries in CSS).

Getting Started

1. For this exercise we’ll be working with the GSAP-ScrollTrigger-Multiple folder located in Desktop > Class Files > JavaScript Class. Open that folder in your code editor if it allows you to (like Visual Studio Code does).
2. In your code editor, open index.html from the GSAP-ScrollTrigger-Multiple folder.

3. Preview index.html in a browser.

   • This is the scrolling animation we created in the previous exercise.
   • It looks great when the window is wide, but resize the window to be narrow so the text stacks on top of the photo (and not very tall to simulate a phone size).
   • The scrolling animations still work. They look OK, but could be improved:
     • The text animates very close to the bottom, we’d prefer it to animate a bit higher up in the page.
     • The image takes a long time to finish animating. We’d prefer it to finish earlier to we see the finished image for more time.

4. Leave the page open in the browser at this small size, so you can reload it later.

Using ScrollTrigger.matchMedia() to Define Different Animations for Different Screen Sizes

We want to use essentially the same animations on all screen sizes, but to tweak the settings a bit for smaller screens.

1. In the script tag, add ScrollTrigger.matchMedia() as shown below in bold (with an object {} inside, into which we’ll be adding options).

   <script>
      let sectionImg = document.querySelectorAll('section img');
      let sectionText = document.querySelectorAll('section .text');
   
      ScrollTrigger.matchMedia({});
   
      for(let i=0; i < sectionImg.length; i++) {
   

2. Inside matchMedia(), add the following 2 parameters, which essentially act like media queries in CSS, but these are for our JS!

   ScrollTrigger.matchMedia({
      '(min-width: 600px)': function() {
   
      },
      '(max-width:599px)':function() {
   
      }
   });
   

3. Cut the entire for loop and paste it into both functions, as shown below.

   <script>
      let sectionImg = document.querySelectorAll('section img');
      let sectionText = document.querySelectorAll('section .text');
   
      ScrollTrigger.matchMedia({
      '(min-width: 600px)': function() {
         for(let i=0; i < sectionImg.length; i++) {
   

   Code Omitted To Save Space

         };
      },
      '(max-width:599px)':function() {
          for(let i=0; i < sectionImg.length; i++) {
   

   Code Omitted To Save Space

         };
      }
   });
   </script>
   

4. In the bottom '(max-width:599px)' function, change the start and end values as shown below in bold:

   '(max-width:599px)':function() {
      for(let i=0; i < sectionImg.length; i++) {
   

   Code Omitted To Save Space

         gsap.from(sectionImg[i], {
            scrollTrigger:{trigger:sectionImg[i], start:'top 75%', end:'150px  70%', scrub:1, markers:false}, 
            x:movement, opacity:0
         });
         gsap.from(sectionText[i], {
            scrollTrigger:{trigger:sectionText[i], start:'top 75%', end:'bottom 70%', scrub:1, markers:false}, 
            x:-movement, opacity:0
         });
   

5. Save and switch to the browser.

   • Make sure the window still narrow and short as we previously left it.
   • Reload the page.
   • Scroll through the animations and notice:
     • We think it looks better with the text animation starting slightly higher up.
     • The image animation finishes quicker so you see the finished image for longer (because its end point is now 150px from the top of the photo, instead of the bottom of the photo as it on wider screens).

6. Resize the window wider and notice the images and text disappear! What’s wrong?

   GSAP does all its animation as inline CSS. When resizing the window the inline CSS from one media query is remaining and contaminating the other media. Luckily GSAP has a quick fix.

Fixing Inline Style Contamination Across Media Queries

ScrollTrigger.saveStyles() records the initial inline CSS for the specified elements so that ScrollTrigger can revert them even if animations add inline styles later. All it needs to know is which items you’re animating, and it will save those styles to prevent contamination across media queries.

1. Add the following bold line of code, which will save the styles for the two types of elements we’re animating:

   <script>
      let sectionImg = document.querySelectorAll('section img');
      let sectionText = document.querySelectorAll('section .text');
   
      ScrollTrigger.saveStyles('section img, section .text');
      ScrollTrigger.matchMedia({});
   

2. Save and reload the page in the browser.

   • Scroll through the animation when the window is wide and narrow.
   • Resizing the window no longer creates a problem, and the animations look good at every size now.

   Congrats you’re all done!

   Visit the GSAP Docs tinyurl.com/gsap-matchmedia to learn more about ScrollTrigger.matchMedia()