Jump to content
GreenSock

tmgale

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.

 

Thanks,

 

Tom

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.

 

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

 

:)

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