Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Scaling back using two separate images

Go to solution Solved by Jonathan,

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

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. 



Link to comment
Share on other sites

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



  • Like 1
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • Solution

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:




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!





  • Like 1
Link to comment
Share on other sites

Perfect!! Thank you so much Jonathan! :)

  • Like 1
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.