Repeating GSAP Animation inside d3.event

[smpa01]

I am a newbie to GSAP; but proficient in D3.js. 

 

I am currently doing some test drive to see how can I use GSAP inside my d3 elements as and when required. For example, I am trying to see how gsap can execute on d3.mousevent for example on click. 

 

The trouble is, on each click the d3 animation executes as desired but gsap animation only executes once. These are the links to the workbook CodePen and Observable

 

How can I make sure GSAP executes on each d3event.

 

Thank you in advance.

See the Pen YzMWEGm?editors=1010 by smpao1 (@smpao1) on CodePen

[Rodrigo]

Hi @smpa01 and welcome to the GSAP Forums!

 

The reason you're seeing this is because you have this:

gsap.to(this, { rotation: 360, duration: 2, ease: "none" });

Basically what happens is that the first time you click the element GSAP gets it's rotation and is 0, the it tweens it to 360, creating the animation. Then any subsequent click GSAP does the same, except this time the element's rotation is already 360 so GSAP tweens the rotation from 360 to 360, so nothing happens.

 

This seems to work the way you intend:

let rotation = 0;

const rectTwoG = d3
.select("#rectTwo")
.append((_) => rectOne.clone(true).node())
.attr("id", "two")
.attr("y", function (d, i) {
  const y = parseFloat(this.getAttribute("y")) + 100;
  return y;
})
.attr("stroke", "green")
.style("pointer-events", "all")
.on("click", function () {
  rotation += 360;
  gsap.to(this, { rotation: rotation, duration: 2, ease: "none" });
});

Hopefully this helps.

Happy Tweening!

[smpa01]

Hi @Rodrigo thanks for this.