If you want to learn more about Framer Motion, check out the official documentation. If you want to learn more about TypeScript, check out the official documentation. We've broken down the code line by line and explained what each part does. In this article, we've explored how to use TypeScript, React, and Framer Motion to create a scroll-linked animation. We also render the children prop inside the motion.div. return (įinally, we return a motion.div with our ref and two style properties, opacity and y, that we created using the useTransform hook. 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 ( for opacity and for y). These lines use the useTransform hook to create two new variables, opacity and y, that we'll use to animate the component. What is Parallax Scrolling, Explained with Examples. References: Feature Image Credits to Saifur Rahman. const opacity = useTransform(scrollYProgress, position, )Ĭonst y = useTransform(scrollYProgress, position, ) With framer-motion's useViewPortScroll() and useTransform() hooks, we can create beautiful and engaging parallax scrolling effects in a simple and effortless manner. ), and the outputRange argument is an array that defines the range of values for the output (e.g.

The inputRange argument is an array that defines the range of the input value (e.g. The input argument is a value that changes over time, in this case the scrollYProgress from useScroll. In more detail, useTransform takes three arguments: input, inputRange, and outputRange. In this case, it's used to adjust the opacity and y-position of the animated element ( motion.div) as the user scrolls. The useTransform hook is used to create a relationship between the scroll position and an animated property of an element. The useTransform hook is part of the Framer Motion library, which is used in the ScrollReveal component. 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. Here's the TypeScript code we'll be working with: import = useScroll() Fortunately the fix for this is pretty easy. Animating a style like height between 100px and 500px is conceptually straightforward, but suffers from poor performance because we're triggering the browser layout systems every animation frame. CSS layouts are difficult and expensive to animate. See below: Scrolling to the top before animating. Create layout and shared layout animations with React and Framer Motion. By default, when the Link component is clicked it scrolls to the top of the page before animating, making the page transitions look a bit clunky. We'll also be using TypeScript, a popular language that adds strong typing to JavaScript and can help catch errors before runtime. When adding page navigation to a Next.js application you should be using the Link component. Framer Motion is a powerful animation library that makes it easy to create fluid and beautiful animations with React. In this tutorial, we'll be using React and Framer Motion to create a scroll-linked animation. As you scroll down the page, different elements will animate in or out, giving your website a unique and dynamic feel. Whether you're looking for design inspiration, curious about my past projects, or just want to connect, my portfolio is the place to be.Scroll-linked animations are a popular technique that links animation to the user's scrolling on the page. If you want to see more of my work, don't forget to check out my portfolio website! There, you'll find a curated collection of my projects, creative endeavors, and a deeper dive into my skills and passions 🔥. If you have any questions, thoughts, or just want to say hello, I'd be thrilled to hear from you. If you found another cool library that can do cool animations, you can share it in the comments below 😁. I created a sandbox in CodeSandbox, you can check it out 😁 Conclusionīy using Framer Motion, you can do any complex animation you want which is awesome. For this MotionGrid, I passed the cardItemVariants to the variants prop. So for example, 'start end' means when the start of the target meets the end of the container. An intersection describes a point when the target and container meet. Well also be using TypeScript, a popular language that adds strong typing to JavaScript and can help catch errors before runtime. offset is an array of at least two intersections. In this tutorial, well be using React and Framer Motion to create a scroll-linked animation. Inside the second MotionGrid, I looped through the cards array and returned a MotionGrid instance each time. In the previous example weve also set the offset option.

Enter fullscreen mode Exit fullscreen mode

Framer motion scroll example