Welcome to my blog I'm Oli and here I document my latest explorations.

Recent Tutorials

See All
image

June 2, 2024

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

image

June 2, 2024

Mouse Image Distortion

A website animation featuring an image distortion in a curved, using the sin function, React, React Three Fiber and Framer Motion

image

May 25, 2024

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

Featured Courses

image

Sept 14, 2023

Web Animation Course

A Front End Animation Course featuring animations built with Next.js, Framer Motion, GSAP and more.

Recent Article

image

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.

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

Scroll

May 25, 2024

Text Parallax

May 21, 2024

Sticky Footer

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 14, 2023

Cards Parallax

September 25, 2023

3D perspective Scroll

August 6, 2023

SVG Mask Scroll

June 25, 2023

Smooth Scroll

Mouse

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

April 22, 2023

3D Perspective Text

April 13, 2023

Svg Bezier Curve

Misc

May 18, 2024

Mask Entry

January 30, 2024

Capsule Physics

January 30, 2024

Image Pixel Loading

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

Transition

October 1, 2023

Pixel Transition

May 27, 2023

Svg Curve Loading

Svg

August 29, 2023

SVG Morph

Gallery