Next.js page transitions using Framer Motion | Speed code
In this video, we'll explore page transitions in Next.js with animations powered by Framer Motion. We'll do this by building a simple, minimalist photo blog.
Starter source code: https://github.com/Built-With-Code/ne...
Thanks for watching!
TIMESTAMPS:
0:00 Intro + Preview
0:19 Creating the navbar
4:32 Displaying dummy post data on homepage
5:42 Styling the homepage grid layout
7:20 Creating the individual post page structure
8:55 Setting up our post page paths
10:00 Styling the individual post page
10:58 Adding support for Framer Motion across our site using AnimatePresence
11:30 Creating transition between pages
12:04 Adding loading animations to the homepage
13:18 Adding a hover animation to the homepage
13:40 Adding loading animations to the individual post page
14:49 Outro
-------------------------------
Welcome to Built With Code! On this channel, you'll find coding tutorials on how to create and build your next awesome coding project, including websites and web apps. We'll use advanced frameworks such as Next.js, GSAP, and Framer Motion, and a whole lot more. If that sounds like fun, SUBSCRIBE to the channel - it'd be much appreciated!