Animated image carousel (Apple-inspired) using Framer Motion

Опубликовано: 01 Октябрь 2024
на канале: Built With Code
4,065
123

In this video, we are going to build an animated image carousel inspired by the Apple Vision Pro product page. We will use Framer Motion and Next.js to build this project.

Starter source code: https://github.com/Built-With-Code/ne...

Want more Apple-inspired projects? Checkout this playlist:    • Apple-inspired projects  

Thanks for watching!

TIMESTAMPS:
0:00 - Intro + Preview
0:54 - Starter code
1:31 - Placing the images
4:57 - Left/right controls
9:02 - Translating images using Framer Motion
12:55 - Hover effects for controls
16:57 - Carousel indicator (bottom pill)
19:54 - 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!