Web Animation Course

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.  

How to Make a Ripple Distortion Shader using Three.js and React

Ripple Shader

A complete guide on how to use different kind of placeholders like colors and blur using the Plaiceholder Library and the Next Image.

Complete Guide on Placeholder using Nextjs Image, Plaiceholder, Blur, Color

Placeholder Guide using Next Image

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.

How to Make Creative Page Transitions using Next.js and Framer Motion

Nextjs Page Transition Guide

Article

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  

How to Make an SVG Mask Section Transition using React and Framer Motion

Mask Section Transition

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

How to Make a Background Image Parallax using Framer Motion and React

Background Image Parallax

A website animation featuring a Text Parallax with sliding text on scroll, made with Framer Motion and React, inside a Next.js app

How to Create a Text Parallax Animation with React and Framer Motion

Text Parallax

A website tutorial featuring a sticky footer animation with a reveal effect, made with position fixed and sticky using React and CSS.

How to Make a Sticky Footer Reveal Effect using React and CSS

Sticky Footer

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/

How to make a Smooth Parallax Section Transition with React and Framer Motion

Perspective Section Transition

a website tutorial on how to animate a a Text along an SVG Path on Scroll using React and Framer Motion. Used with the Lenis Scroll for added smoothness and Next.js

How to Move a Text along an SVG Path on Scroll using React and Framer Motion

Text Along Path

A website tutorial featuring an SVG path animation on scroll using the Canvas API, inside a Next.js application. Inspired by https://lusion.co/

How to Animate an SVG path on Scroll using the Canvas API

SVG Path On Scroll

A website tutorial featuring a horizontal scroll section using GSAP Scroll Trigger inside a Next.js application.

How to Make a Horizontal Scroll Section with GSAP and Next.js

Horizontal Section

A Smooth Scroll Parallax animation featuring a zoom with a sticky container. Made with React, Framer Motion and Next js. Picture by Matthias Leidinger. Inspired by https://www.exoape.com/work/plugged-live-shows

How to Make a Zoom Parallax with React using Next.js and Framer Motion

Zoom Parallax

A website tutorial on how to make a parallax scroll in React using GSAP or Framer Motion. All inside a Next.js application.

2 Ways to Make a Scroll Parallax in React

Parallax Scroll

A Horizontal scroll with a vertical pinned section, made with React, GSAP and Next.js. Pictures by George Marazakis.

How to Make a Horizontal Scroll with GSAP and React

Horizontal Scroll

A web animation tutorial featuring a gradient text scroll opacity effect using Nextjs and Framer Motion. In this tutorial I animate a paragraph work by word modifying the opacity in scroll. Inspired by many awwwards websites.

Build a Text Scroll Gradient Opacity Effect using Nextjs and Framer Motion

Text Gradient Scroll Opacity v2

A website Smooth Scroll Cards Parallax animation tutorial featuring Lenis Scroll, Framer Motion all inside a Next.js application. Inspired by many awwwards winning websites.

Build a Smooth Scroll Cards Parallax with Framer Motion and Next.js

Cards Parallax

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/

Build a 3D Perspective Scroll Carousel with Next.js and Framer Motion

3D perspective 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/

Build an Awwwards SVG Mask using Framer Motion, Lenis Scroll, Nextjs

SVG Mask Scroll

A web animation tutorial featuring a Smooth Vertical Parallax Image Scroll Gallery made with Framer Motion, Lenis Scroll and Nextjs. Inspired by:https://mill3.studio/en/projects/gsoft/

Build a Smooth Parallax Scroll with Framer Motion, Lenis Scroll, Nextjs

Smooth Parallax Scroll

A website tutorial on how to make a one pager landing page with a smooth scroll using Nextjs, GSAP and Locomotive Scroll v5

Build a Smooth Scroll Landing Page using Nextjs, GSAP, Locomotive Scroll v5

Smooth Scroll

Scroll

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

How to Curve an Image on Mouse Move using React, React Three Fiber and Framer Motion

Mouse Image Distortion

A website tutorial on making a paint reveal / erasing effect using the destination out blend mode of the canvas API, made with React and Next.js

How to Make a Paint Reveal Effect using Canvas API and React

Paint Reveal

A website tutorial featuring a moving cursor on mouse move, colored with CSS blend mode difference, made with React and GSAP. Inspired by https://trionn.com/ 

How to Make an Animated Cursor using React and GSAP

Blend Mode Cursor

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/

How to Make Creative Animated Buttons in React

Creative Buttons

A website tutorial featuring an animation of a css linear gradient using Framer Motion and Next.js. Inspired by https://www.itsoffbrand.com/ 

