node package manager
Love JavaScript? Your insights can make it even better. Take the 2017 JavaScript Ecosystem Survey »


Drift State

A small JS helper to give your CSS transitions a transitioning (aka drifting) state, with no additional library dependencies (like jQuery).

Work in progress

This project works, but is still in early stages of development, so use with caution.


The library uses the following features, which you'll need to polyfill if not supported:

  • classList
  • Array.forEach
  • Array.isArray
  • querySelector/querySelectorAll
  • addEventListener/removeEventListener


  • el {HTMLElement}: The HTML element that you are transitioning.
  • property {string}: The CSS property that you are transitioning.
  • cssState: {string} (optional): The CSS state name (defaults to adrift).
  • cssNoState: {string} (optional): The blocking CSS state name, which gets added by browsers that don't support CSS transitions (defaults to no-drift).
  • stateTarget: {HTMLElement} (optional): An element that you want to attach the CSS states to, if not using el. Defaults to using el.
  • clearCssStateWaitTime: {number} (optional): The amount of milliseconds to wait until clearing wrongly configured CSS states. Defaults to 5000 (5 seconds).


Inspired by jQuery plugin 'prepareTransition'


A simple example can be run by opening src/example/example.html in the browser. Shows a fade out that adds a display:none when finished.

Example CSS

.box {
    width: 100px;
    height: 100px;
    background-color: #ababab;
    opacity: 1;
    transition: opacity 1s linear;
} {
    opacity: 0;
    display: none;
.box.adrift {
    display: block !important;
.btn {

Example JS

var box = document.querySelector(".box")
    , btn = document.querySelector(".btn");
btn.addEventListener("click", function(evt) {
        el: box, property: "opacity"


  • Add an optional callback
  • e2e tests