Card Animation On Scroll

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 Animation On Scroll

This is a recreation of the cards animation seen on the Swag website. With this website demo, you'll gain insight into how sticky positioning and scroll transforms can be used together to achieve creative effects and animations like the one shown here.

image of Nandi Muzsik

Created by

card animation in Framer
card animation in Framer
card animation in Framer

Features

This effect uses:

  • Sticky frame to keep the hero section in view as you scroll.

  • Scroll transform to move the cards out.

  • Hidden frames with scroll sections for triggering the animations at different scroll values.

Features

This effect uses:

  • Sticky frame to keep the hero section in view as you scroll.

  • Scroll transform to move the cards out.

  • Hidden frames with scroll sections for triggering the animations at different scroll values.

Features

This effect uses:

  • Sticky frame to keep the hero section in view as you scroll.

  • Scroll transform to move the cards out.

  • Hidden frames with scroll sections for triggering the animations at different scroll values.

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

  • Dynamic card carousel featuring collectibles, fashion, and automotive themes with vibrant visuals

    Expanding Cards Scroll Animation in Framer

    Animation

    Dynamic card carousel featuring collectibles, fashion, and automotive themes with vibrant visuals

    Expanding Cards Scroll Animation in Framer

    Animation

    Dynamic card carousel featuring collectibles, fashion, and automotive themes with vibrant visuals

    Expanding Cards Scroll Animation in Framer

    Animation

  • 3D spiral layout of various design mockups featuring branding and UI/UX projects on a dark background

    Spiral 3D Scroll Animation

    Animation

    3D spiral layout of various design mockups featuring branding and UI/UX projects on a dark background

    Spiral 3D Scroll Animation

    Animation

    3D spiral layout of various design mockups featuring branding and UI/UX projects on a dark background

    Spiral 3D Scroll Animation

    Animation