Martin-Pitt / stylefire

Simple, performant styler for CSS and SVG.

Stylefire

Style-setters for CSS, SVG and scroll, 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

Documentation

• CSS
• SVG
• DOM Scroll

Examples

Setting CSS properties

import css from 'stylefire/css';

const div = document.querySelector('div');
const divStyler = css(div);

divStyler.set({
  x: 100,
  y: 100,
  background: '#f00'
});

Demo on CodePen

Line drawing

import { tween } from 'popmotion';
import svg from 'stylefire/svg';

const path = document.querySelector('path');
const pathStyler = svg(path);

tween({ to: 100 })
  .start((v) => path.set('pathLength', v));

Demo on CodePen

Overriding render batching

import css from 'stylefire/css';

const div = document.querySelector('div');
const divStyler = css(div);

divStyler
  .set({ width: 500 })
  .render();

console.log(div.offsetWidth); // 500

divStyler.set({ width: 100 });

console.log(div.offsetWidth); // 500

divStyler.render();

console.log(div.offsetWidth); // 100

Demo on CodePen

Supported by