Fluid zoom between images

[Jason Justice]

I'm already doing this project with DOM elements. Looks like canvas could help. If you check my post above the final version has 99 images which is why it's killing some devices and one other member suggested just doing it as a video. 

[GreenSock]

[re-posting from the correct account]

 

Great work, Blake! This sparked me to look for a way to just define an ease that'll do all this wizardry for you and here's what I came up with: 

 

var ExpoScaleEase = function(start, end) {
        var factor = Math.log(end/start),
            change = end - start;
    return function(v) {
        return (start * Math.exp(factor * v) - start) / change;
    };
};
//to use it, you pass in the start/end scales...
TweenLite.to("#img", 5, {scale:0.5, ease:ExpoScaleEase(30, 0.5)});

 

If you guys think this is useful, I could add it to EasePack. Maybe the official API would look more like:

ExpoScaleEase.config(start, end);

 

Ya think? 

 

Here's a fork of the original with this applied:

 

See the Pen 12ad879abc37caa60b4c3ea7454de6bf?editors=0010 by GreenSock (@GreenSock) on CodePen.

Open to suggestions. It seems to work pretty well in my limited tests. 

[OSUblake]

On 10/5/2017 at 7:59 PM, GreenSock said:

If you guys think this is useful, I could add it to EasePack. Maybe the official API would look more like:

ExpoScaleEase.config(start, end);

 

Ya think? 

 

Sounds like a good idea. Using an ease drastically reduces the number of animations needed to make it work.

 

Maybe @PointC can share some other use cases for an exponential scale ease as it's a new one for me?

 

I want to try to some other things with it, but here's my version using the ease.

 

See the Pen LzrbPQ?editors=0010 by osublake (@osublake) on CodePen.

 

 

[Dipscom]

Throwing my two cents in. Yes, it would be handy. A rather limited use to start with but I am pretty confident people will find new uses for it.

[Visual-Q]

Interesting, back in the day on an animation stand, before computers what you refer to as exponential scale was called a perspective truck.  i.e. the camera trucks in at a variable rate towards the artwork to make it appear to approach the viewer at a consistent speed.

 

I believe the reason for this is that in the 3d world while the actual distance between any two objects may change at a consistent rate, the rate of change in the relative distance between them increases as the object gets closer. Because our brains are experts in 3d spatial perception, we do the math in our heads automatically adjusting for the increased change in perspective to determine if the speed of an object approaching us is moving at a constant rate and this is why linear zoom of 2d objects looks off to us.