Style-setters for HTML and SVG, optimized for animation.
- Tiny: 4kb max, and all stylers can be imported separately.
- Fast: Optimized for use with animation libraries, Stylefire batches rendering once per frame (this can be selectively overridden).
- Simple transforms: Replaces the confusing SVG
transform
model with the simpler CSS model. - Line drawing: Full support for SVG path line drawing, simplified to use percentage-based measurements.
- Cross-browser: Detects and uses vendor CSS prefixes when necessary.
- Extendable: Easy to create performant stylers for other rendering targets.
- Type-safe: Written in TypeScript, with Flow definitions available from flow-typed. 'Cause animators love typesafety :)
Install
npm install stylefire --save
Setting CSS properties
Stylefire will automatically detect and set vendor prefixes for newer CSS properties.
It also allows you to:
- Set
transform
as seperate properties, - Provides
x
, y
, and z
shorthands for translate
, and - Follows the latest CSS spec in ordering seperate transform props by
translate
, scale
and rotate
.
import css from 'stylefire/css';
const div = document.querySelector('div');
const divStyler = css(div);
divStyler.set({
scale: 0.5,
x: 100,
y: 100,
rotate: 45,
background: '#f00'
});
transform
is still supported for more complex transformations.
Demo on CodePen
Line drawing
Stylefire simplifies SVG line drawing. It works out the total path length and allows you to set pathLength
, pathSpacing
and pathOffset
properties as percentages:
import { tween } from 'popmotion';
import svg from 'stylefire/svg';
const path = document.querySelector('path');
const pathStyler = svg(path);
tween({ to: 100 })
.start((v) => pathStyler.set('pathLength', v));
Demo on CodePen
stroke-dasharray
and stroke-dashoffset
are still supported if you wish to work with these attributes directly.
Overriding render batching
By default, firing set
will schedule a render on the next available frame. This way, we batch renders and help prevent layout thrashing.
This behaviour can be manually overridden with the render
method.
import css from 'stylefire/css';
const div = document.querySelector('div');
const divStyler = css(div);
divStyler
.set({ width: 500 })
.render();
console.log(div.offsetWidth);
divStyler.set({ width: 100 });
console.log(div.offsetWidth);
divStyler.render();
console.log(div.offsetWidth);
Demo on CodePen