css-transit v1.2.0

A tiny modern library for fast, smooth, and controllable CSS transitions.

Install

npm install css-transit

Why

Libraries like GSAP or Popmotion are not needed when dealing with basic CSS transitions, and can significantly reduce performance.

css-transit uses a common method of triggering layout to allow inline css transitions on demand, keeping DOM changes to a minimum which allows the browser to animate smoothly. It has been used in multiples of large client production applications over several years.

Features:

• Transition one or multiple elements between css props
• gsap-like usage with from, to, ease, stagger, and delay
• Returns a Promise which resolves when the transition is finished (through the ontransitionend event)
• Standard easing curves included 🎁
• Smaller than 1kb gzipped 👌

Usage:

Single method for everything

css-transit uses a single method,cssTransition(), which does different things based on the supplied arguments.

See below examples for more detail.

Usage examples:

import { cssTransition, ease } from 'css-transit'

const element = document.querySelector('.element')

cssTransition(element, 500, {
  transform: 'translate(200px, 200px) scale(1)',
})

cssTransition(element, 500, {
  transform: 'translate(0, 0) scale(1.5)',
}, {
  transform: 'translate(200px, 200px) scale(1)',
  ease: ease.inOutQuint
})

css-transit comes with the standard easing functions.

You can also supply your own cubic-bezier:

cssTransition(element, 500, {
  opacity: 1,
  ease: 'cubic-bezier(0.540, 0.745, 0.230, 0.765)'
}

cssTransition(thing, 500, {
  opacity: 0,
  transform: 'translate(80px, 100px) scale(1.3) rotate(40deg)',
  display: 'none'
})

display props will be applied after the transition finishes, to allow easy hiding of elements.

// first convert the NodeList to an Array
const elements = [...document.querySelectorAll('.thing')]

cssTransition(elements, 500, {
  transform: 'translate(0, 0)',
}, {
  transform: 'translate(0, 200px)',
  ease: ease.inOutQuart
}, 50)

When transitioning multiple items, the last argument can be used to stagger the animations (this adds a transition-delay).

function loop() {
  cssTransition(elements, 500, {
    transform: 'translate(0, 200px) scaleY(.4) scaleX(.2) rotate(180deg)',
    ease: ease.inOutQuart
  }, 100)
  .then(() =>
    cssTransition(elements, 500, {
      transform: 'rotate(360deg)',
      ease: ease.inOutQuart,
      clearStyle: true
    }, 100)
  )
  .then(loop)
}

loop()

cssTransition returns a Promise that is resolved when the animation has finished.
When transitioning multiple elements, the Promise is resolved when the transition of the last element finishes.

cssTransition([...thing], 500, {
  transform: (el, i) => `translate(0, ${(i+1) * 40}px)`,
  ease: ease.inOutQuart
}, 100)

cssTransition 1.2.0+ allows you to use functions that returns a value as props.
The first argument is the element being changed.
The second argument is the number of the element in a staggered array.

Props

css-transit simply sets and unsets inline styles and support any standard css props that would go into the HTMLElement.style property. It also includes a few special props to ease development.

• ease: "<value>"
  can be used to provide common easing functions and self-defined cubic-bezier()
• display: "<value>"
  transitions will be applied at the end of transition
• delay: 500
  delays the start of the transition using standard transition-delay
• clearStyles: true
  clears all styles after transition finished.

Methods

css-transit uses a single method for all transitions based on context.

// Element transition to end props
cssTransition(
  element: HTMLElement,
  ms: Number, 
  endProps: Object
)

// Element transition from starting props, to end props
cssTransition(
  element: HTMLElement,
  ms: Number, 
  fromProps: Object,
  endProps: Object
)

// Multiple element transition to end props
cssTransition(
  elements: Array,
  ms: Number,
  endProps: Object
)

// Multiple element transition from starting props, to end props
cssTransition(
  elements: Array,
  ms: Number,
  fromProps: Object,
  endProps: Object
)

// Multiple element staggered transition to end props
cssTransition(
  elements: Array,
  ms: Number,
  endProps: Object,
  staggerInterval: Number
)

// Multiple element staggered transition from starting props, to end props
cssTransition(
  elements: Array,
  ms: Number,
  fromProps: Object,
  endProps: Object,
  staggerInterval: Number
)