Introduction

Motion blur for elements that move on the web. It reads the element's transform every frame, works out how far it travelled while a virtual shutter was open, and draws the streak with the technique you pick. It works with CSS transitions, CSS animations, the Web Animations API, Motion, or positions you set yourself.

Today, 9:41
Today, 8:00
Yesterday
Oct 30
Oct 28
Oct 25
Oct 21
Oct 14
Share
ShareAnyone with the link can view.
Copy LinkMessagesMail
DayWeekMonthYear
Delete Project
To Do3
Done2
Write the post
New commentSam left a note on Launch Plan.
Meeting movedDesign review is now at 10:00.
Payment receivedMaya paid you $48.00.
Invoice paidNorthwind paid invoice #1042.

Read how it works, with live examples, in the write-up.

Quick Start

The element that moves is the host. Its first child is the layer, which holds everything you can see. The blur is drawn into the layer, so the host itself has to stay transparent: put backgrounds, borders and shadows on the layer or inside it.

<div class="card">
  <div class="card-face">…</div>
</div>
import { motionBlur } from "@web-kits/motion-blur";

const blur = motionBlur(document.querySelector(".card")!);

That's all for CSS. The host is watched whenever a transition or animation starts on it, or its inline transform, translate, rotate or scale changes, and the blur clears itself once it stops.