Footer animation

[Trabajador]

Hello there! Help me please!
How to make the footer move out from under the page

See the Pen jOdMRBR by trabajador-the-flexboxer (@trabajador-the-flexboxer) on CodePen

[mvaneijgen]

Hi @Trabajador

 

Is this what you're looking for? I didn't really get your question and there was a lot going on in your demo, I've removed all unnecessary code, so that that doesn't interfere with the setup. Feel free to add it back in if the effect is working correctly. 

 

I've added a new element to your setup called .trigger and have set the orange and the purple elements to be stack on top of each other (with CSS). I've add some text, otherwise you would not see what is happening. I've removed your animEl.offsetHeight, because when I logged it all I ever got was 0, so something was going wrong in your logic. I now get the height of the .footer element, which works. I then pin the whole .trigger element when it reached the top of the browser and pin it until footer.offsetHeight hits the top of the browser again. 

 

I've also removed your .set(), because if we use a .from() tween instead of a .to() tween, GSAP will handle it automatically! I've also copied your separate ScrollTrigger to the timeline itself, personally I find that more readable and easier to understand if you have multiple ScrollTriggers on the page.

 

If you need further assistance please try to be more descriptive what element should do what and show us what you've already tried. Hope it helps and happy tweening! 

 

See the Pen VwgKOYB?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[Trabajador]

@mvaneijgen Thanks for your help!
I'll try to describe it in more detail
I need the main site to be on top of the footer, and when the scroll reaches the footer, the footer is shown from under the main site and we can scroll to the end. Plus I need to take into account that the main footer can be without upper footer

[The Old Designer]

You don't actually need GSAP unless you want to animate it, its simple CSS

 

Create a div container for the content and give it a bottom margin of (for example) 230px; then below that add the footer with position of fixed, left: 0, width:100% and a z-index of -10.

 

You can then animate the content div to for example scale downwards a little as it reached the end of the page to create a nice effect

[Trabajador]

@The Old Designer 
Thx I know, but what to do if the footer is larger than the screen height?

[mvaneijgen]

Setup needs to be the same as my previous example, but you set it so the element is aligned to the bottom. 

 

Check it out without GSAP, this is what the layout looks like. 

 

See the Pen MWLjdBv?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

And here with GSAP and ScrollTrigger. Hope it helps and happy tweening! 

 

See the Pen RwvowBo?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[Trabajador]

See the Pen RwvowBo by mvaneijgen (@mvaneijgen) on CodePen

 

in this example there is something similar, but I need the main site to be on top of the footer, how can I swap them, that is z-index of the main site should be larger and it should overlap the footer, when start: "bottom bottom", the main site should continue to scroll up and the footer should appear from underneath it

[GreenSock]

If I understand your goal correctly, here's a much more simplified way of accomplishing it (and I couldn't help but make it a little more pretty with the new GSAP colors): 

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

 

Is that what you want? 

[Trabajador]

@GreenSock
Thank you Sir, but no. In this example, let's pretend that the footer is the main site and the main site is the footer, it's like we've turned the browser upside down so I want the main site to scroll above the footer.

 

See the Pen RwvowBo by mvaneijgen (@mvaneijgen) on CodePen

[GreenSock]

Yes, isn't that exactly what my demo showed? What am I missing?: 

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

 

The main site is on top of the footer, so as you scroll up it reveals the [pinned] footer. Right? 

[The Old Designer]

I thought that's what I did with just CSS as well?  If the footer is fixed to the bottom and higher than 100vh (as I think you ,mentioned above) surely you are going to have a problem with the content at the top of the footer being hidden?

[Trabajador]

@GreenSock
Thank you a lot!

[Trabajador]

I update my first solition, how i can improve it because scrolling on a Mac OS is kind of jerky

 

[GreenSock]

3 hours ago, Trabajador said:

I update my first solition, how i can improve it because scrolling on a Mac OS is kind of jerky

I'm not seeing any problems. What device/browser? Have you tried setting ScrollTrigger.normalizeScroll(true)? And I'm not sure why you took a completely different approach than the solution I offered. Why are you doing it that way instead of a simple ScrollTrigger that's pinned? 

[Trabajador]

I'm using lambdatest, but it seems it will work the same on a physical device. I think this is due to different scrolling mechanics. Yes, I tried to add ScrollTrigger.normalizeScroll(true), then on Windows the scrolling becomes the same as on Mac OS. In your last example, the main site overlaps the top of the footer if the footer is taller than the screen height. In my example, the upper footer is shown first, and then the rest of the footer.

