Pin last section and reveal on scroll

[Volt 22]

Hello everyone,

 

I want to replicate the effect on the sites

https://dashdigital.studio/,

https://joinclyde.com/

 

where the footer is pinned at the end, and the previous sections scroll to reveal it.

Similar to this pen - 

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

 but not for each section.

 

It seems the rest of the site is in one wrapper and the footer is in a different wrapper. How do I translate this fore wrapper to reveal the footer behind. I'm using gsap scrollsmoother.

See the Pen qBxvjGy?editors=1000 by voltmeup (@voltmeup) on CodePen

[GreenSock]

Here's one approach you could use: 

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

[Volt 22]

Thanks a lot, Jack

[SarthakNeupane]

On 6/30/2022 at 1:50 AM, GreenSock said:

Here's one approach you could use: 

 

This approach creates an unexpected bug on mobile devices. If we scroll it all the way to the bottom instantly, the footer section is still some certain pixels above the bottom, and snaps to the bottom immediately. Then everything does become smooth. However, it does create an unpleasant experience. 

 

Is there a reason? Or is there any other approach for the same effect. (Just normal scroll, not needed the smooth scroll)

 

I am sorry, I am bringing and old thread into discussion again after a long while. I am currently looking for the same effect, tried various ways, couldn' t make it work. This did work perfectly on desktop/laptop devices. But that bug on mobile devices again made me scratch my head. 

On 6/30/2022 at 1:50 AM, GreenSock said:

 

 

[Cassie]

Quote

Is there a reason? Or is there any other approach for the same effect. (Just normal scroll, not needed the smooth scroll)

Definitely, There's a lot to explain here.

Viewport heights and height measurements/pinning in general is quite tricky on mobile because of the browser resizing. That's why we have different viewport units now.

https://www.bram.us/2021/07/08/the-large-small-and-dynamic-viewports/#large-viewport

And ignoreMobileResize

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.config()

---

Bearing that in mind, not all solutions that work for desktop work for mobile. Which is a ok because we have media queries and matchMedia to utilise.

https://greensock.com/docs/v3/GSAP/gsap.matchMedia()

Before rolling a solution, it's also worth mentioning that this solution is specific to ScrollSmoother, where there are limitations around position fixed, it also looks like this user had markup limitations too.

If you don't have markup limitations and you're not using ScrollSmoother, then this isn't the right solution for you. You don't even need GSAP for this, you can just do it with CSS

https://css-tricks.com/the-slideout-footer/

Hope this helps. If the above solution doesn't work for you for some reason, let me know and we can see how best to achieve it with GSAP.

Good luck!

[SarthakNeupane]

Wow, Thanks a lot. Solved the issue in a flash. Didn't know it was possible with just css. Initially viewed it as a pinned section, and immediately thought of the scrolltrigger "pinning", and just kept my head rolling around gsap methods. 

Been using gsap for quite a while now. Absolutely love it. I've come to the forums several times for help, but never had any unresolved questions. Appreciate a lot for the whole team to keep this forums alive. Don't think there's any other forums, this helpful. 

 

Much love....

 

[Cassie]

Ah that's lovely to hear thank you 💚