Jump to content
Search Community

Rect height animation problem in FF and Edge

Allgress test
Moderator Tag

Go to solution Solved by OSUblake,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I'm writing the code to draw bar charts and am using timelinemax to animate the initial transition of the bars from 0 to their height. And it works beautifully in Chrome, but in Firefox and Edge the height attribute isn't animating. Nothing displays at all in IE, but that seems to be a separate problem.


I'm having a hard time recreating the exact problem in the code pen, but the pen doesn't animate the height in chrome and doesn't show anything in ff and edge, which is similar.

Here is what the actual code looks like.


    var tl = new TimelineMax();
    var delay = 1 / barData.Segments.length;
    for (var i = 0; i < barData.Segments.length; ++i) {
        var segPercent = barData.Segments.Count / maxValue;
        var segHeight = axisHeight * segPercent;
        var y = startY - segHeight - prevHeight - 1; // - 1 so that bar doesn't overlap axis
        var segColor = barData.Segments.Color;
        var bar = document.createElementNS("http://www.w3.org/2000/svg", "rect");
        bar.setAttribute("class", "bar-chart-segment");
        bar.setAttribute("x", x + (barWidth / 10));                         //
        bar.setAttribute("y", startY - prevHeight - 1);                   //  magic numbers in these lines are for padding
        bar.setAttribute("width", barWidth - (barWidth / 10));      //
        bar.setAttribute("height", 0);
        bar.setAttribute("fill", rgbToHex(segColor.R, segColor.G, segColor.B ));
        bar.setAttribute("onclick", "showSVGChartDrilldown('" + uoKey + "', '" + barData.DrillDownArgs + "')");
        tl.to(bar, delay,{ y: -segHeight, ease: Power0.easeNone }, i * delay);
        tl.to(bar, delay, { height: segHeight, ease: Power0.easeNone }, i * delay);

See the Pen aBGpjM by anon (@anon) on CodePen

Link to comment
Share on other sites

  • Solution

And it works beautifully in Chrome, but in Firefox and Edge the height attribute isn't animating. 


Use the AttributePlugin. I don't think height is a valid CSS property for rects.

tl.to(bar, 1, { attr: { height: 300 }}, 0);

PS. Never trust Chrome for correct SVG behavior. Look at Firefox first... and dare I even say, maybe even Edge  :-o

  • Like 5
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...