Jump to content
Search Community

Fluid zoom between images

Guest jasonjustice
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

[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:

 

Open to suggestions. It seems to work pretty well in my limited tests. 
  • Like 3
Link to comment
Share on other sites

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

 

 

  • Like 3
Link to comment
Share on other sites

  • 3 months later...

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.

 

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...