strokeDashoffset

[Joostan 7 Likes (Newbie)]

Good morning people,

 

Could somebody explain why the 'strokeDashoffset' in the following pen will not animate?

 

 

Inspecting the element in the DOM and manually manipulating the 'stroke-dashoffet' i can easily animate property.

 

images attached.

 

Thanks

 

 

 

See the Pen kkYEpk by Joostan-33 (@Joostan-33) on CodePen

[Carl 9,066 Likes (Superhero)]

Thanks for the demo and images. Very helpful.

 

The issue was that you set stroke-dashoffset as a CSS property but tried to animate it as an html attribute via the AttrPlugin. This should do the trick:

animation.to(thisEl, 3, {attr:{cx:68, cy:67}, ease: Power2.easeOut, strokeDashoffset:62.84});

http://codepen.io/GreenSock/pen/kkYJwx

 

However, since you are a Business Green you should just use DrawSVGPlugin     

animation.to(thisEl, 3, {attr:{cx:68, cy:67}, ease: Power2.easeOut, drawSVG:0});

http://codepen.io/GreenSock/pen/gwbzxb?editors=0010

[Joostan 7 Likes (Newbie)]

Thank you.

 

'noice' work on DrawSVGPlugin, i'm plugging that one in!

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