Reddit

Made a CSS-only scroll animation library, 34 moves, no JS

JavaScript 없이 스크롤 애니메이션 34가지를 구현한 CSS 라이브러리

Dolly는 CSS scroll-driven animations를 data-dolly 속성으로 쓰도록 만든 라이브러리입니다. 34가지 애니메이션을 제공하며 스크립트 없이 동작하지만, 브라우저 지원 범위와 모바일 성능이 실제 사용의 제약으로 거론됩니다.

에디터 노트

Dolly의 장점은 애니메이션이 실패해도 콘텐츠가 사라지지 않도록 기본 상태를 둔 점입니다. 스크립트 없이도 작동한다는 설명과 reduced-motion 대응은 확인 가능한 설계 선택입니다. 반면 지원 브라우저가 제한되고 댓글에는 모바일과 일부 브라우저에서 끊기거나 작동하지 않는다는 보고가 반복됩니다. 작성자는 데모 문제일 가능성을 들었지만 원인을 확인한 결과는 제시하지 않았습니다. 또 일부 효과는 transform과 opacity를 넘어 filter와 clip-path를 사용하므로 모든 동작의 비용이 같지는 않습니다. 실제 도입 판단에는 동작별 성능 정보와 대상 브라우저에서의 검증이 남습니다.

AI 요약

Dolly는 CSS scroll-driven animations를 간단한 속성으로 적용하는 라이브러리입니다. 요소에 data-dolly="tilt-up"처럼 지정하면 스크롤에 맞춰 움직이며, 페이지 고정 구간과 스프라이트 시퀀스도 지원합니다. 34가지 동작을 제공하고 라이브러리가 보내는 JavaScript는 0 kB라고 설명합니다.

동작 방식과 지원 범위

브라우저가 스크롤 애니메이션을 직접 처리하므로 IntersectionObserver나 스크롤 이벤트 리스너, 초기화 호출이 필요하지 않습니다. 애니메이션이 지원되지 않아도 요소의 기본 콘텐츠는 보이도록 숨김 상태를 @keyframes 안에만 둡니다. prefers-reduced-motion 설정에서는 애니메이션과 고정 구간을 멈춥니다. 원문은 Chrome·Edge 115 이상, Safari 26 이상, Opera를 지원 대상으로 제시하며 방문자의 약 87%에 해당한다고 주장합니다. Firefox는 아직 지원하지 않아 정적인 페이지를 보여준다고 설명합니다.

Reddit 반응

  • @GumboGuts — CSS scroll-driven animations에 이름 붙은 동작을 제공하는 스타일시트 하나입니다. 데모도 JavaScript 없이 CSS만으로 움직입니다.
  • @Seventhcircle72 — 취지는 좋지만 데모가 느리고 덜컹거립니다. 모바일에서 성능이 매우 나쁩니다.
  • @GumboGuts — 오래된 기기에서의 성능 문제인지 확인하겠습니다. 라이브러리 자체보다 데모 페이지 문제일 가능성이 있다고 봅니다.
  • @shaliozero — Samsung Browser에서는 엉망으로 실행되지만 Chrome에서는 매끄럽습니다.
  • @diiscotheque — Firefox와 호환되지 않으면 사용할 수 없습니다.
    • @GumboGuts — Firefox에도 기능은 구현됐지만 플래그 뒤에 있습니다. 다음 버전에서 기본 활성화될 예정이며 현재는 about:config에서 설정을 켜면 작동합니다.
  • @SaliDevs — 애니메이션이 실행되지 않아도 콘텐츠가 읽혀야 한다는 점이 중요합니다. 가능하면 transform과 opacity를 쓰고, reduced-motion에서는 시퀀스를 기다리지 않도록 최종 상태를 바로 보여주면 좋겠습니다.
    • @GumboGuts — reduced-motion에서는 최종 상태를 바로 보여줍니다. 다만 rack과 whip은 filter를, iris와 reveal, wipe-up은 clip-path를 사용하고 sequence는 background-position을 바꿉니다. 속성별 비용 차이도 문서화하겠다고 답했습니다.
  • @ferrybig — 필요한 동작을 polyfill하는 JavaScript를 추가하라고 제안합니다.

원문: Dolly / 번역·요약: Trawling

원문 보기 ↗토론 보기 ↗