Animating path issues

[ochalmers]

Hi all,

 

The problem i'm having is a what appears to be a browser issue (namely firefox, safari). My codepen attached shows the animation I have working (using the fantastic drawSVG plugin and GSAP) at the end of which the raindrops are supposed to animate in their own timelines repeating. Chrome seems to want to animate it perfectly (why can't everyone just use Chrome!? ) but when in Safari and Firefox the paths don't want to translate position, only opacity. 

Any suggestions as to a workaround for this?

Thanks!

Oli

 

[edit] codepen url removed by moderator [/edit]

[Diaco]

Hi ochalmers 

 

Since there is percentage-based value for 'y' property ( svg elements ) ,  pls be sure that using/need last version (  GSAP 1.17.0  )

[Carl]

First, great animation. Nice work! Thanks for the demo.

 

Yup, Diaco is exactly right (no surprise), updating to 1.17.0 will have it working in Safari and FF.

Here is a pen for you to use: http://codepen.io/GreenSock/pen/ZGrvwE

 

In the future instead of pasting the full source of DrawSVGPlugin into the JS planel, please fork one of our pens from: http://codepen.io/GreenSock/pen/ZGrvwE . They use a special version that is less easy for people to steal (Don't worry, I'm sure you didn't know). Thanks!

[ochalmers]

You guys rule, those responses were so quick, Thanks for the kind comment too Carl.

Firstly - sorry for embedding the plugin, as a member I should have been more aware

 

Secondly - thanks again for the update! Can't believe i'm not using the latest version and the solution was as simple as this. *embarrassed face*

 

Thirdly - GSAP has officially changed my life. It absolutely kills it, thanks so much for creating this wonderful piece of kit.

 

Thanks,

Oli

[Carl]

Ah, we're blushing over here. Thanks so much and no worries.

 

I suspect you know about this article: http://greensock.com/svg-tips but keep it handy just in case. We plan to update it as more svg features surface.

 

Happy Tweening

[Diaco]

in addition , this a pen with Club GreenSock Plugins : 

See the Pen OPqpRJ by GreenSock (@GreenSock) on CodePen

[GRAY GHOST]

“In the future instead of pasting the full source of DrawSVGPlugin into the JS planel, please fork one of our pens ”

 

 

Not to intrude in this issue, but Carl what do you think about documenting about it somewhere to avoid these issues from popping up (I've done it too obviously)? I would be someone to find value in that kind of thing. Maybe others? Just a thought. Carry on

[OSUblake]

Good point!

 

I had no idea that pen Diaco posted even existed. Whenever I want to include one of those plugins, I always have to search through a bunch of different pens to find the right file.

[Diaco]

blake , pls check this post : http://greensock.com/forums/topic/11522-club-plugins-on-codepen/

[Carl]

Throughout the site we do encourage people to fork and explore our demos. But yes, it would help to make it more clear.

We were hoping to fancy-up that pen Diaco referenced, but for now its been placed in the Support Starter Pens collection: http://codepen.io/collection/qHasJ/

 

thx for the suggestions