Jump to content


Rolling eyes following mouse events SVG animation

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

Hi people, I've been trying to enhance my skills regarding GSAP and SVG animations. Inspired by the beautiful [Toggl's web app](toggl.com) I've tried to reproduce a neat effect available there, but using a slightly different approach.


I've grabbed a great little monster SVG from a collection and took the challenge of animating the eye of this monster reactive to the mouse hover event on the parent container.


I've had first tracked down all the min and max values to translate X and Y axis in order to roll out all the monster's eye globe and then applied a calculation to transform the 0%-100% from the mouse position on the container to the min/max values to Y and X possible translations.  The result was satisfying.


This is my first sharing post and any feedback regarding best practices, best performance, or simply a better way to achieving that would be very much appreciated. 


@Edit: For some reason the pen is not being correctly loaded, so here is the link: 

See the Pen dLXrew by junglebadger (@junglebadger) on CodePen

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.