SVG animation not working; am I missing something?

[ohem]

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.

See the Pen mJLbGj by ohem (@ohem) on CodePen

[Diaco]

Hi ohem 

 

seems you just have syntax / typo issue , pls replace “check” with "check"

[OSUblake]

That's really weird! What did you do turn into open/closed quotation marks?

[ohem]

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.

[Diaco]

pls add this to your css : svg{ overflow : visible ; }

[ohem]

Thanks so much, that works perfectly!

[ohem]

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,
    }
  });

[Diaco]

try this :

TweenMax.fromTo( "#round" , .5 , { scale:3 , fillOpacity:1 , transformOrigin:"center center" },
{ scale:1 , fillOpacity:0 , delay:1 , ease:Back.easeOut.config(1.5) });

[ohem]

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: 

[Carl]

Try this: http://codepen.io/GreenSock/pen/VLxLEQ

 

notice that immediateRender:false is set on the first from() tween and that #round is initially hidden using css.

[ohem]

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

[ohem]

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.

[PointC]

IE can be a pain since it usually needs to be told what size the SVG should be, but that doesn't help much with responsive design. The padding-bottom hack works quite well for inline SVGs.

 

Here's a detailed article which should help: https://css-tricks.com/scale-svg/

[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.

[PointC]

IE should behave if you specifically tell it height and width( in pixels) of the SVG and then animate the internals groups, paths, circles, lines etc... If you use percentages for the size of the SVG, that's where it tends to go off the rails without the padding-bottom hack. I personally use the padding-bottom hack in a containing div for most everything inline so I don't have to worry about IE causing trouble.  

[Diaco]

ohem 

 

actually we have to focus on supporting features of the GSAP API , not the basics of html , css or svg . 

i think that's better to read SVG articles and references , if you have any problem with GSAP be sure we will be happy to help you .

[ohem]

Hi again, I have been reading up a lot on SVGs, and I tried updating this: 

See the Pen EjLVav by ohem (@ohem) on CodePen

 (which animates exactly how I wanted) to use the IE padding hack to ensure that the SVG fits the same in all browsers.  

 

Doing that allowed me to scale the SVG the way I wanted using a container DIV, and when I previewed the static version in a cross browser testing site it does look good in the screenshots of different versions of IE. (Yay!)

 

However, when I add back the animation JavaScript, the animation is not working properly anymore:  

See the Pen pJQRYB by ohem (@ohem) on CodePen

 

Even with immediate render set to false for the first "#round" SVG path, and visibility:hidden for the SVG, the first circle is showing up (unscaled) before the animation starts.  Is there a way to fix this?  it occurs in Chrome, Firefox, and Safari on my Mac.  (I'm not able to test the animation on a PC at this time so I don't know if it's an issue in other browsers/platforms too.)

 

Interestingly, removing "immediateRender:false" gets it back to the correct scale from the start, but I need it to not render/appear until after the delay, like this version: 

See the Pen EjLVav by ohem (@ohem) on CodePen

 

Any ideas what could be causing the problem, or how to fix it?

 

Thanks so much, these forums are great.

[Carl]

I think you need to then hide #round in your css like:

 

http://codepen.io/GreenSock/pen/mJQWwj?editors=011

[ohem]

Thank you!

[ohem]

Hi, sorry to keep bringing this back.  I'm currently animating a SVG with GSAP in a real project (I was just testing/practicing before), and everything works great in almost every browser!  How exciting.

 

Except for one thing... apparently overflow:visible is not working on android, whether I declare it inline, in the CSS, or both.  (I've tried previewing it in several versions of the Android browser on crossbrowsertesting.com and they all have the same issue).

 

Does anybody have an idea of how to fix this, so that when elements of the SVG are scaled outside of the viewbox, they can still be visible?  I see no issues in Chrome, Firefox, Safari, or any version of IE that supports SVG.  It's just the Android browser that's an issue.

 

This example has the same problem: 

See the Pen GJwWPz by ohem (@ohem) on CodePen

 

Any help or suggestions are much appreciated!

[Jonathan]

There was a bug in webkit regarding svg and overflow

 

https://code.google.com/p/chromium/issues/detail?id=231577

 

and same bug in firefox gecko:

 

https://bugs.webkit.org/show_bug.cgi?id=96163

 

The bug shows as fixed .. but still has issues in some builds of webkit

 

SVG does not respect overflow:visible. .. you could try overflow:auto but its treated as overflow: visible

 

you can try and set clip-path, but you will need to test:

 

https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path

https://css-tricks.com/almanac/properties/c/clip/

 

Taken from MDN SVG overflow docs: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/overflow

 

The overflow attribute has the same parameter values as defined for the css overflow property. however, the following additional points apply:

• The overflow attribute applies to elements that establish new viewports (see below), <pattern> elements and <marker> elements. For all other elements, the property has no effect.
• For those elements to which the overflow attribute can apply, if the overflow attribute has the value hidden or scroll, the effect is that a new clipping path in the shape of a rectangle is created. The result is equivalent to defining a <clippath> element whose content is a <rect> element which defines the equivalent rectangle, and then specifying the <uri> of this <clippath> element on the clip-path attribute for the given element.
• If the overflow attribute has a value other than hidden or scroll, the property has no effect.
• Within SVG content, the value auto is equivalent to the value visible.
• When an outermost svg element is embedded inline within HTML, if the overflow attribute has the value hidden or scroll, then the browser will establish an initial clipping path equal to the bounds of the initial viewport; otherwise, the initial clipping path is set according to the CSS clipping rules.
• When an outermost svg element is stand-alone, the overflow attribute on the outermost svg element is ignored for the purposes of visual rendering and the initial clipping path is set to the bounds of the initial viewport.
• The initial value for overflow as defined in CSS is visible, and this applies also to the root <svg> element; however, for child elements of an SVG document, SVG's browser style sheet overrides this initial value and sets the overflow attribute on elements that establish new viewports, ‘pattern’ elements and ‘marker’ elements to the value hidden.

As a presentation attribute, it also can be used as a property directly inside a CSS stylesheet, see css overflow for further information.

 

Hopefully it is of some use

[ohem]

So there's no clear way to show overflow on SVG child elements on the Android browser? (All other browsers seem to do fine with overflow:visible.)

 

I was trying to see if playing with :nth-child in the CSS would help but no luck with that either.  

[Jonathan]

This is not a GSAP bug, but a render bug in how the browser, in this case Mobile Chrome or stock android browser is rendering SVG elements (and their children) with overflow.

 

ohem, In my above post i provided links to browser bug reports that affect SVG and overflow. As well as the intended behavior of overflow on SVG and their children.

 

Depending on your Android version the bug still might be present with some builds of Android.

 

What is the version of Android you are seeing this on?

Also what is the Android Browser and Android Browser version?

 

[ohem]

I was testing using crossbrowsertesting.com & the bug occurred on every version of Android browser.

[Jonathan]

In those svg overflow bug reports you can see how other users still report that bug as not being fixed even though the bug report is marked as fixed.

 

Sometimes its best to test on an actual device with the os version / build and browser version / build. i have seen multiple times where an emulation tool will show a display bug and will not show the display bug, or vice-versa

 

Sometimes you have to see it on the actual device, in my own experience.

 

Other related webkit bug, make sure to read #5 - and view the jsfiddle:

 

https://code.google.com/p/chromium/issues/detail?id=231577

 

and this:

 

https://codereview.chromium.org/220853002

 

the only thing i can think of is to submit a blink webkit bug report, since this not related to GSAP, but a browser svg overflow bug:

 

http://www.chromium.org/for-testers/bug-reporting-guidelines