Revealing more of image without changing width/height

[SammyC123 16 Likes (Newbie)]

Is it possible to scale an image (from what is effectively a thumbnail) to the full browser width, while revealing more of the image itself? Basically growing a div's background image from just a section of it to the full thing.

 

The example I provided does this with width/height tweens, but I know that is not the best solution (for performance reasons). Curious if there's a better method for accomplishing this via GreenSock. I know you could also use another element to mask it, but that seems like a very clumsy solution.

 

Thoughts from the experts?

See the Pen EQpyPG by anon (@anon) on CodePen

[OSUblake 9,990 Likes (Superhero)]

Not a div, but my favorite is the canvas drawImage() method. You can provide optional source and destination sizes/coordinates. 

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage

 

That's what I'm using to scale these images.

 

See the Pen VMyeqZ by osublake (@osublake) on CodePen

 

[SammyC123 16 Likes (Newbie)]

Blake, this is so cool! Thank you. I'm trying to whip something up in canvas now. I should have thought of it before, it's just so much more work than a simple line of TweenMax 
 

Luckily, your Codepen is there to help me along... thanks again!

[OSUblake 9,990 Likes (Superhero)]

Yeah, using canvas requires a little bit of setup. Another option would be scaling an outer element, and apply a counter scale to an image. It would at least perform better than animating width and height. One problem is that scaling in Chrome can be rather difficult due to bugs in will-change CSS property.

 

This is all done using scaling.

See the Pen VrXVWd by osublake (@osublake) on CodePen

 

 

That's based on some stuff from this thread.

 

 

 

 

 

[SammyC123 16 Likes (Newbie)]

Dude, duuuuuuuuude! Blake, you are such a fountain of knowledge. The scale/counter-scale method is precisely what I was looking to achieve, and you even preempted my headaches with will-change.

 

Thank you yet again for the insight and the links to other resources. You are one of the main reasons this community is so incredible.