ScrollTrigger: Fixed element to become absolutely positioned towards bottom of viewport

[Duo]

Hi Team Greensock Forums,

 

Great to be back on these forums. Always someone willing to take time out of their day to help you with something you've been banging your head against a wall about for hours haha.

 

I've been having some issues with a fixed element using SmoothScroller and ScrollTrigger.

 

The element itself is an Apply button that is always fixed to the bottom right of the screen. I've put it outside of the main smoothScroller content wrapper to ensure it stays fixed all of the time and is relative to the body.

 

What I'm trying to achieve is the following:

• Apply button fixed and outside of the main scrollSmoother
• When the user is, let's say, 150px from the bottom of the scrollable viewport, I want to get it to change to absolute positioning and then it locks to that position and is no longer fixed
• When the user scrolls back up, it changes back to position fixed and continues to stay fixed as the user scrolls up.

Please find a link to a little CodePen I created for anyone who wants to have a crack ()

 

Any help would be greatly appreciated.

 

Thanks again,

Dayne

See the Pen jOgBmXj by dayneh88 (@dayneh88) on CodePen.

[mvaneijgen]

In this case you want it inside all the wrapper stuff from ScrollSmoother but have all the pinning set by ScrollTrigger. That way you can control the position: fixed, but because ScrollTrigger handles it it works perfectly with ScrollSmoother.

 

Hope it helps and happy tweening! 

 

See the Pen bGXqjKN?editors=1100 by mvaneijgen (@mvaneijgen) on CodePen.

[Duo]

Hi @mvaneijgen,

 

Thank you so much for getting back to me with a wonderful working example.

 

I'm almost there but I'm having a few issues.

• On mobile (real phone, not Google dev tools), the button is always at the bottom and doesn't scroll with the user at all.
• I noticed that in your example you have the trigger happening on .wrapper yet there is no .wrapper div and I get a console error saying that the element can't be found but it still works.
• I changed the trigger to be #wrapper yet that completely breaks things as well.
• I thought it might be because scrollSmoother turns off on touch devices so I enabled that and it still didn't do anything.

Any tips to get this over the line would be greatly appreciated.

 

Thanks,

Dayne

[Rodrigo]

Hi,

 

Because of the way ScrollSmoother works, you can't have fixed elements inside the smooth content element. One option could be reparent the element at a certain point, but that implies moving the element from one part of the DOM to another using JS and that could lead to unexpected behaviour.

 

I think is best to use the approach Mitchel suggested but use the end trigger feature on it:

https://gsap.com/docs/v3/Plugins/ScrollTrigger/?page=1#endTrigger

 

Something like this:

ScrollTrigger.create({
  trigger: ".btn-container",
  start: "top top",
  end: "bottom bottom",
  endTrigger: ".accordions",
  pin: true,
  markers: true
});

Here is a fork of Mitchel's demo:

See the Pen eYqvqJy by GreenSock (@GreenSock) on CodePen.

 

Here is the debug version (no iframes) for better preview on devices:

https://cdpn.io/pen/debug/eYqvqJy

 

Hopefully this helps

Happy Tweening!

[Duo]

HI @Rodrigo,

 

Your suggestion worked perfectly. Took a fair bit of tweaking to get it the way I wanted it but super relieved we were able to find a solution.

 

You've shown once again that the Greensock community truly is one of the greatest on the planet. Always someone willing to take time out of their day to help someone out. Inspiring stuff.

 

Thanks so much again,

Dayne

[Rodrigo]

Thanks for the kind words! 💚