Olivier Larose

May 21, 2024

Beginner

Short

Sticky Footer

How to Make a Sticky Footer Reveal Effect using React and CSS

A website tutorial featuring a sticky footer animation with a reveal effect, made with position fixed and sticky using React and CSS.

Live Demo Source code

Creating the Project

Let's start the project by creating a Next.js application. We can do that by running npx create-next-app@latest client inside of a terminal.

We will use the Lenis Scroll for the smooth scrolling, so we can run npm i lenis.

Setting up the Project

Here I'm just creating the basic block of the sticky footer:

A small text introduction (mimicky the content of a page)
A smooth scroll using the Lenis library

page.js

componen...

1
'use client'
2
import Footer from "@/components/Footer1";
3
// import Footer from "@/components/Footer2";
4
import Intro from "@/components/Intro";
5
import { useEffect } from "react";
6
import Lenis from 'lenis';
7

8
export default function Home() {
9

10
  useEffect( () => {
11
    const lenis = new Lenis()
12

13
    function raf(time) {
14
      lenis.raf(time)
15
      requestAnimationFrame(raf)
16
    }
17

18
    requestAnimationFrame(raf)
19
  }, [])
20

21
  return (
22
    <main>
23
      <Intro />
24
      <Footer />
25
    </main>
26
  );
27
}

A Basic Footer:

componen...

1
import React from 'react'
2
import Content from './Content';
3

4
export default function Footer() {
5
  return (
6
    <div>
7
      <Content />
8
    </div>
9
  )
10
}

We should have something like this:

Method 1

This is the first method of creating a sticky footer. All we have to do is use a mix of the position fixed and the CSS clip-path.

components/Footer1.jsx

1
import React from 'react'
2
import Content from './Content';
3

4
export default function Footer() {
5
  return (
6
    <div 
7
      className='relative h-[800px]'
8
      style={{clipPath: "polygon(0% 0, 100% 0%, 100% 100%, 0 100%)"}}
9
    >
10
      <div className='fixed bottom-0 h-[800px] w-full'>
11
        <Content />
12
      </div>
13
    </div>
14
  )
15
}

The only downside here is we have to specify a height for the footer.

We should have something like this:

Method 2

The second method of creating a sticky footer does not use the position fixed, which can be an advantage in some cases. However the implementation is a bit more complex, it uses the position sticky.

components/Footer2.jsx

1
import React from 'react'
2
import Content from './Content';
3

4
export default function Footer() {
5
  return (
6
    <div 
7
        className='relative h-[800px]'
8
        style={{clipPath: "polygon(0% 0, 100% 0%, 100% 100%, 0 100%)"}}
9
    >
10
        <div className='relative h-[calc(100vh+800px)] -top-[100vh]'>
11
            <div className='h-[800px] sticky top-[calc(100vh-800px)]'>
12
              <Content />
13
            </div>
14
        </div>
15
    </div>
16
  )
17
}

This method has the same downside as the previous one, we have to specify a height for the footer.

We should have something like this:

Wrapping up

That's it for this famous footer!

A very common type of footer among Awwwards winning websites, with a surprising easy implementation. Hope you learned something!

-Oli

Related Animations

June 2, 2024

Scroll

Mask Section Transition

A website tutorial featuring a scroll animation using an SVG Mask to create a section transition, made with React, Framer Motion. Inspired by: https://axelvanhessche.com/. Pictures by Eric Asamoah, Inka and Niclas Lindergård, Daniel Ribar

May 25, 2024

Scroll

Background Image Parallax

A website animation featuring a background image moving on scroll in a parallax motion, made with Framer Motion and React, inside a Next.js app. Inspired by: https://inkfishnyc.com/. Pictures by Matthias Leidinger

May 25, 2024

Scroll

Text Parallax

A website animation featuring a Text Parallax with sliding text on scroll, made with Framer Motion and React, inside a Next.js app

Tutorials Demos

Design system inspired by Maxime Heckel

Getting Started

Courses

Article

Scroll

Mouse

Misc

3D

Menu

Landing Page

Archive

Sticky Footer

How to Make a Sticky Footer Reveal Effect using React and CSS

Creating the Project

Setting up the Project

A Basic Footer:

We should have something like this:

Method 1

We should have something like this:

Method 2

We should have something like this:

Wrapping up

Related Animations

Mask Section Transition

Background Image Parallax

Text Parallax

Subscribe to the newsletters to stay in touch with the latest.