Bits of .NET

📜 Animation Tied to Scroll Position

Scroll-triggered animations needed JavaScript. Scroll-driven animations are pure CSS. Progress bar, reveal on scroll, parallax — all native.

📝 Basic Scroll Progress

/* Progress bar that fills as you scroll */
@keyframes grow-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 4px;
  background: blue;
  transform-origin: 0% 50%;
  animation: grow-progress linear;
  animation-timeline: scroll(root);
  animation-range: 0% 100%;
}

🎯 Scroll-Reveal Elements

/* Fade in when element scrolls into view */
@keyframes fade-in {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.reveal-on-scroll {
  animation: fade-in linear;
  animation-timeline: view();
  animation-range: entry 0% entry 100%;
}

/* Staggered animations for children */
.child {
  animation: fade-in linear;
  animation-timeline: view();
  animation-range: entry 10% entry 90%;
}

✅ Complex Animations

/* Parallax: image moves slower than scroll */
@keyframes parallax {
  from { transform: translateY(0); }
  to { transform: translateY(-20%); }
}

.parallax-image {
  animation: parallax linear;
  animation-timeline: scroll();
  animation-range: 0% 100%;
}

/* Pin an element until scroll passes */
.pinned-element {
  position: sticky;
  top: 0;
  animation: fade-out linear;
  animation-timeline: scroll();
  animation-range: 0% 30%;
}

💡 Browser Support

• Chrome 115+ ✅ (flags enabled)
• Edge 115+ ✅
• Safari: In development
• Firefox: In development
• Use as progressive enhancement (fallback to no animation)