ohem

If I specify the width and height inline with the rest of the svg code (instead of in the css for the container div), will that ensure that it looks/fits the same across modern browsers? I don't need it to be responsive necessarily, I just want the svg to be a specific size & then be scalable/animatable with GSAP. I was looking at this page: https://greensock.com/svg-tips and it says all features work in ie9+, but I don't currently have a way of testing on a pc (and I'm new to HTML5 animation) so I just want to be sure I'm not missing something important when setting things up.

I have another quick question. I'm on a Mac so I can't test in IE. Is there something additional I need to be doing to make sure the size of the SVG fits the width of the holder div? I've come across several articles that say IE has bugs that prevent proper scaling of SVGs, so I'm not sure if there's an extra step I should be doing to make the appearance the same in all browsers.

Perfect, thank you so much. This forum is amazing!

Thanks so much! How would I prevent it from appearing until after the delay, though? Like, it would be invisible to start, but then instantly appears at full opacity & then the tween happens. New codepen example here: http://codepen.io/ohem/pen/mJLbGj

Okay, I'm testing out fromTo now, and I can't seem to get a delay to work. I tried putting it in both the from and the to sections, but neither worked. Does anybody have any suggestions? Ideally, what I want to do is have this shape appear at a specific time, at full opacity, and then fade away. But I don't want it to appear until after a specific moment. In general, I'm also just wondering what the trick is to get the delay to work with fromTo. TweenMax.fromTo("#round", .5, { css: { scale: 3, fillOpacity: 1, transformOrigin: "center center", ease: Back.easeOut.config(1.5), } }, { css: { scale: 1, fillOpacity: 0, delay: 1, } });

Thanks so much, that works perfectly!

Thanks for catching that! I had edited it in TextEdit, and that seems to have changed the quotation marks automatically. I updated the CodePen and the animation works now, but now I'm wondering how not to crop the circle (or any SVG) if I scale it larger than the div or bounding box? overflow:visible doesn't seem to fix it.

Hi, I am new to GSAP and HTML5/Javascript animation; I'm used to timeline animation in Flash and After Effects, but I think it's a good idea to learn HTML5/Javascript animation, and GSAP seems like a great tool. I wanted to test out SVG animation with GSAP, so I made a quick shape with two layers in Illustrator & then saved out the SVG code & gave each layer/shape an ID because I want to animate the circle and the check separately. For some reason, neither layer will animate... I feel like this is probably be pretty basic, but I'm not sure what's missing. Any help/suggestions are much appreciated.