Magnify effect - image zoom

[fernandofas]

Hi all,

 

I'm wondering if some of you had the time to work out some code for a magnify effect with greensock.

 

 

Something like this codepen: 

 

 

Thanks in advance.

 

 

Fernando Fas

See the Pen beqGrM by fernandofas (@fernandofas) on CodePen

[OSUblake]

How about this. Uses transforms instead of top, left, and backgroundPosition. It could also be optimized a little by only updating it on every animation frame instead of every mouse move. And notice how I'm using TweenLite.delayedCall() instead of setTimeout. It's actually a tween, so you can call TweenLite methods on it like play, pause, restart, etc.

See the Pen 44398726429b42dfbf8921899af98426?editors=0010 by osublake (@osublake) on CodePen

[fernandofas]

OSUblake,

 

You are the master blaster.

 

That's exactly what I'm looking for.

[Jason Baciulis]

Hey Blake, you mentioned that it could be changed to update on every animation frame instead of mouse move. I am trying to achieve a magnifying glass entering into view and magnifying image, but without mouse events. I would appreciate your help, because I couldn't figure it out.

[OSUblake]

You can update stuff on every animation frame by setting a dirty flag like I do with scrolling in this demo.

See the Pen 0d4742d2200d028ed42297cb874af2b5?editors=0010 by osublake (@osublake) on CodePen

 

Or you can use the ModifiersPlugin with some infinite running tweens like some of the examples in this post.

http://greensock.com/forums/topic/15210-easing-to-y-position-set-on-mousemove/?p=65912

 

So here's how that could work with this demo. It should perform much better than the way I originally had it set up since it no longer has to create new tweens on every mouse move. It also uses transforms, so it will be faster than using background position.

See the Pen QGLYME?editors=0010 by osublake (@osublake) on CodePen

 

.