How to Animate a Linear Gradient using Framer Motion and Next.js

Gradient Mouse Move

How to Make a Text Gooey Morph Effect Using SVG filters feGaussianBlur and feColorMatrix. All inside a Next.js application and animated with Framer Motion. Inspired by: https://codepen.io/supah/pen/abVGjVq

How to Make a Text Gooey Morph Effect Using SVG Filters

Text Gooey

A website animation tutorial featuring a sticky and magnetic cursor effect made with Next.js, Framer Motion and the Math.Atan2() function.

Build a Sticky Cursor Effect with Next.js, Framer Motion and Trigonometry

Sticky Cursor

Framer

Next.js

awwwards.

Sticky cursor effect on a burger menu.

Made with a bunch of hooks from @framer and some trigonometry, all inside a @nextjs app.

Inspired by @awwwards websites.

See my implementation here: https://t.co/quXkfqsDNC https://t.co/wj6Y62bKgG

Olivier Larose

An Awwwards winning painting animation made with the Canvas API and Next.js. Inspired by: https://dominic.bz/

Build An Awwwards Painting Animation with Canvas API and Next.js

Painting Animation

A split image animation using clip-path css value, animated with framer motion and Nextjs. Inspired by: https://tux.co/en/

How to Make a Split Vignette Effect using Framer Motion and Nextjs

Split Vignette

2 Ways to Make a Magnetic Buttons using React, GSAP, Framer Motion. See the difference in terms of implementation for a magnetic effect between GSAP and Framer Motion.

2 Ways to Make a Magnetic Buttons using React, GSAP, Framer Motion

Magnetic Button

A custom cursor with a mask hover effect revealing text underneath. Made with Nextjs and Framer Motion. Insipired by: https://minhpham.design/

Build a Mask Cursor Effect With Nextjs and Framer Motion

Mask Cursor Effect

A website tutorial featuring a mouse interactive project gallery from an awwwards winning website, made with Nextjs. Inspired by https://decimalstudios.com/work.

Build an Awwwards Mouse Interactive Project Gallery with Nextjs

Mouse Scale Image Gallery

A text hover animation featuring a dispel effect using NextJs, GSAP and Framer Motion

How to Make a Dispel Hover Effect with NextJs, GSAP and Framer Motion

Text Disperse Effect

A common svg wave animation seen in a lot of awwwards website. Made with React, Next.js and the Sine function. Inspired by https://hello.cuberto.com

Svg Curve Animation: How to use the Quadratic Bézier Curve

Svg Bezier Curve

Mouse

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

How to Make an Masked Image Entry Animation using React and Framer Motion

Mask Entry

A website tutorial featuring a physics based animation using Matter.js and Next.js

How to Animate Letters using Physics with Matter.js and Next.js

Capsule Physics

A website tutorial featuring a lazy loading image pixel effect using javascript Canvas API and Next.js. Inspired by https://locomotive.ca/en

How to Make an Image Pixelization Effect using Canvas API and Next.js

Image Pixel Loading

Misc

A website tutorial featuring a bulge distortion animation, made with a shader in GLSL, using React Three Fiber, Next.js and React.

How to create a Bulge Distortion Shader using Three.js and React 

Bulge Effect

A website animation tutorial featuring a vertex shader with a wave animation applied on a plane. Made with React-three-fiber, Framer Motion and Next.js

How to Make a 3D Wave Distortion using Three.js and React

3D Wave on Scroll

A website tutorial on how to create a Glass looking Material with distortion by using the MeshTransmissionMaterial with Three.js, React, React Three Fiber and Next.js.

How to Make a 3D Glass Effect using Three.js and React

3D Glass Effect

After reviewing my subscribers 404 page, here's how I made mine.

How to Make a Creative 404 Page using Three.js and React

Creative 404

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/

How to Make 3D Parallax Letters with Threejs, Framer Motion and Nextjs

3D Parallax Letters

A web animation tutorial that showcases how to create a 3D float effect using Three.js inside a Next.js application. The float is made with React Three Drei and Framer Motion.

Build a 3D Float Effect using Three.js, Framer Motion, Next.js

3D Float Effect

A web animation featuring a 3D cube, animated on scroll, mouse move and on drag, using Three.js, react three fiber, Next.js and Framer Motion.

Build a Simple 3D Animated Cube using Three.js, Next.js and Framer Motion

3D Cube

A web animation tutorial on how to make a 3D earth rotate on scroll, with a clip path animation using Three.js, Framer Motion and Next.js. Inspired by https://minhpham.design/

Build a 3D Earth with Smooth Scroll Rotation using Three.js, Framer Motion and Next.js

3D Earth

