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
Olivier Larose
June 10, 2023
/
Beginner
/
Short
A character by character opacity animation applied on text while scrolling, made with React, Next.js and GSAP ScrollTrigger plugin.
Live DemoSource codeVideo Tutorial
Let's start the project by creating a Next.js application. We can do that by running npx create-next-app@latest client inside of a terminal.
We can delete everything in the page.js , global.css and page.module.css and add our own HTML and CSS, to start with a nice blank application.
page.js
page.mod...
global.c...
1
'use client'2
import styles from './page.module.css'3
import { useRef } from 'react';4
5
const phrase = "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters.";6
7
export default function Home() {8
9
let refs = useRef([]);10
const container = useRef(null);11
12
const splitWords = (phrase) => {13
let body = [];14
phrase.split(" ").forEach( (word, i) => {15
const letters = splitLetters(word);16
body.push(<p key={word + "_" + i}>{letters}</p>)17
})18
return body19
}20
21
const splitLetters = (word) => {22
let letters = []23
word.split("").forEach( (letter, i) => {24
letters.push(<span key={letter + "_" + i} ref={el => {refs.current.push(el)}}>{letter}</span>)25
})26
return letters;27
}28
29
return (30
<main ref={container} className={styles.main}>31
<div ref={body} className={styles.body}>32
{33
splitWords(phrase)34
}35
</div>36
</main>37
)38
}
Notes about the code:
Here we split the phrase in characters and add each one of those characters inside a refs array, that we will later use to animate everything.
To gradually increment the opacity of each characters, we will use the ScrollTrigger plugin from GSAP.
We can easily animate each characters individually by providing the refs array and give a stagger value to the gsap functions:
page.js
1
...2
import { useRef, useEffect } from 'react';3
import { ScrollTrigger } from 'gsap/ScrollTrigger';4
import gsap from 'gsap';5
6
let refs = useRef([]);7
const container = useRef(null);8
9
useEffect( () => {10
gsap.registerPlugin(ScrollTrigger);11
createAnimation();12
}, [])13
14
const createAnimation = () => {15
gsap.to(refs.current, {16
scrollTrigger: {17
trigger: container.current,18
scrub: true,19
start: `top`,20
end: `+=${window.innerHeight / 1.5}`,21
},22
opacity: 1,23
ease: "none",24
stagger: 0.125
})26
}27
...28
Note that if we'd like to adjust the gradient, the stagger value is the one to adjust.
I've seen this animation in about 50% of every single awwwards winning website of May 2023, so I thought it would be interesting to remake it! Hope you learned something :)
-Oli
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
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
May 25, 2024
A website animation featuring a Text Parallax with sliding text on scroll, made with Framer Motion and React, inside a Next.js app