Change svg gradient with object getters and setters

[JamesGrubb 10 Likes (Newbie)]

Hello attempting and failing to animate an svg gradient. Im using svg.js and setting the gradient object using a gradientStops object

 

var gradientStops = {
  _start: 0,
  get start() {
    return this._start;
  },
  set start(value) {
    this._start = value;
  },
  _end: 1,
  get end() {
    return this._end;
  },
  set end(value) {
    this._end = value;
  }
};

var draw = new SVG().addTo("#svg").attr({
  viewBox: "0 0 100 100",
  class: "w-2/3 bg-red-50"
});
var gradient = draw.gradient("linear", function (add) {
  add.stop(gradientStops.start, "hsla(352, 99%, 90%, 1.00)");
  add.stop(gradientStops.end, "hsla(352, 99%, 50%, 1.00)");
});

var globe = draw.circle(50).fill(gradient).cx(50).cy(50);

gsap.to(gradientStops, {
  start: 1,
  end: 0,
  duration: 2,
  yoyo: true,
  repeat: -1
});

Thanks in advance

See the Pen gOLLezz?editors=0010 by limitedunlimited (@limitedunlimited) on CodePen

[tailbreezy 221 Likes (Specialist)]

Maybe with the simplest of ways?

 

See the Pen e5bc4356cdea93434978159c07db1dd5 by dadacoded (@dadacoded) on CodePen

[JamesGrubb 10 Likes (Newbie)]

Thank you fro this solution. I was hopping to stick with the svg.js. code where I'm attempting to animate the gradient stop position

[ZachSaucier 7,133 Likes (Superhero)]

5 minutes ago, JamesGrubb said:

I was hopping to stick with the svg.js. code where I'm attempting to animate the gradient stop position

You do realize this is a GSAP forum, right? What's bad about doing it the way that tailbreezy recommended?

[JamesGrubb 10 Likes (Newbie)]

Nothing what so ever. I imagine it must sound ungrateful when you give a response and it it is bounced back with what sounds like someone being picky. Im on a learning path of my own and thats why I was hopping to follow with this current code stack. Please do know that I am immensely appreciative of the support you give to the community.