maxvia Posted November 27, 2020 Share Posted November 27, 2020 Hi guys, I was looking at this website https://rino-pelle.com/ and there website's footer. I am quite confused on the way they make their footer appear. I am not sure what is happening there, is it some parallax effect or some pinning on the whole website except the footer? On the following simple example how would you do to have this type of effect? import React from "react" import gsap from 'gsap' const IndexPage = () => { return ( <div > <Intro /> <Description /> <Conclusion /> <Footer /> </div> ) } export default IndexPage Any tips is appreciated ! Thank you!! ezgif.com-gif-maker.mp4 Link to comment Share on other sites More sharing options...
akapowl Posted November 28, 2020 Share Posted November 28, 2020 Hey @maxvia I am no react guy, so I can not tell you on how to implement this with react, but I can show you one example of how to achieve this sort of effect. ***** Please take note of the Edit added to the bottom of this post with regard to the setup ***** It is pretty straight to get there with ScrollTrigger and this being all the JS you need for this version: gsap.set('section.footer-container', { yPercent: -50 }) const uncover = gsap.timeline({ paused:true }) uncover .to('section.footer-container', { yPercent: 0, ease: 'none' }) ; ScrollTrigger.create({ trigger: 'section.conclusion', start: 'top top', end: '+=75%', animation: uncover, scrub: true, }) in combination with these CSS keypoints (related to the JS) section { width: 100vw; height: 100vh; } footer { height: 75vh; width: 100vw; overflow: hidden; } section.footer-container { height: 75vh; } in this possible HTML markup <section class="intro"></section> <section class="description"></section> <section class="conclusion"></section> <footer class="footer"> <section class="footer-container"> </section> </footer> What is basically going on here (as well as in on the page you linked to, I think) is that from a certain point on, the initially on the y-axis set up .footer-container is being animated downwards. But since the amount it is being animated down is less, than the amount of the scroll that is moving things up, it appears, that it is simply just scrolling slower than the rest from further down. Hope this explenation somehow makes sense to you. Here is a very basic demo See the Pen 51ad2dfcf2ff34e11c1f7fa8f6be11bf by akapowl (@akapowl) on CodePen Here is one in combination with smooth-scrollbar for the smooth-scrolling effect similar to what they have on their site See the Pen e10646738ea5ff087a5f27e2960beb8a by akapowl (@akapowl) on CodePen And here is one with extra edge-easing ( when coming closer to the top / bottom of the page ) applied to smooth-scrollbar, because to me it feels, they have something like that on their page, too See the Pen a229bb24e2d94079ccc8e874639aa79f by akapowl (@akapowl) on CodePen Very neat effect you chose there. It was fun building those demos out. Hope they help you. Cheers, Paul Edit: I updated all of the demos above. The way I had things set up initially ( with the start of the ScrollTrigger set to 'top top' ) this would only have worked, if the section before the footer would have had a height of 100vh. This isn't neccessary at all though, if you simply set the start of the ScrollTrigger to 'bottom bottom' instead. The section before the footer can have any height now. 8 2 Link to comment Share on other sites More sharing options...
maxvia Posted November 28, 2020 Author Share Posted November 28, 2020 Hi @akapowl, thank you so much for your detailed answer as well as all your demos!!! it's awesome. So far I have just incorporated the first version with gsap only because I am not familiar with smooth scrolling and never worked with this library as well. I will look at smooth scrolling this coming week because even though gsap makes it super nice and really easy, smooth scrolling makes this effect even neater. Once this is done I will try to upload a pen for all the react users. Once again thank you for your time and explanations! Maxime 1 Link to comment Share on other sites More sharing options...
akapowl Posted November 28, 2020 Share Posted November 28, 2020 Yeah, I also think, smooth-scrolling is what really makes effects like these shine. And in this scenario, since it is at the bottom of the page, the easing on the edges does its part, too. Just wanted to make sure, that I am not advertising for smooth-scrolling here, though. Be aware, that there are always downsides to smooth-scrolling, no matter which approach you choose to achieve it. And depending on which approach you choose, the pitfalls you might encounter, may vary. Nonetheless; since it takes an extra plugin for smooth-scrollbar to run with easing on the edges, here is another demo with locomotive-scroll instead, which appears to have the edge-easing included. This still uses v3.6.1 of locomotive-scroll though, since the latest versions seem to have some problems sometimes, when grabbing the scrollbar-thumb to move up and down the page. See the Pen 8fbf86569ba2792c08939838608a8003 by akapowl (@akapowl) on CodePen Happy Scrolling. Edit: '...the latest versions seem to have some problems sometimes, when grabbing the scrollbar to move up and down the page.' Now that I mentioned that, I noticed some of that beheviour in the demo I just posted, too, depending on where you grab the scrollbar-thumb. Just double checked on pages, that use locomotive-scroll but not ScrollTrigger, and they show the same behaviour. So this appears to not be related to the combination with ScrollTrigger whatsoever, but solely to locomotive-scroll itself. 4 Link to comment Share on other sites More sharing options...
cokhinganha Posted November 29, 2020 Share Posted November 29, 2020 14 hours ago, maxvia said: Hi @akapowl, thank you so much for your detailed answer as well as all your demos!!! it's awesome. So far I have just incorporated the first version with gsap only because I am not familiar with smooth scrolling and never worked with this library as well. I will look at smooth scrolling this coming week because even though gsap makes it super nice and really easy, smooth scrolling makes this effect even neater. Once this is done I will try to upload a pen for all the react users. Once again thank you for your time and explanations! Maxime Thanks for your question since this is also my current problem. Now I get the answer! Link to comment Share on other sites More sharing options...
maxvia Posted November 29, 2020 Author Share Posted November 29, 2020 Awesome ! Thanks a lot @akapowl. Works like a charm for my footer but now is messing up with some of my animations using scrolltrigger in other components but thank you! Link to comment Share on other sites More sharing options...
dasac Posted April 26, 2021 Share Posted April 26, 2021 Awesome, thanks for your response. Not working to my case, but I think it helps in the future. Link to comment Share on other sites More sharing options...
Saad Bazaz Posted June 17, 2022 Share Posted June 17, 2022 Hey, newbie here (just created an account to comment here). @akapowl I used your demo for a footer without smooth-scrolling and it worked great! But then I integrated Locomotive Scroll with it (Which I am already using in the project). It kinda breaks the animation. How can we incorporate Locomotive Scrolling instead of GSAP Scrolling? upload.mp4 Link to comment Share on other sites More sharing options...
akapowl Posted June 17, 2022 Share Posted June 17, 2022 Hello Saad. Welcome to the forum. None of the various demos above use some sort of GSAP integrated smooth-scrolling. And actually there is a demo above, using locomotive-scroll - it should have everything you need. Also please keep in mind that locomotive-scroll is not a GreenSock product, so support for it is not really offered in this forum. See the Pen 8fbf86569ba2792c08939838608a8003 by akapowl (@akapowl) on CodePen And if you're having problems using locomitove-scroll with ScrollTrigger altogether, you should have a look at the .scrollerProxy() documentation page - it contains an example for how to use both of them together. https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.scrollerProxy() See the Pen zYrELYe by GreenSock (@GreenSock) on CodePen As mentioned, locomotive-scroll is not a GSAP product though - so maybe you are interested in GSAP's solution for smooth-scrolling, ScrollSmoother - which is a plugin for Shockingly Green Club Members and above. https://greensock.com/scrollsmoother/ We'd be happy if you considered joining the club! 4 Link to comment Share on other sites More sharing options...
Saad Bazaz Posted June 18, 2022 Share Posted June 18, 2022 Oki first off... I wasn't expecting an answer so quick 😮 Went to sleep tired and broken. This forum is quite the lifesaver. Second, thanks @akapowl for the demo and the explanation. Absolute legend. This clears out a lot of stuff for newcomers. I'm glad I chose GSAP! Since I'm having fun with Locomotive so far, I'll keep going at it until I find a breaker. I've incorporated your explanation and demo into the landing site I'm building for my startup... and it looks beautiful! Nextjs + GSAP + Locomotive + Magnetic Mouse + Grained.js ---------> https://landing-grayhat.vercel.app Still under development and needs optimization (lags a bit). Will stay up-to-date with the forum to resolve that Link to comment Share on other sites More sharing options...
Karol Posted October 13, 2022 Share Posted October 13, 2022 I make som modifications for demo above to use GSAP ScrollTigger & GSAP ScrollSmother (by the way- sorry but this is my first post on this forum and i don't know why pen is duplicated when i just paste link ) See the Pen mdLaqgo by Karolsz (@Karolsz) on CodePen See the Pen mdLaqgo by Karolsz (@Karolsz) on CodePen Link to comment Share on other sites More sharing options...
GreenSock Posted October 14, 2022 Share Posted October 14, 2022 Welcome to the forums, @Karol! And thanks for being a Club GreenSock member. 💚 Did you have a question or were you just sharing your fork in case it helps someone else? Link to comment Share on other sites More sharing options...
Karol Posted October 14, 2022 Share Posted October 14, 2022 46 minutes ago, GreenSock said: Welcome to the forums, @Karol! And thanks for being a Club GreenSock member. 💚 Did you have a question or were you just sharing your fork in case it helps someone else? Thank, no not yet. I just share i case to help someone. I just start work with GreenSock. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now