https://prnt.sc/ak00tYcoRnVb

[GreenSock]

3 hours ago, Trabajador said:

I think this is due to different scrolling mechanics.

Yes, most browsers handle scrolling on a separate thread that isn't synchronized with the main (JavaScript) thread. That's what normalizeScroll() helps with, forcing the scrolling to be done on the main thread via JS. 

 

This is also one of the reasons I suggested my original approach that uses position: fixed because that won't be dependent on moving the element on every scroll event to fake the pinning - it persists the whole time the ScrollTrigger is active and doesn't need any JS to run to keep it pinned. You never answered me about why you took a totally different approach than the one I suggested. 

 

3 hours ago, Trabajador said:

In your last example, the main site overlaps the top of the footer if the footer is taller than the screen height. In my example, the upper footer is shown first, and then the rest of the footer.

It seems like we're somehow missing each other here. I'm very confused about what you're saying - does my solution work or not? From what I understand, it's doing exactly what you requested, but you keep bringing up your old (incorrect) demo that layers things wrong, as if you're still not using the solution(?) 

 

If you need help, please post a minimal demo that uses the solution provided and be EXPLICITLY clear about what precisely isn't working the way you'd expect and how we can reproduce the problem. For example, "here's my CodePen fork with your solution implemented, but if you scroll down to the footer it still shows up on top of the main body...why?" 

[Trabajador]

29 minutes ago, GreenSock said:

This is also one of the reasons I suggested my original approach that uses position: fixed because that won't be dependent on moving the element on every scroll event to fake the pinning - it persists the whole time the ScrollTrigger is active and doesn't need any JS to run to keep it pinned. You never answered me about why you took a totally different approach than the one I suggested. 

I gave you the answer

 

29 minutes ago, GreenSock said:

It seems like we're somehow missing each other here. I'm very confused about what you're saying - does my solution work or not? From what I understand, it's doing exactly what you requested, but you keep bringing up your old (incorrect) demo that layers things wrong, as if you're still not using the solution(?) 

Just compare

See the Pen jOdMRBR?editors=0010 by trabajador-the-flexboxer (@trabajador-the-flexboxer) on CodePen

with

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

, why is my incorrect implementation working the way I need it, but in your demo the main site overlaps part of the footer with part of the text in which it is hard to read

Your demo - My demo

 

Visually, my solution is more suitable for me, how can I achieve this result with the right approach.
Thank you very much for your help, I really appreciate your attention!

[GreenSock]

23 minutes ago, Trabajador said:

I gave you the answer

Where? Instead of just telling me you gave me the answer (obviously I don't see it, so this is very unhelpful), please explain. 

 

24 minutes ago, Trabajador said:

Just compare

So you just want the overlap to be defined by that child element height (the text)? Simple! Just change the selector in my demo to point at that instead of the whole footer: 

See the Pen qBgqGNV?editors=1010 by GreenSock (@GreenSock) on CodePen

 

Is that what you want? 

[Trabajador]

4 hours ago, Trabajador said:

In your last example, the main site overlaps the top of the footer if the footer is taller than the screen height.

Here's my answer, I also showed how it looks visually in screenshots

39 minutes ago, Trabajador said:

Your demo - My demo

I have pages without an upper footer, what should I do in this case?

11 minutes ago, GreenSock said:

So you just want the overlap to be defined by that child element height (the text)? Simple! Just change the selector in my demo to point at that instead of the whole footer: 

[GreenSock]

4 minutes ago, Trabajador said:

I have pages without an upper footer, what should I do in this case?

That's logic stuff you'll need to handle. It should be quite easy to provide a fallback. For example: 

let footer = document.querySelector(".footer-inner-content") || document.querySelector(".footer");

 

If you need help, please provide a minimal demo that clearly illustrates the issue and we'd be happy to take a look and answer any GSAP-specific questions. 

[Trabajador]

@GreenSock
Thanks a lot!

[Trabajador]

Could you help me, I need that if there is an upper footer, only it will be hidden under the site-main

 

[GSAP Helper]

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or Stackblitz that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[Trabajador]

My message is not showing completely i dont know why - https://prnt.sc/bz8LfCvu4ZJl

[GreenSock]

10 hours ago, Trabajador said:

Could you help me, I need that if there is an upper footer, only it will be hidden under the site-main

I have already answered this question earlier. Just change your selector text. You were pointing it at the entire footer. Feel free to point it at whatever element you want: 

See the Pen rNPjGow?editors=1010 by GreenSock (@GreenSock) on CodePen