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.

Created by

Nandi

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.

Card Animation On Scroll

Features

Features

Features

Learn the fundamentals of Framer for free.

Learn the fundamentals of Framer for free.

Learn the fundamentals of Framer for free.

More resources

More resources