Experiments >

Code animation: Resizing with Svelte actions

Experiment #12212th April, 2021by Joshua Nussbaum

One component I need for the code animation project is a way to resize elements.

In this experiment, I look at building a generic component using a Svelte Active.

Example usage:

<div use:resize/>

It handles resizing in 8-directions: north, south, east, west, north-west, north-east, south-west, and south-east.

Code

https://svelte.dev/repl/8b974ea483c648fba362a1e9f3dbc29f?version=3.37.0

Demo

Notes

  • Support resizing in fixed increments, by holding down shift key while dragging
  • Alternative to building this an action is using a component with a slot
view all experiments

Stay tuned in

Learn how to add more experimentation to your workflow