Jump to content
GreenSock

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

Revealing more of image without changing width/height

Recommended Posts

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

Link to comment
Share on other sites

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

 

  • Like 4
Link to comment
Share on other sites

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

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

  • Like 1
Link to comment
Share on other sites

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.

 

 

 

 

 

  • Like 4
Link to comment
Share on other sites

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.

  • 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.
×