Curso gratuito de CSS

SVG Lines
on Scroll

↓ hacé scroll

01 — ola simple

02 — múltiples curvas

03 — forma con rayos

04 — entran desde los lados

// Cómo funciona

/* 1. Nombrar el scroll container */
#scroller {
  height: 100vh;
  overflow-y: scroll;
  scroll-timeline-name: --page;
}

/* 2. Las líneas usan ese nombre */
.curve {
  stroke-dasharray:  1;
  stroke-dashoffset: 1;
  animation: draw linear both;
  animation-timeline: --page;
  animation-range: 15% 35%; /* su sección */
}

@keyframes draw {
  from { stroke-dashoffset: 1; opacity: 0; }
  to   { stroke-dashoffset: 0; opacity: 1; }
}