css-transit

css-transit 🎉

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:

	Basic usage import { cssTransition, ease } from 'css-transit' const element = document.querySelector('.element') cssTransition(element, 500, { transform: 'translate(200px, 200px) scale(1)', })
	Easing 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)' }
	Showing / Hiding 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.
	Staggering // 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).
	Callbacks / Promises 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.
	Function props 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
)