Animation comparisons

Animation

Intermediate

Sticky & snapped element styling without JavaScript

Modern @container scroll-state(
  stuck: top
) {
  .header { ... }
}

Old window.addEventListener(
  'scroll', () => {
    /* check position */
});

hover to see old →

50% →

Animation

Advanced

Responsive clip paths without SVG

Modern .shape {
  clip-path: shape(
    from 0% 100%, ...
  );
}

Old .shape {
  clip-path: path(
    'M0 200 L100 0...'
  );
}

hover to see old →

45% →

Animation

Intermediate

Staggered animations without nth-child hacks

Modern li {
  transition-delay:
    calc(0.1s * (sibling-index() - 1));
}

Old li:nth-child(1) { --i: 0; }
li:nth-child(2) { --i: 1; }
li:nth-child(3) { --i: 2; }
/* repeat for every item… */

hover to see old →

72% →

Animation

Beginner

Independent transforms without the shorthand

Modern .icon {
  translate: 10px 0;
  rotate: 45deg;
  scale: 1.2;
}
/* animate any one without touching the rest */

Old .icon { transform: translateX(10px) rotate(45deg) scale(1.2); }
/* change one = rewrite all */

hover to see old →

95% →

Animation

Intermediate

Animating display none without workarounds

Modern .panel { transition: opacity .2s, overlay .2s;
  transition-behavior: allow-discrete; }
.panel.hidden { opacity: 0; display: none; }
/* no JS wait or visibility hack */

Old // wait for transitionend then display:none
el.addEventListener('transitionend', …)
visibility + opacity + pointer-events

hover to see old →

83% →

Animation

Intermediate

Entry animations without JavaScript timing

Modern .card { transition: opacity .3s, transform .3s; }
.card { @starting-style { opacity: 0; transform: translateY(10px); } }
/* no rAF/setTimeout */

Old // add class after paint
requestAnimationFrame(() => {
  el.classList.add('visible');
});

hover to see old →

83% →

Animation

Advanced

Page transitions without a framework

Modern document.startViewTransition(() => updateDOM());
.hero { view-transition-name: hero; }
/* no Barba, no React TG */

Old // Barba.js or React Transition Group
Barba.init({ … })
transition hooks + duration state

hover to see old →

78% →

Animation

Advanced

Scroll-linked animations without a library

Modern animation-timeline: view();
animation-range: entry;
/* pure CSS, GPU-accelerated */

Old // JS + IntersectionObserver
observer.observe(el)
el.style.opacity = …

hover to see old →

72% →