Jump to content

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


  • Content Count

  • Joined

  • Last visited

Community Reputation

0 Newbie

About manchuwook

  • Rank
  1. 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.
  2. 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
  3. 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 = polarToCar