🎭 Library for seamless transition animations of images.

Check out the repo or npm for docs and more information.

The gray dashed line around each photo shows its actual size and crop position in regards to background-position, background-size, object-fit, etc...

For more debug examples, visit demo app, test/practical.html, test/directions.html or test/descriptor.html.

Demo 1

Source and target are the same 3:2 image displayed differently.

Demo 2

Source 1:1 thumbnail (cropped from left side) transitions into original 4:3 image

Demo 3

Source and target are the same 2:3 image displayed differently.

Demo 4

Source and target are the same 1:1 with different sizing crop.