smpa01 Posted March 12 Share Posted March 12 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 Link to comment Share on other sites More sharing options...
Solution Rodrigo Posted March 12 Solution Share Posted March 12 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! 1 Link to comment Share on other sites More sharing options...
smpa01 Posted March 13 Author Share Posted March 13 Hi @Rodrigo thanks for this. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now