Sticky Footer
A website tutorial featuring a sticky footer animation with a reveal effect, made with position fixed and sticky using React and CSS.
Getting Started
Mouse
Scroll
3D
Archive
Pixel Transition
SVG Morph
Sliding Stairs Menu
Floating Image Gallery
Project Gallery Mouse Hover
Text Gradient Opacity On Scroll
Svg Curve Loading
Text Clip Mask On Scroll
Image slide project gallery
Mouse Image Gallery
Pixel Cursor Trailing
Text Mask Animation
3D Perspective Text
Project Gallery Colored Card
Cartoon Cursor Trailing
Welcome to my blog
I'm Oli and here I document my latest explorations.
Recent Tutorials
See All
May 21, 2024
May 18, 2024
Mask Entry
A website tutorial featuring an entry animation with a masked image made a clip path, React and Framer Motion. Inspired by: https://lightshiprv.com/, Image by Cody Cobb
May 13, 2024
Perspective Section Transition
A website tutorial featuring a perspective transition animation with a smooth scroll using React, Framer Motion, Next.js and Lenis Scroll. Inspired by https://www.joinflowparty.com/
Featured Courses
Web Animation Course
A Front End Animation Course featuring animations built with Next.js, Framer Motion, GSAP and more.
Recent Article
Aug 28, 2023
Placeholder Guide using Next Image
A complete guide on how to use different kind of placeholders like colors and blur using the Plaiceholder Library and the Next Image.
Dec 13, 2023
Nextjs Page Transition Guide
A Next.js tutorial featuring awwwards winning page transition using Framer Motion Animate Presence hook. Features 3 different page transitions, a curve, a stair and a perspective page transition.
All Tutorials
Mouse
May 21, 2024
Sticky Footer
May 4, 2024
Paint Reveal
March 8, 2024
Blend Mode Cursor
March 8, 2024
Creative Buttons
January 30, 2024
Gradient Mouse Move
January 18, 2024
Text Gooey
September 24, 2023
Sticky Cursor
September 16, 2023
Painting Animation
August 15, 2023
Split Vignette
August 9, 2023
Magnetic Button
July 28, 2023
Mask Cursor Effect
July 9, 2023
Floating Image Gallery
July 7, 2023
Mouse Scale Image Gallery
June 4, 2023
Text Disperse Effect
May 13, 2023
Mouse Image Gallery
May 7, 2023
Pixel Cursor Trailing
April 22, 2023
3D Perspective Text
April 13, 2023
Svg Bezier Curve
March 24, 2023
Cartoon Cursor Trailing
Scroll
May 13, 2024
Perspective Section Transition
February 23, 2024
Text Along Path
January 30, 2024
SVG Path On Scroll
January 30, 2024
Horizontal Section
January 13, 2024
Zoom Parallax
January 4, 2024
Parallax Scroll
December 30, 2023
Horizontal Scroll
November 23, 2023
Text Gradient Scroll Opacity v2
November 14, 2023
Cards Parallax
September 25, 2023
3D perspective Scroll
August 6, 2023
SVG Mask Scroll
August 2, 2023
Smooth Parallax Scroll
June 25, 2023
Smooth Scroll
June 10, 2023
Text Gradient Opacity On Scroll
May 21, 2023
Text Clip Mask On Scroll
May 7, 2023
Text Mask Animation
3D
April 21, 2024
Ripple Shader
April 21, 2024
Bulge Effect
April 18, 2024
3D Wave on Scroll
February 17, 2024
3D Glass Effect
February 17, 2024
Creative 404
November 28, 2023
3D Parallax Letters
October 17, 2023
3D Float Effect
September 13, 2023
3D Cube
September 4, 2023
3D Earth
Menu
October 30, 2023
Awwwards Side Menu
July 13, 2023
Sliding Stairs Menu
July 4, 2023
Curved Menu
June 28, 2023
Navigation Menu
Svg
August 29, 2023
SVG Morph
Landing Page
July 24, 2023
Awwwards Landing Page
June 11, 2023
Project Gallery Mouse Hover
May 28, 2023
Infinite Text Move On Scroll
May 13, 2023
Image slide project gallery
March 27, 2023
Project Gallery Colored Card