Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

Search the Community

Showing results for tags 'rect'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests

Found 3 results

  1. Hello, I've created a set of 9 animations triggered by pressing keyboard keys [QWE][ASD][ZXC]. My question is about the animation triggered when pressing "C" key (i.e. the 14 small colorful rectangles arriving on the canvas). These elements are SVG <rect> grouped under a <g id="confettis">. I defined a function playConfettis() where I randomly move each <rect>. Here is a simplified version of this function : function playConfettis() { tl.set(theConfettis, { rotation:0, x:0, y:0 }) .to(theConfetti1, .3, { rotation:rand(-360,360), x:rand(-500,500), y:rand(0,-500) }) .to(theConfetti2, .3, { rotation:rand(-360,360), x:rand(-500,500), y:rand(0,-500) }) ...AND SO ON FOR EACH } I guess my code is not optimized, but I couldn't figure out how to loop through all those <rect>. Thank in advance for your suggestions
  2. 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 + "')"); group.appendChild(bar); tl.to(bar, delay,{ y: -segHeight, ease: Power0.easeNone }, i * delay); tl.to(bar, delay, { height: segHeight, ease: Power0.easeNone }, i * delay);
  3. Hello there, I’ve just updated an ongoing project that makes use of clip: rect() animations to GSAP 1.18.3 and it seems that said animations no longer work, on any browser. Clipping values are properly set, but they are now changed instantly regardless of the wanted durations and easings. 1.18.2 seems to work fine. Is that on purpose? I know the CSS clip property has been set to be deprecated for a while, but given the poor browser support of clip-path, its so-so performances and its downright unstable behavior at times, I feel like clip’s days are not quite over yet.
×