A website tutorial featuring the rebuild of a menu from an Awwwards winning website, made with Framer Motion and Next.js, inspired by: https://agencecartier.com/fr

Rebuild an Awwwards Side Menu with Framer motion and Nextjs

Awwwards Side Menu

A website tutorial on how to make an awwwards curved menu using Nextjs, GSAP and Framer Motion. A curve is created using SVG path commands Inspired by https://dennissnellenberg.com/.

Build an Awwwards Curved Menu using Nextjs, GSAP and Framer Motion

Curved Menu

A website tutorial on how to make an Awwwards Navigation bar menu using Nextjs and Framer Motion. Inspired by the awwwards winning website https://props.studiolumio.com/

How to Make an Awwwards Navigation Menu using Nextjs and Framer Motion

Rebuild an Awwwards Landing page with Nextjs, Framer Motion and GSAP

Awwwards Landing Page

An infinite text moving animation with scroll interaction using React and Next.js. Picture by Eric Asamoah.

How to make an infinite text moving animation with React and Next.js

Infinite Text Move On Scroll

Landing Page

A web animation tutorial featuring a centered, horizontal and vertical pixel transition effect using Next.js and Framer Motion

How to Make a Pixel Transition Effect using Next.js and Framer Motion

Pixel Transition

A tutorial that takes a look at using Framer Motion mixer with Flubber.js to create an SVG Morph animation, inside of a Next js project.

How to Make SVG Morph using Framer Motion, Flubber.js and Nextjs

SVG Morph

A website tutorial featuring an animated menu that comes from an awwwards winning website. Features a stair-like animation with an infinite slider. Inspired by https://k72.ca/travail

Sliding Stairs Menu

A website tutorial on how to make a floating image gallery using Nextjs and GSAP. It's an animaiton where images move with the movement of the cursor using gsap.

How to make a Floating Image Gallery using Nextjs and GSAP

Floating Image Gallery

An awwwards winning website tutorial with a project gallery featuring a hover animation using Nextjs, GSAP and Framer Motion. Inspired by: https://dennissnellenberg.com/

Build an Awwwards Project Gallery using NextJs, GSAP and Framer Motion

Project Gallery Mouse Hover

A character by character opacity animation applied on text while scrolling, made with React, Next.js and GSAP ScrollTrigger plugin.

How to Make a Text Gradient Opacity On Scroll with React, Next.js and GSAP

Text Gradient Opacity On Scroll

A loading screen using an animated curved SVG using React and Next.js

How to make an animated loading screen using a curved SVG

Svg Curve Loading

An on scroll animation that gradually expands a text mask that clips a video, made with React, CSS and Next.js.

How to create a text clip mask on scroll animation with React, CSS and Next.js 

Text Clip Mask On Scroll

A project gallery animation featuring an image slide effect using the width auto animation of Framer Motion. Made with React and Next.js. Inspired by https://locomotive.ca/

How to animate width: auto using React, Next.js and Framer Motion

Image slide project gallery

A mouse moving image gallery that features a collection of images that gradually appears as the mouse move. Made with React in a Next.js environment. Inspired by https://bridget.pictures/ and images taken by Kin Coedel. 

How to make a Mouse Move Image Gallery using React and Nextjs

Mouse Image Gallery

A pixel trailing effect created with React. As the cursor moves, squares are created along the mouse to create an effect of trailing. Made with React and Next.js

How to create a cursor pixel trailing effect with React

Pixel Cursor Trailing

An animation featuring a text sliding effect with a mask, to give the effect of text gradually appearing when in view. Made with React and Framer Motion in a Next.js environment.

How to use a mask to animate HTML text when in view using React, Framer Motion and Next.js

Text Mask Animation

A 3d perspective text animation made with CSS using the transform style, perspective and transform attribute. Created with React in a Next.js framework.

3D Perspective Text - How to use CSS to make a 3D text animation

3D Perspective Text

A hover animation website tutorial using NextJs and GSAP on a colourful project gallery. Inspired by https://anacuna.com/

Ripple Shader

How to Make a Ripple Distortion Shader using Three.js and React

It seems you don’t have access to this tutorial.

Related Animations

Bulge Effect

3D Wave on Scroll

3D Glass Effect

Subscribe to the newsletters to stay in touch with the latest.

Getting Started

Courses

Article

Scroll

Mouse

Misc

3D

Menu

Landing Page

Archive

Ripple Shader

How to Make a Ripple Distortion Shader using Three.js and React

It seems you don’t have access to this tutorial.

Related Animations

Bulge Effect

3D Wave on Scroll

3D Glass Effect

Subscribe to the newsletters to stay in touch with the latest.