Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
maxvia

Parallax effect on footer?

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 7
  • Thanks 1
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

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

  • 4 months later...

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

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.

×