Resources

Card Scroll Animation in Framer

View demo

Remix

Remix

Resources

Card Scroll Animation in Framer

View demo

Remix

Animation

Card Scroll Animation in Framer

This is a Framer recreation of the scroll animation originally seen on the UltrahumanX website. Feel free to remix the project and delve into how the scroll transformations work. No code was used in this project.

image of Nandi Muzsik
image of Ritwik

Created by

Nandi

and

Ritwik

Card Scroll Animation in Framer
Card Scroll Animation in Framer
Card Scroll Animation in Framer

About the resource

This scroll animation uses some of the best no-code features of Framer. The way it works is, I stack the cards on top of each other with different Z-indexes to determine their order. Then, I add scroll transforms to each using scroll section triggers, and move the cards in the appropriate direction along the X-axis. Simple, right?

About the resource

This scroll animation uses some of the best no-code features of Framer. The way it works is, I stack the cards on top of each other with different Z-indexes to determine their order. Then, I add scroll transforms to each using scroll section triggers, and move the cards in the appropriate direction along the X-axis. Simple, right?

About the resource

This scroll animation uses some of the best no-code features of Framer. The way it works is, I stack the cards on top of each other with different Z-indexes to determine their order. Then, I add scroll transforms to each using scroll section triggers, and move the cards in the appropriate direction along the X-axis. Simple, right?

scroll transform in Framer

Scroll transform effect panel in Framer.

scroll transform in Framer

Scroll transform effect panel in Framer.

scroll transform in Framer

Scroll transform effect panel in Framer.

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 resources

More resources

View all

    3D Staircase Scroll Animation in Framer

    3D Staircase Scroll Animation in Framer

    Animation

    3D Staircase Scroll Animation in Framer

    3D Staircase Scroll Animation in Framer

    Animation

    3D Staircase Scroll Animation in Framer

    3D Staircase Scroll Animation in Framer

    Animation

    Interactive 3D Hero Animation in Framer

    Interactive 3D Hero Animation in Framer

    Animation

    Interactive 3D Hero Animation in Framer

    Interactive 3D Hero Animation in Framer

    Animation

    Interactive 3D Hero Animation in Framer

    Interactive 3D Hero Animation in Framer

    Animation