Framer Tutorial: Making The AirPods Pro Scroll Animation

Framer Tutorial: Making The AirPods Pro Scroll Animation

Intermediate

16 min

Framer Tutorial: Making The AirPods Pro Scroll Animation

Learn how to create an image sequence scroll animation on your Framer website. I'll show you how to set up your components and variants to create this effect in Framer, and I'm gonna also hand you a code override that you can use to play an image sequence on scroll on your website.

Remix for the AirPods Pro animation.

Remix for the Frame.io animation.

image of Nandi Muzsik

Taught by

Nandi

Remix project file

Remix project file

Remix project file

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Join waitlist

Nandi portrait's background

Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Join waitlist

Nandi portrait's background

Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Join waitlist

Nandi portrait's background

Nandi's portrait

More lessons

More lessons

View all

How To Use The Shimmer Dot Component in Framer

How To Use The Shimmer Dot Component in Framer

How To Use The Shimmer Dot Component in Framer

How To Use The Shimmer Dot Component in Framer

How To Use The Shimmer Dot Component in Framer

How To Use The Shimmer Dot Component in Framer

Framer Tutorial: Prallax Hover + Progressive Blur = Epic Cards

Framer Tutorial: Parallax Hover + Progressive Blur = Epic Cards

Framer Tutorial: Prallax Hover + Progressive Blur = Epic Cards

Framer Tutorial: Parallax Hover + Progressive Blur = Epic Cards

Framer Tutorial: Prallax Hover + Progressive Blur = Epic Cards

Framer Tutorial: Parallax Hover + Progressive Blur = Epic Cards