Compare Features LandingLanding page, 1 page
Flowline SaaS LandingLanding page, 1 page
Prismo Creative AgencyCreative, 1 page
Velour Car DetailingLanding page, 1 pageTilt-In Scroll Cards
Card grid that enters tilted at a slight angle and rises and flattens into place, staggered card by card, the first time the list scrolls into view. Plain editable section (eyebrow, heading, intro) holding a "Tilt Card"…
50 sites for €79 only, Compare all plans
All photos and visual assets used in this preview are sourced from Unsplash.
The system behind it
One pattern, your whole brand.
Tilt-In Scroll Cards reads your ACSS tokens, so changing a color, a font or a spacing value once restyles it everywhere. No hard-coded values, nothing to override.
- Type
- Component
- Category
- Cards
- Responsive
- Desktop to phone
- Works with
- Etch, ACSS, plain CSS
Options 5
Set on the section, in Etch’s attributes panel. No code needed.
data-tiltdegrees · how far each card is rotated before it settles flat
data-tilt-directionalternate flips odd/even cards to opposite angles
data-staggerms · delay added per card, in list order, when the group reveals
data-triggerhow far the list must scroll into the viewport before it reveals
data-distancepx · how far each card also rises while it tilts in
Component props 1
Only the repeating unit is a component. Duplicate, reorder or delete it in Layers and edit these props.
imagehttps://images.unsplash.com/photo-1523289333742-be1143f6b766?w=640
imageAltA pair of hands sketching a layout on tracing paper
titleStart with the sketch
textEvery project starts on paper before it touches a screen.
index0
Included in Pro From €39 a year, with all 753 patterns.
Get Pro
