Jump to content


Best technique for blinking eyes

Recommended Posts

Hi All,


I am trying to achieve a blinking eye effect.


Ideally, I would like the eye to travel down from the top to half in the eye, this would simulate the eyelid moving down the eye to meet the other eyelid.


I have tried scale with transformOrigin to achieve the effect as well as opacity 0. Opacity 0 seems to give the best effect, but the visible fade doesn't look too great.


Would I need to use SVGmorph to achieve this?


Can anyone point me in the right direction?


My codepen attached shows the example.





See the Pen dpWpOQ by tmgale (@tmgale) on CodePen

Link to comment
Share on other sites

Hello tmgale, and Welcome to the GreenSock Forum!


There are many different ways to do this. A simple way is to use SVG so you can make trapezoid shape with the <polygon> element. And then just animate the scaleY CSS transform property. With delayedCall() used to time the blink.


See the Pen dYwLXK by jonathan (@jonathan) on CodePen


Keep in mind that you will have to tweak the initial position of the polygon SVG element so they align correctly with your SVG face graphical elements.



CSSPlugin: http://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSPlugin/

delayedCall() : http://greensock.com/docs/#/HTML5/GSAP/TweenMax/delayedCall/

CSS transform-origin property: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin

CSS transform property: https://developer.mozilla.org/en-US/docs/Web/CSS/transform



  • Like 6
Link to comment
Share on other sites

Nice demo, Jonathan!

  • Like 1
Link to comment
Share on other sites

Thanks for the demo Jonathan!


Really insightful!! I should now be able to achieve the effect I want!


Thanks again :)

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