Scaling back using two separate images

[three]

Hello, how would you scale back from a hi-res image to a lo-res like so: http://www.pixelettestudios.com/uploads/doctorwho/300x250/index.html

That particular example uses canvas elements which I'm not familiar with so is there a way to go about achieving the same effect using Greensock TimelineMax?

 

I know some transform origins may have to come into play but I'd like to achieve a seamless transition as in the example provided. 

 

Thanks!

[Jonathan]

Hello three, and welcome to the GreenSock Forum

 

I look at that example and see no images scaling back or anything happening.

 

Do you have a working example. I tested in Firefox and Chrome on Windows 10

 

[Carl]

I'm a bit confused too. Are you saying you want to start with a large image, scale it down and then replace it with a smaller image?

If so, is there any particular reason for this? I'm not sure I understand why you would need to load the smaller image if the big one is the same.

 

If you can provide a basic example with the assets you are using or a clearer description we will do our best to help.

[three]

The banner won't show if AdBlock is enabled. You'll have to temporarily disable it to view it.

 

Since the banner I want to achieve this effect in has a 200KB limit, I'm trying to find alternative ways to achieve that smooth zoom out effect without using one huge file that will eat up the majority of the size limitations.

 

Unless theres a different way I could achieve this effect without compromising the image quality.

[Jonathan]

Hello again three, Yep Ad Block was blocking it. I see it now.

 

Here is one way.. that uses easing SlowMo but you would have to tweak it to get the desired result

 

Its just quick and dirty example:

 

See the Pen ZpRQvv by jonathan (@jonathan) on CodePen

 

Just one tween scaling the background-image

 

And a link to the GSAP Ease Visualizer:

 

http://greensock.com/ease-visualizer

 

You can just use one optimized image. I would use a PNG. And you can get a great low file size. Use this site to optimize your .png file. PNG can be re-saved over and over again without quality loss to reduce the file size. It will not lose quality since it is a lossless image file type, unlike a JPG that is lossy and loses quality on each save. PNG all the way!

 

http://tinypng.com/

 

[three]

Perfect!! Thank you so much Jonathan!