manchuwook

animRing: function (trg) { var hpRing = Snap(trg.toElement.shadowRoot.querySelector('#svg2')); var ring = hpRing.select('#outerRing'); var max = Math.floor(Math.random() * 359 + 1) var current = { radians: 360 }; TweenMax.to(current, 2, { radians: max, onUpdate: resizeRing, onUpdateParams: [ring], ease: Power1.easeInOut }); function resizeRing(element) { var arc = describeArc(ocx, ocy, oca, 0, current.radians); element.attr({ 'd': arc }); } } Is what I ended up with, in case people want to use this code in the future.

For brevity, here is what I had figured out - imagine the code above but using this bit changed: Snap.animate(359, max, function (val) { var ad = describeArc(ocx, ocy, oca, 0, val); hpRing.select('#outerRing').attr({ 'd': ad }); }, 1234, mina.bounce, function (val) { console.log('Animate done'); }); This will now shrink the stuff up. If you notice though, I'm not using the GSAPSnapPlugin to do it. I'd like to learn how to use GS, but this actually works. The short of it is there is an attribute to change the arc called 'd' and it contains a string that only portions of it change. As an example: M 618.74629,445.21933 A 210.17485,210.17485 0 1 1 536.22656,278.25335 L 408.57144,445.21933 z M 288.0200999107116 273.0541714183745 A 210.1748504638672 210.1748504638672 0 1 0 408.5714416503906 235.0444793701172 L 408.5714416503906 445.2193298339844 Z I am unsure as to how the GSAPSnapPlugin would output this correctly since if I try to do .attr({ 'd' : describeArc(...)}) it gives some silliness about M 0,0 is not a valid property. The plugin does handle non-long-string attributes awesomely, but this parsed one eludes me.

Given an SVG image with two circles, #innerCircle and #outerCircle, and other elements I don't care as much about - I want to have an easy way to animate the arc of #outerCicle with maybe easein. Tried snap.svg but it doesn't animate well (which is a point of contention on SO), wanted to try Raphael but it doesn't handle existing SVGs, looked up svgjs but it is pending svg adoption in the RC milestones. (function () { var ocx = 0, ocy = 0, oca = 0; function describeArc(x, y, radius, startAngle, endAngle) { var start = polarToCartesian(x, y, radius, endAngle); var end = polarToCartesian(x, y, radius, startAngle); var arcSweep = endAngle - startAngle <= 180 ? "0" : "1"; var d = ["M", start.x, start.y, "A", radius, radius, 0, arcSweep, 0, end.x, end.y, "L", x, y, "Z"].join(" "); return d; } function polarToCartesian(centerX, centerY, radius, angleInDegrees) { var angleInRadians = (angleInDegrees - 90) * Math.PI / 180.0; return { x: centerX + (radius * Math.cos(angleInRadians)), y: centerY + (radius * Math.sin(angleInRadians)) }; } Polymer('character-hitpoints', { maxHealth: 0, maxHealthChanged: function () { // NotImplemented }, increment: function () { // NotImplemented }, ready: function () { var character = this.character; var h = this.$.hpRing; var t = {}; // load the svg fragment into the element Snap.load("hpcircle.svg", function (f) { var s = Snap(h); s.append(f); var n = s.select('#outerRing').node; var np = n.pathSegList[2]; var a = n.pathSegList[1]; ocx = np.x; ocy = np.y; oca = a.r1; t = s.select('#characterName'); t.node.textContent = character; t.node.x = ocx + 10; t.node.y = ocy; }) }, animRing: function (divRing) { var hpRing = Snap(divRing.toElement.shadowRoot.querySelector('#svg2')); var max = Math.floor(Math.random() * 359 + 1) Snap.animate(0, max, function (val) { hpRing.select('#outerRing').attr({ 'd': describeArc(ocx, ocy, oca, 0, max) }); }, 2000, mina.bounce, function (val) { console.log('Animate done'); }); } }); })(); The last bit, animRing, changes the arc, but doesn't actually animate with a bounce, it just flips to the new size. Any advice is welcome, I've got a dent where I've been banging my head against my desk.