Responsive online graphics may need to update in response to changes in window size. It’s common to do this by listening for the resize event on the window object, but this results in a choppy effect since the resize event is not triggered frequently enough for a smooth animation.

This module makes it easy to implement smooth resize animations. While the window is being resized it uses requestAnimationFrame to run your drawing function at a (hopefully) decent frame rate.

It’s designed to be used with an ES6 module bundler such as rollup.js with rollup-plugin-node-resolve:

import smoothResize from "smooth-resize";

smoothresize(function(width, height) {
	// Redraw at the specified size
});

or you can include a self-contained version directly in your HTML:

<script src="https://cdn.flourish.rocks/smooth-resize-v0.min.js"></script>

It’s self-contained and tiny. Even the non-minified version is smaller than 1k.

It was developed for use in Flourish templates, but it’s open source and you can use it for anything.