Quircky behaviour of SVG image

[jellevrswk]

For a school assignment I have to make blinking eyes using GS. I figured that If a make an SVG image with seperate eyelids I could use ScaleY to enlarge the eyelids and give the illusion that they're blinking. But for some reason the lower eyelids are acting strange and moving to different location while they're not told to.

I hope anyone can tell me what I'm doing wrong and explain what to do.

See the Pen EVOZom?editors=001 by jellevrswk (@jellevrswk) on CodePen

[Jonathan]

Hello jellevrswk, and Welcome to the GreenSock Forum!

 

I'm not near my computer right now.

 

But have a look at this codepen example for blinking eyes:

 

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

 

You can probably just grab the blinking bits and integrate into your scene. You might have to adjust the SVG lid polygon points attribute so you get the right dimensions and position. And change the eye lid fill color to black. But its a good starting point.

 

[Diaco]

Hi jellevrswk 

 

in addition to Jonathan's advice :

 

the problem come from your SVG ( your SVG already has transforms )

 

pls check Jack's answer and detailed explanation here : http://greensock.com/forums/topic/12732-svg-tweenmaxto-animation-distorts-initial-scale-and-transform-values/

 

btw , you can fix your svg issues with this online tool : https://jakearchibald.github.io/svgomg/

paste your svg in " Paste markup " field and don't forget to turn off the " Clean IDs " in options menu 

 

your demo with fixed svg : 

See the Pen gaZJzg by anon (@anon) on CodePen