Card Scroll Animation in Framer

Card Scroll Animation in Framer

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

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
profile image of Ritwik Raj

Created by

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.

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.

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.

Nandi portrait's background
Nandi's portrait

More resources

More resources

  • Framer website homepage with navigation menu and pixelated project previews showcasing web design tool capabilities

    Animated Navigation Bar in Framer

    Animation

    Framer website homepage with navigation menu and pixelated project previews showcasing web design tool capabilities

    Animated Navigation Bar in Framer

    Animation

    Framer website homepage with navigation menu and pixelated project previews showcasing web design tool capabilities

    Animated Navigation Bar in Framer

    Animation

  • Apple TV Scroll Zoom Animation in Framer

    Apple TV Scroll Zoom Animation in Framer

    Animation

    Apple TV Scroll Zoom Animation in Framer

    Apple TV Scroll Zoom Animation in Framer

    Animation

    Apple TV Scroll Zoom Animation in Framer

    Apple TV Scroll Zoom Animation in Framer

    Animation