bewegung.

[bəˈveːɡʊŋ - the german word for motion]. This 4KB, 0-dependency library uses the FLIP animation technique, which can smoothly animate layout changes. It makes the browser work less compared to other css and js animation approaches.

Bewegung can even animate currently unanimatable properties like display: none or element addition/removal

Examples

changes

additions / deletions

hello
content that could be very long and expand quite a bit. you never know whats happening
  • coffee and flowers on a table

    red

    from 1992

  • distant hills

    blue

    out of the

  • wigs and leafes in front of a wall

    green

    calming and nice

  • flowers in front of a wall

    yellow

    inperfectly perfect

Documentation

Installation

install via npm/yarn/pnpm etc and import it

	
npm install bewegung

import { Bewegung } from "bewegung";

//registers the web-component unter the name "bewegung-boundary";

Bewegung.register()

from there you can use it as a web-component. It will animate all the changes it can detect within

Caveats

this is not a production ready piece of software and still in early alpha stage. The API might still be subject to change. I am still not sure if this will ever reach anything further because there are currently some bigger issues to tackle (and a myriad of bugs):


  • counter-scaling:When scaling an element, its children get counter-scaled to look like they remain unchanged. Depending on the scale-amount the size change every frame for the parent and children might not be the same and the animation looks off even if the start and end are correct. Adjusting the childrens easing can fix this, but calculating an inverse easing curve is difficult.
  • reactivity:We are calculating pixel-perfect start and end points for a given DOM. If there are changes to the DOM, the calculations are wrong again and need to be recalculated. It is hard to detect changes while animating part of it. With the resize- and mutation observer, we can get some of the direct changes but no indirect changes. There is the possibility to use an intersection observer with a precise root margin to see if an element changes position but that can only work if the animations are paused.
  • Weird browser behaviors:Chromium-based browsers can throw off the calculations in certain situations. If the calculation happen out of the viewport and the animation is happening above it, the calculations are off again. This is likely due to a mechanism to prevent page jumps from lazy loaded elements but hard to predict.