Jump to content
Search Community

Parallax effect on footer?

maxvia test
Moderator Tag

Recommended Posts

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!! 

Link to comment
Share on other sites

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.

 

  • Like 8
  • Thanks 2
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

 

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.

  • Like 4
Link to comment
Share on other sites

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

  • 4 months later...
  • 1 year later...

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?

Link to comment
Share on other sites

 

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!

 

  • Like 4
Link to comment
Share on other sites

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

  • 3 months later...

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...