Blossom Carousel Logo
Experimental

Scroll Trigger

Use CSS animation-trigger to animate slides based on their scroll state.
1
2
3
4
5
6
7
8
9
10
.carousel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 200px;
  gap: 1rem;
  scroll-snap-type: x mandatory;
}

.slide {
  width: 100%;
  aspect-ratio: 3 / 4;
  scroll-snap-align: center;

  timeline-trigger-name: --t;
  timeline-trigger-source: view(inline);
  animation: unclip 0.35s ease-in-out both;
  animation-trigger: --t play-forwards play-backwards;
}

@keyframes unclip {
  from {
    clip-path: inset(100% 0 0 0 round 1rem);
  }
  to {
    clip-path: inset(0);
  }
}

Repeat

Use repeat mode for cyclical Blossom Carousel behavior.

Accessibility Guide

Build accessible carousels with semantic structure, clear controls, keyboard support, motion controls, and tested ARIA patterns.