Scroll animations

Documentation

Scroll animations

Reading Time:

2

min

Released

2 de octubre de 2023

How to create scroll-linked and scroll-triggered animations in Framer Motion.

There are two predominant types of scroll animations, both of which can be achieved with Framer Motion.

Scroll-linked animations are when the progress of an animation is directly tied to scroll progress. Scroll-triggered animations are when a normal animation is triggered when an element enters or leaves the viewport.

Scroll-linked animations

Scroll-linked animations are created using motion values and the useScroll hook.

import { motion, useScroll } from "framer-motion"

function Component() {
  const { scrollYProgress } = useScroll();
  
  return (
    <motion.div style={{ scaleX: scrollYProgress }} />  
  )
}

Istanbul

Follow us on social media