its2easy / animate-images Goto Github PK

Right now you can only achieve responsiveness by leaving the height empty and setting the width. Would be great if the opposite would also be possible: leaving the width empty and setting the height.

when you are in the middle of a playTo animation (e.g. playTo(100)), while using the fastPreview mode, and at some point during this animation it finished the full preload and switches from fast to full, it ignores the playTo and just switches to regular play(), causing it to also continue after frame 100.

const wasAnimating = plugin.isAnimating();
const matchFrame = this._settings?.fastPreview.matchFrame;
plugin.setFrame( matchFrame ? matchFrame(this._data.currentFrame) : 1 );
if ( wasAnimating ) plugin.play();

There you see that by first calling setFrame (causing a call to stop(), which resets _framesLeftToPlay) and then play() again. Can't we just simply change it to this, so that it only loses the playTo animation when you dont use the matchFrame option?

const matchFrame = this._settings?.fastPreview.matchFrame;
if (!matchFrame) {
    const wasAnimating = plugin.isAnimating();
    plugin.setFrame(1);
    if (wasAnimating) plugin.play();
}

If so, happy to make a PR for this :)

In production, where I am using the minified version of esm (https://cdn.jsdelivr.net/npm/@its2easy/animate-images/build/animate-images.esm.min.js) I get the following error:

Uncaught TypeError: Cannot read properties of undefined (reading 'pageX')

The minified version both defines a function i (function i(t,i)) and replaces the touches variable (https://github.com/its2easy/animate-images/blob/master/src/DragInput.js#L69) also with the letter i, causing it to conflict and causing the error above.

Would it be difficult to add a feature where we could animate the image frames on scroll? Something similar to this demo from canvas-scroll-clip: https://m5kr1pka.github.io/canvas-scroll-clip/?path=/story/canvas-scroll-clip--default ?

Would be neat if we could add an inertia or easing function so the sequence caries on gradually slowing down as it comes to a stop after dragging. For the best "feel" this might need to keep track of the drag speed.

I've been trying to figure this out but just can't get it. Any help would be appreciated!

Having a hard time proving this mathematically, but when testing with images with a fixed centre point you can see it quite well. Seems like it's maybe 1.5 speed?