Stylers are performant CSS, SVG and DOM scroll style setters optimized to work with animation libraries.

They batch rendering on the render step of the Framesync render loop to prevent layout thrashing.

They also provide a cached state to prevent unnecessary DOM reads.


Stylers are included with Popmotion, but available as the standalone library stylefire.

npm install stylefire --save



The styler function accepts a single Element and returns either the CSS or SVG styler depending on the detected element type.

From Popmotion:

import { styler } from 'popmotion';
// Or, to import on its own:
import styler from 'stylefire';

As a standalone library:

import styler from 'stylefire';



get(key: string): any

Returns the value of the provided key.


set(props: {}): this
set(key: string, prop: any): this
set(key: string): (prop: any) => void;

Set the provided property(s) and schedule a render for the next frame.

If only a key is provided, this returns a curried function which can then be provided a property value to set to that key.


render(): this

Immediately render, without waiting for the next frame.

Create custom styler

Custom stylers can be created with the createStyler function.

Stylers are useful for styling any rendering target that would benefit from either: 1) Batched renders, or 2) Cached state.

createStyle accepts a single object of arguments:

  • onRead(key: string, props: {}}): Fired when the styler’s get is called and no property is already found in its state cache.
  • onRender(state: {}}, props: {}, changedValues: string[]): Fired when the state changes, either on the next available render step on the Framesync render loop, or when its render method is called.
  • useCache: boolean: Default true.


import { createStyler } from 'stylefire';

const demoStyler = createStyler({
  onRead: (key, { customObject }) => customObject[key],
  onRender: (state, { customObject }, changedValues) => {
    changedValues.forEach((key) => customObject[key] = state[key]);

const color = { red: 255, green: 255, blue: 255 };

const myDemoStyler = demoStyler({ customObject: color });
myDemoStyler.set('green', 0);