stylefire's Introduction

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

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