npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

eivor

v0.1.1

Published

🎭 Library for seamless transition animations of images.

Downloads

2

Readme

eivor

🎭 Library for seamless transition animations of images.

View demo page or the sample app from the gif on the right.

What & How

  1. You give it two images <img> tag or element with background-image Could be different scales, cropped,
  2. It calculates how A and B overlap Handles physical image size, crop and different aspect ratio; sizing (object-fit, background-size: cover, contain and percentages), positioning background-position, clip-path, etc...
  3. Creates intermediary element for animation Or picks the suitable one of the A and B. (Either the higher quality one, or one that contains the other)
  4. Runs smooth animation Transitioning from the position and location of the first image, to the second one.
  5. ???
  6. Profit

Installation

npm install eivor
<script type="importmap">
{"imports": {"eivor": "./node_modules/eivor/src/ImageTransition.js"}}
</script>

Usage

ImageTransition class

source and target can be <img> tag or any html element with background-image css property. Third and optional argument is an options object.

import {ImageTransition} from 'eivor'
let transition = new ImageTransition(source, target, {duration: 1000})
await transition.play()

Optionally you can await transition.ready Promise if you need to wait for images to load.

let transition = new ImageTransition(source, target)
// Wait for source and target images to load. Calculating position delta hasn't yet begun.
await transition.ready
// Images are now loaded, here you can do something
await transition.play()
// animation is over, temporary files are removed from DOM, source and target have returned to their original positions, any additional CSS props are removed.

options object

  • options.easing: string
  • options.duration: number
  • options.fill: string
  • options.mode: 'crop'|'recreate'|'clone' automatically determined. Can be overriden with caution. Eivor figures out which image to animate (depending on crop, size and image quality) wheter a) source to target's position while the target is hidden or b) target from source's position while the source is hidden. If cropping one whithin the other is not possible, then a temporary node with the full image is created for the duration of the transition crop: Crop, scale and translation are applied to the larger image. Only available if one image fits into the other. recreate: The larger image is temporarily resized in order to display the whole image uncropped. Then the target image is animated like crop. clone: Like recreate, but animation is applied to a clone of the target image while the original is hidden.

TODOs & Ideas

The script is already mighty as is right now. But there are still some edge cases or nice to have things I'd like to implement.

  • [ ] Figure out a way to write unit tests testing animations is hard. There's an extensive example/debug file but it has to be tested manually.
  • [ ] Add option to specify which image to animate. Now you specify source and target nodes. Until recently the script always animated target node from source node's position and size. Now it can also animate source into target's position. It'd be nice if user could specify which image to use for transition (either which node to manipulate if *ContainedWithinTarget allows it, or which url to use for clone node)
  • [ ] Detect which image is higher quality and use that for animation Will work perfectly with 1:1 images. (maybe it should be default case in this scenario) May collide with variously shaped and clipped source/target images, thus ignoring sourceContainedWithinTarget / targetContainedWithinSource and forcing use of clone instead of manipulating the image that covers more imge space. (maybe it should be just an option defaulting to false)
  • [ ] Ahead of time animation Right now, both source and target images have to be in the DOM, and the script waits for both of them to load in order to calculate their position, size, clip, etc... If user could provide that information to script, we could launch the animation while the target image is still loading (e.g. navigating to new view)
  • [ ] Option to insert clone globally into body instead of source's/target's container
  • [ ] Option to force clone instead of manipulating source or target nodes
  • [ ] work with pixel values in background-position
  • [ ] Investigate use of transform-origin (maybe as an API for user)

Licence

MIT, Mike Kovařík, Mutiny.cz