profile picture of Olivier Larose

Olivier Larose

November 28, 2023

/

Intermediate

/

Medium

3D Parallax Letters

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

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/

Live Demo
background video

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

This tutorial is part of the Web Animation Course.

Learn more

Related Animations

image

April 21, 2024

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.

image

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.

image

April 18, 2024

3D Wave on Scroll

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