css-transit
v1.2.0
Published
A tiny library for fast, smooth, and controllable CSS transitions.
Downloads
2
Readme
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 withfrom
,to
,ease
,stagger
, anddelay
- Returns a
Promise
which resolves when the transition is finished (through theontransitionend
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-definedcubic-bezier()
display: "<value>"
transitions will be applied at the end of transitiondelay: 500
delays the start of the transition using standardtransition-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
)