Ripple Shader
A website animation tutorial featuring a ripple shader effect using React Three Fiber, Next.js and React. Inspired by https://homunculus.jp/ and Yuri Artiukh.
Getting Started
Scroll
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
Mouse
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
Built with Next.js, Framer Motion, GSAP and more
Web Animation Course
The Web Animation Course is currently in construction. Leave your email below to be notified when the course launches.
Featuring
April 21, 2024
Aug 6, 2023
SVG Mask Scroll
An Awwwards website tutorial on how to make an SVG Mask using Framer Motion, Lenis Scroll and Nextjs. Features a star like SVG that scales on scroll with an animated shadow. Inspired by: https://lightshiprv.com/
Nov 28, 2023
3D Parallax Letters
A website tutorial featuring a 3D parallax scrolling effect using 3D letters, made with Three.js, Framer Motion and Next.js. Inspired by awwwards websites. Inspired by: https://brandingthatslaps.com/
Sept 16, 2023
Painting Animation
An Awwwards winning painting animation made with the Canvas API and Next.js. Inspired by: https://dominic.bz/
Sept 25, 2023
3D perspective Scroll
A web animation featuring a 3d perspective scroll with images rotating on scroll, made with Framer Motion and Next.js. Inspired by: https://www.stryds.com/
Dec 30, 2023
Horizontal Scroll
A Horizontal scroll with a vertical pinned section, made with React, GSAP and Next.js. Pictures by George Marazakis.
Jan 30, 2024
Horizontal Section
A website tutorial featuring a horizontal scroll section using GSAP Scroll Trigger inside a Next.js application.
April 21, 2024
Bulge Effect
A website tutorial featuring a bulge distortion animation, made with a shader in GLSL, using React Three Fiber, Next.js and React.
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
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
Jan 30, 2024
Image Pixel Loading
A website tutorial featuring a lazy loading image pixel effect using javascript Canvas API and Next.js. Inspired by https://locomotive.ca/en
Jan 30, 2024
SVG Path On Scroll
A website tutorial featuring an SVG path animation on scroll using the Canvas API, inside a Next.js application. Inspired by https://lusion.co/
Jan 30, 2024
Gradient Mouse Move
A website tutorial featuring an animation of a css linear gradient using Framer Motion and Next.js. Inspired by https://www.itsoffbrand.com/
Jan 30, 2024
Capsule Physics
A website tutorial featuring a physics based animation using Matter.js and Next.js
March 8, 2024
Creative Buttons
A website tutorial featuring animated buttons taken from awwwards winning websites. Remade using React and SASS. Inspired by https://timestwo.design, https://hello.cuberto.com/ and https://lusion.co/