v150 · CSS · Animation
Scroll Zoom Reveal
Each card starts at zoom: 0.7; opacity: 0 and transitions to zoom: 1; opacity: 1 when it enters the viewport. Because zoom is now animatable, this spring-in effect changes the element's actual layout size — unlike transform: scale() which leaves a ghost in the flow.
Scroll down inside the box to reveal cards with a zoom-in animation.
/* Cards start hidden and zoomed-out */
.reveal-card {
opacity: 0;
zoom: 0.7;
transition: opacity 0.5s ease,
zoom 0.5s cubic-bezier(0.34,1.56,0.64,1); /* spring */
}
/* IntersectionObserver adds .visible when the card enters the viewport */
.reveal-card.visible {
opacity: 1;
zoom: 1; /* layout reflows — unlike transform:scale */
}
see also
- Zoom Gallery — hover zoom that pushes siblings
- Zoom vs Scale — layout reflow comparison
- Keyframe Zoom — zoom inside @keyframes
- Product Focus — e-commerce spring zoom
implementation reference
Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