Card Scroll Animation in Framer

Card Scroll Animation in Framer

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

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

    Linktree 3D Flip Animation in Framer

    Animation

    Linktree 3D Flip Animation in Framer

    Linktree 3D Flip Animation in Framer

    Animation

    Linktree 3D Flip Animation in Framer

    Animation

    3D Sphere Animation in Framer

    Animation

    3D Sphere Animation in Framer

    3D Sphere Animation in Framer

    Animation

    3D Sphere Animation in Framer

    Animation