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

  • Minimalist UI loading animations including spinners, dots, bars, and 'Thinking...' text indicators on a dark background, showcasing various loader design styles

    Loader Animations in Framer

    Animation

    Minimalist UI loading animations including spinners, dots, bars, and 'Thinking...' text indicators on a dark background, showcasing various loader design styles

    Loader Animations in Framer

    Animation

    Minimalist UI loading animations including spinners, dots, bars, and 'Thinking...' text indicators on a dark background, showcasing various loader design styles

    Loader Animations in Framer

    Animation

  • Stylized 'SOULMATE' typography with a glitch effect, featuring horizontal line distortions and repeated elements for a modern, digital aesthetic

    Text Repetition on Scroll in Framer

    Animation

    Stylized 'SOULMATE' typography with a glitch effect, featuring horizontal line distortions and repeated elements for a modern, digital aesthetic

    Text Repetition on Scroll in Framer

    Animation

    Stylized 'SOULMATE' typography with a glitch effect, featuring horizontal line distortions and repeated elements for a modern, digital aesthetic

    Text Repetition on Scroll in Framer

    Animation