Mask Section Transition
New
Background Image Parallax
New
Text Parallax
New
Sticky Footer
Perspective Section Transition
Text Along Path
SVG Path On Scroll
Horizontal Section
Zoom Parallax
Parallax Scroll
Horizontal Scroll
Text Gradient Scroll Opacity v2
Cards Parallax
3D perspective Scroll
SVG Mask Scroll
Smooth Parallax Scroll
Smooth Scroll
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
I'm Oli and here I document my latest explorations.
June 2, 2024
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
June 2, 2024
A website animation featuring an image distortion in a curved, using the sin function, React, React Three Fiber and Framer Motion
May 25, 2024
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
A Front End Animation Course featuring animations built with Next.js, Framer Motion, GSAP and more.
Aug 28, 2023
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
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.
June 2, 2024
Mask Section Transition
May 25, 2024
Background Image Parallax
May 25, 2024
Text Parallax
May 21, 2024
Sticky Footer
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
June 2, 2024
Mouse Image Distortion
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
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
October 30, 2023
Awwwards Side Menu
July 13, 2023
Sliding Stairs Menu
July 4, 2023
Curved Menu
June 28, 2023
Navigation Menu
August 29, 2023
SVG Morph
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