Morph SVG path and circle not working together

[jmnes]

Hi there,

 

I'm really new to GSAP - I'm trying to get a continuous blinking eye animation... But really stuck -- can someone please help?  

 

I can get the outer lid to yoyo back and forth, but just can't get my circle (pupil) to morph along with it.
Could anyone help please?

 

Also, it seems like just before lid closes & opens the animation gitters a bit, even though I created the two shapes from the same eye svg - but just squashed it - could anyone suggest why this is?

 

Any help would be great.

 

All the best,

Jen

See the Pen NNQPog by jmnes (@jmnes) on CodePen

[Carl]

Hi and welcome to the GreenSock forums,

 

Thanks for the demo.

 

2 main things were wrong.

 

1: you need to convert your circle and ellipse elements to paths for MorphSVG to be able to morph them

2: you tried adding your second tween after an infinitely repeating tween which meant that it would never ever play

MorphSVGPlugin.convertToPath("circle, ellipse") //convert shapes to paths


var tl = new TimelineMax({delay:1, repeat:-1, yoyo:true});
tl.to(".st0", 2, {morphSVG: ".st1", ease:Power4.easeNone})
.to("#pupil", 2, {morphSVG: "#pupilc"}, 0);//notice this tween starts at time of 0

I'm not sure about the abrupt jump at the end of the lid closing. Will have to look into it a bit more.

 

demo: http://codepen.io/GreenSock/pen/mPNLYe

[GreenSock]

The "jump" at the end is just the browser honoring your "stroke-miterlimit:10" which is set in your HTML inside a <style> block. That basically tells the browser how far to go with rendering the stroke around pointy edges. Change it to stroke-miterlimit:1000 and you'll probably get the effect you want. Or maybe consider changing the stroke-linejoin to "round" (that would be my preference visually)

[PointC]

Just to throw my two cents worth out there.

 

You wouldn't necessarily have to use a morph on the pupil. You could easily squish the scale on the y and get the same effect. I also changed the stroke-miterlimit to 1 to eliminate the glitch. Here's my take on it.

var tl = new TimelineMax({repeatDelay:2, repeat:-1, yoyo:true});
tl
.to(".st0", 0.10, {morphSVG: ".st1", ease:Power4.easeNone, repeat:1,  yoyo:true })
.to("#cc", 0.10, {transformOrigin:"center",scaleY:0, ease:Power4.easeNone,  repeat:1, yoyo:true},0);

See the Pen eZqKYL by PointC (@PointC) on CodePen

 

Happy tweening.

[jmnes]

@Carl @GreenSock @PointC

Thank you all so much