Website animation
Website animation
Website animation
Website animation
Card Animation On Scroll
Card Animation On Scroll
Card Animation On Scroll
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.
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.
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.
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.
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.
Step / 01
Remix the project.
Step / 02
Take a look at how it works.
Step / 03
Try recreating it for practice or copy and paste it to your project.
Free Framer Course
Learn how to create stunning websites with ease by learning the fundamentals of Framer.
Free
Framer Course
Learn how to create stunning websites with ease by learning the fundamentals of Framer.
Free Framer Course
Learn how to create stunning websites with ease by learning the fundamentals of Framer.