Add Position Fixed On Window Resize For Smaller Screen And Remove For Larger Screens

[emilychews 19 Likes (Newbie)]

Hi,

 

I have a 'Next Post' button on a site that links to the next post in chronological order. On mobile I want to change the position to fixed so it stays in the bottom of the screen after you scroll past the main text. 

 

The problem I'm having is when I reduce the window size down, this does indeed happen, but when I resize the window back up the button disappears. I have a JS 'resize' event on the function that fires the GSAP scroll trigger so am a bit confused what's happening?

 

Any help would be wonderful.

 

See the Pen YzqQMwP by emilychews (@emilychews) on CodePen

[Ihatetomatoes 323 Likes (Leader)]

Hi Emily,

I have some suggestions for improvements for your demo.

 

Issues

First of all you don't need GSAP to change the position of your element, you can simply specify this in the stylesheet.

 

.next-post {
  ...
}

@media screen and (max-width: 579px) {
  .next-post {
    position: fixed;
    visibility: hidden;
    ...
  }
}

Also you don't need the resize event listener, in your demo you are creating a new ScrollTrigger every-time the user resizes the window. Try slowly resize on the smaller screens and you will see multiple ScrollTrigger markers being added to the DOM.

 

 

Solution

Use ScrollTrigger matchMedia, this is a great way to specify a breakpoint in your JS file and create trigger only for that breakpoint.

 

ScrollTrigger.matchMedia({
  // small screen that matches your CSS break point
  "(max-width: 579px)": function () {
    // setup animations and ScrollTrigger if the link exists
    if (nextPost) {
      // simple tween, you don't need a timeline
      gsap.to(nextPost, {
        duration: 0.5,
        autoAlpha: 1,
        scrollTrigger: {
          trigger: ".column",
          toggleActions: "restart pause reverse pause",
          start: "bottom 80%",
          // specify which element should trigger the end of your animation
          endTrigger: "main",
          end: "bottom 100%",
          scrub: true,
          markers: true
        }
      });
    }
  },
  // larger screen
  "(min-width: 580px)": function () {
    // remove any inline styles from the nextPost button
    // I thought this would be done automatically by ScrollTrigger but it didn't
    gsap.set(nextPost, { clearProps: "all" });
  }
});

Use autoAlpha to show/hide your link. GreenSock's autoAlpha combines opacity and visibility in one handy property. If you only use opacity, the link is not showing to the user, but is still clickable in the browser and might result in users accidentally clicking on it.

 

In the large breakpoint I did use the clearProps to remove all inline styles set in the smaller breakpoint.

gsap.set(nextPost, { clearProps: "all" });

 

Here is the demo

See the Pen VwaWojw by ihatetomatoes (@ihatetomatoes) on CodePen

 

Feel free to adjust the ending values.

 

Cheers

Petr

[Ihatetomatoes 323 Likes (Leader)]

It would be great if anyone from the @GreenSock team could clarify why the tween hasn't been automatically cleared when the user resizes to the larger breakpoint? 

 

I have also tried to return a function in the media query to kill that tween, but the result was the same. The inline styles were still on the link, making it hidden on large breakpoints.

 

ScrollTrigger.matchMedia({
  "(max-width: 579px)": function () {
    let tween;
    if (nextPost) {
      tween = gsap.to(nextPost, {..., scrollTrigger: {...} });
    }
    return function() {
      tween && tween.kill(); 
      console.log(tween);
      console.log('trying to kill this tween');
      // other cleanup code can go here. 
    };
  }
});

Any ideas?

[Ihatetomatoes 323 Likes (Leader)]

Ok, I have just tried to use the saveStyles and it does the trick.

 

ScrollTrigger.saveStyles(".next-post");

This will save the styles of .next-post (no inline styles) and revert back to this, when the user resizes back to a large breakpoint.

 

Updated demos is here:

 

See the Pen VwaWojw by ihatetomatoes (@ihatetomatoes) on CodePen

[emilychews 19 Likes (Newbie)]

Hey, thanks Petr for such a brilliant answer. I'm not back off vacation / in front of a computer until Wednesday, but wanted to say thank you in advance for taking the time to answer.