Scroll-linked animations are a popular technique that links animation to the user's scrolling on the page. As you scroll down the page, different elements will animate in or out, giving your website a unique and dynamic feel.
In this tutorial, we'll be using React and Framer Motion to create a scroll-linked animation. Framer Motion is a powerful animation library that makes it easy to create fluid and beautiful animations with React. We'll also be using TypeScript, a popular language that adds strong typing to JavaScript and can help catch errors before runtime.
The Code
Here's the TypeScript code we'll be working with:
import { motion, useScroll, useTransform } from 'framer-motion'
import { useElementViewportPosition } from '../hooks/useElementViewportPosition'
import React, { useRef, PropsWithChildren } from 'react'
export const ScrollReveal: React.FC<PropsWithChildren<{
offset?: number
distance?: number
}>> = ({ offset = 0, distance = 50, children }) => {
const ref = useRef(null)
const { position } = useElementViewportPosition(ref, offset)
const { scrollYProgress } = useScroll()
const opacity = useTransform(scrollYProgress, position, [0, 1])
const y = useTransform(scrollYProgress, position, [distance, 0])
return (
<motion.div
ref={ref}
style={{
opacity,
y,
}}
>
{children}
</motion.div>
)
}
And here's the code for the useElementViewportPosition
hook that we'll be using:
import { useState, useEffect, RefObject } from 'react'
export function useElementViewportPosition(
ref: RefObject<HTMLElement>,
offset = 0,
) {
const [position, setPosition] = useState([0, 0])
useEffect(() => {
const update = () => {
if (!ref || !ref.current) return
const pageHeight = document.body.scrollHeight
const start = ref.current.offsetTop
const end = start + ref.current.offsetHeight
setPosition([(start + offset) / pageHeight, (end + offset) / pageHeight])
}
update()
document.addEventListener('resize', update)
return () => {
document.removeEventListener('resize', update)
}
}, [offset, ref])
return { position }
}
How It Works
So, how do these two pieces of code work together to create those scroll-linked animations? Let me break it down for you.
First, we're importing motion
, useScroll
, and useTransform
from Framer Motion, and useElementViewportPosition
from our own custom hook. We're also importing some stuff from React.
import { motion, useScroll, useTransform } from 'framer-motion'
import { useElementViewportPosition } from '../hooks/useElementViewportPosition'
import React, { useRef, PropsWithChildren } from 'react'
Next, we're defining a new component called ScrollReveal
. This component takes two optional props: offset
and distance
, which we'll explain in a bit. It also takes some children that we'll animate as the user scrolls.
export const ScrollReveal: React.FC<PropsWithChildren<{
offset?: number
distance?: number
}>> = ({ offset = 0, distance = 50, children }) => {
Inside this component, we're creating a new ref with useRef(null)
. We're also calling our useElementViewportPosition
hook and passing in our ref
and offset
. This hook will return a value called position
.
Breaking Down the Code
Now that we've seen the code in action, let's break it down line by line.
import { motion, useScroll, useTransform } from 'framer-motion'
import { useElementViewportPosition } from '../hooks/useElementViewportPosition'
import React, { useRef, PropsWithChildren } from 'react'
Here we have our imports. We're using Framer Motion, a popular React animation library, and importing motion
, useScroll
, and useTransform
. We're also importing a custom hook called useElementViewportPosition
from our ../hooks
folder. Finally, we're importing React and a couple of types.
export const ScrollReveal: React.FC<PropsWithChildren<{
offset?: number
distance?: number
}>> = ({ offset = 0, distance = 50, children }) => {
This line exports a React functional component called ScrollReveal
. It's defined as a function that takes a prop object with optional offset
and distance
properties, as well as the children
prop. The component will use these props to determine how much to reveal and how far to animate.
const ref = useRef(null)
This line creates a React ref called ref
that we'll use later to track the position of the component in the viewport.
const { position } = useElementViewportPosition(ref, offset)
This line calls the useElementViewportPosition
hook we imported earlier, passing in our ref
and offset
props. The hook returns an object with a position
property that we'll use to animate the component.
const { scrollYProgress } = useScroll()
This line calls another Framer Motion hook called useScroll
, which returns an object with a scrollYProgress
property that we'll use to animate the component.
useTransform does all the Magic!
The useTransform
hook is part of the Framer Motion library, which is used in the ScrollReveal
component.
The useTransform
hook is used to create a relationship between the scroll position and an animated property of an element. In this case, it's used to adjust the opacity and y-position of the animated element (motion.div
) as the user scrolls.
In more detail, useTransform
takes three arguments: input
, inputRange
, and outputRange
. The input
argument is a value that changes over time, in this case the scrollYProgress
from useScroll
. The inputRange
argument is an array that defines the range of the input value (e.g. [0, 1]
), and the outputRange
argument is an array that defines the range of values for the output (e.g. [distance, 0]
).
const opacity = useTransform(scrollYProgress, position, [0, 1])
const y = useTransform(scrollYProgress, position, [distance, 0])
These lines use the useTransform
hook to create two new variables, opacity
and y
, that we'll use to animate the component. The useTransform
hook takes three arguments: a value to transform (in this case scrollYProgress
), the range of the input values (position
), and the range of the output values ([0, 1]
for opacity
and [distance, 0]
for y
).
return (
<motion.div
ref={ref}
style={{
opacity,
y,
}}
>
{children}
</motion.div>
)
Finally, we return a motion.div
with our ref
and two style properties, opacity
and y
, that we created using the useTransform
hook. We also render the children
prop inside the motion.div
.
Conclusion
In this article, we've explored how to use TypeScript, React, and Framer Motion to create a scroll-linked animation. We've broken down the code line by line and explained what each part does. If you want to learn more about TypeScript, check out the official documentation. If you want to learn more about Framer Motion, check out the official documentation. Happy animating!
Top comments (0)