Jump to content
GreenSock

fernandofas

Magnify effect - image zoom

Recommended Posts

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

Link to comment
Share on other sites

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

  • Like 5
Link to comment
Share on other sites

OSUblake,

 

You are the master blaster.

 

That's exactly what I'm looking for.

  • Like 1
Link to comment
Share on other sites

  • 4 months later...

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.

Link to comment
Share on other sites

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

 

.

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