Satisfying Scroll Animations with Framer Motion

In this video we'll be using Framer Motion to recreate a part of the amazing animations on the CodeSandbox Projects page. We will mainly focus on writing the Framer Motion code, and not so much on the underlying Tailwind styles. This video should work as a foundation for your Framer Motion knowledge, from where you should be able to enhance your own websites with animations as well.

👀 Timestamps
00:00 - Intro
01:37 - What we'll be building
02:30 - Structure of the code
04:09 - Basics of Framer Motion by Animating the hero component
04:20 - useScroll hook, track scroll position
05:57 - useTransform hook, animating opacity
07:03 - useScroll offset functionality
09:07 - Adding the motion.section component
11:16 - Adding the scale animation
13:37 - Removing position fixed
15:21 - Animating the main image
20:19 - Animating a large section with images and texts
41:38 - Text scrolling through a square portal
46:10 - Looking at the last 2 sections together (no coding)
46:20 - Outro

✨ Become a PRO today via https://www.frontend.fyi/pro
💬 Join us on Discord: https://www.frontend.fyi/discord

🔗 Source on Github: https://github.com/frontendfyi/scroll...
👀 Preview of what we've build: https://scroll-animations-with-framer...
🥡 CodeSandbox' version: https://projects.codesandbox.io/

Tools mentioned:
🔗 Framer Motion: https://www.framer.com/motion/
🔗 Tailwind: https://tailwindcss.com

#framermotion #react #css #tailwind #frontend