Discover the best card-scroll websites created by professional designers. Get inspired and start planning your perfect card-scroll web design today!

I created a YouTube tutorial here (german): https://youtu.be/QU6Ux3yZW4U

apple-card

Apple Card Scroll Animation

This cloneable is a simple horizontal scrolling cards section. I have designed the cards for horizontal scrolling on desktop/ tablet and vertically stacked on mobile. 

Since it's using a flexbox, you can add/ remove cards, and the size will auto-adjust, so the scroll will still work! Although you should resize the scroll track if you reduce a lot of cards.

You can add a background video to each card, which can be revealed on hover for a neat effect :) 

This cloneable is fully built-in Webflow.

Simple Horizontal Cards

Sticky stacking cards on scroll.

By using position: sticky and 'While scrolling in view' interaction, this effect can be created natively without custom code.

Have fun cloning. 😄

====================

💖☕ Support us by buying us a coffee.

If you enjoy our content, please consider supporting us. Your support will help us grow bigger and provide the community with better content.

https://www.buymeacoffee.com/sketchzlab

===================

💌 Follow us on social media.

Facebook @ www.facebook.com/sketchzlab
Instagram @ www.instagram.com/sketchzlab/
Twitter @ www.twitter.com/SketchzLab
Webflow @ www.webflow.com/SketchzLab
LinkedIn @ www.linkedin.com/company/sketchzlab/
YouTube @ www.youtube.com/channel/UCAEXTAQ7IAG71rsJ1ehBnzQ

sketchzlab-cloneable-7

Sticky stacking cards

Cards snap into place as you scroll. The slides change with an interesting reversing effect. 

Position sticky and Webflow interactions give the illusion of scroll snapping.

The component is designed to convert into static slides on mobile to preserve the ease of use. Maybe a horizontal scrolling version might work better?

https://www.veri.co by Joseph Berry inspired this effect.

Scroll Snapping Cards

Scroll through the sections to see the cards stick and shrink into place. 

Scrolling into section 2 reveals a video background element. 

Replace the background video, and play around with the background colors, sizing, and content to get some cool effects here. 

Enjoy.

Sticky card sections

Sticky Cards on Scroll

Hi my gorgeous friends of Webflow,

This project contains a 3D card animation on scroll - built with absolutely no code - that you could use to show testimonial or process cards on your websites.

Copy and illustrations belong to Flux Academy (https://www.flux-academy.com/), an awesome place if you want to learn the art and business of Web Design! :)

Enjoy and feel free to leave a comment!

P.S. Feel free to visit my YouTube channel:
https://www.youtube.com/@francescocastronuovo

3D Testimonial or Process Card Animation

3D Testimonial or Process Card Animation on Scroll

Hi my gorgeous friends of Webflow,

This project contains

1) A full-responsive 3D foldable card effect on hover
2) A full-responsive 3D foldable card effect when scrolling into view

Enjoy and feel free to leave a comment!

P.S. Feel free to visit my YouTube channel:
https://www.youtube.com/@francescocastronuovo

Flipable Card

Simple unstyled sticky components that fade in and out on scroll.

CCD-cloneable

Simple vertical scroll with sticky elements.

Stacking cards in the horizontal direction. Used javascript to use vertical scroll input to work as horizontal scroll input.
Check it out and let me know what should be my next clonable ✌️

hortizontal-stacky-cards

horizontal-stacky-cards

Horizontal scroll is definitely a huge trend! incorporate this detail in desktop designs to make browsing the website more enjoyable for the user.

Сheck out more:
 👉 dribbble.com/halolab
 👉 instagram.com/halolabteam
 —
We provide design-driven development of your product for years to come. Our team focuses on UI/UX design, web development, branding & marketing

Discover card scroll websites built by the Webflow community

Discover card scroll websites built by the Webflow community