Animated footer examples
The footer is the last thing a visitor sees, and most sites spend it on a sitemap. These examples turn it into a closing moment. One reveals the footer from behind the page with a split-text wordmark and hands drawn as ASCII art on a canvas. Another fills it with playable objects: tag pills that drop in under Matter.js physics the first time ScrollTrigger sees the footer, then pile up and can be grabbed and flung. A third throws a burst of images up from the bottom edge and lets gravity bring them back down.
They share one constraint: the footer has to stay usable, with links that can be read and clicked once the motion settles. A physics or explosion footer suits portfolio and brand sites, where the end of the page is a reward for scrolling; the quieter reveal suits content sites, where the footer should simply arrive.
The examples
Other categories
- GSAP scroll animation examples
- GSAP menu animation examples
- GSAP slider and carousel examples
- GSAP hover effect examples
- GSAP text animation examples
- GSAP preloader examples
- Page transition examples: GSAP, Barba.js and View Transitions
- GSAP image gallery examples
- GSAP card animation examples
- Three.js and WebGL effect examples
- Interactive cursor and physics effects