TweenMax.staggerTo doesn't work correctly in safari

[hedieh.oveisi]

Hi,

 

I use TweenMax.staggerTo for drawing a circle with svg. It works perfect in all browser but safari.

 

Can U please help me to solve this problem.

 

Thanks

 

Regards

See the Pen ozqNwP by hedieh_oveisi (@hedieh_oveisi) on CodePen

[Carl]

Hi and welcome to the GreenSock forums,

 

Thanks for the demo. Very helpful.

 

if you set your animation duration to 20 seconds and inspect the svg in Safari's developer tools you will see that that GSAP is animating the strokeDashOffset inline style just fine. Seems Safari is just rendering those changes differently than Chrome. There doesn't seem to be anything wrong with TweenMax.staggerTo().

 

I'm not exactly sure why safari is rendering differntly. Perhaps you need to set up your stroke-dasharray="350px" stroke-dashoffset="-350px" values differently at the start for Safari. 

 

Our DrawSVGPlugin has a bunch of code built in to avoid these types of browser bugs and inconsistencies. This version should work fine in all browsers:

http://codepen.io/anon/pen/gwZpKj?editors=1010

 

Notice I didn't have to set stroke-dasharray="350px" stroke-dashoffset="-350px" anywhere. The plugin knows which values to use.

 

You can learn more about DrawSVG here: http://greensock.com/drawSVG

 

DrawSVG is available to Club GreenSock members: http://greensock.com/club/

[hedieh.oveisi]

Hi,

 

Thanks alot for your reply.

 

I change the stroke-dashoffset="-350px" to stroke-dashoffset="350px" in my html, and also changed it to 0 in my script.

 

It changes the direction of circle drawing but it's ok and work in every browers!