Best technique for blinking eyes

[tmgale]

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.

 

Thanks,

 

Tom

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

[Jonathan]

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.

 

Resources:

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

 

[Carl]

Nice demo, Jonathan!

[Jonathan]

Thanks Carl!

[tmgale]

Thanks for the demo Jonathan!

 

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

 

Thanks again