Jump to content


gsap.set-ing an SVG property doesn't move it

Moderator Tag

Recommended Posts

Sandbox URL (it's with React):


I would like to control a draggable via SVG, like in the example.

I create an svg (instead of a g, because I want to easily position children elements relative to it), then I instantiate the draggable in a single-time useEffect, to work on the group but be triggered by the rect.

Add a new box by clicking anywhere on the blue part. A box is created and should be placed in the clicked part by calling gsap.set, but it doesn't.

I added a console.log during dragging so that you can see that the draggable IS moving, but not the element.

How do I solve this?

Link to comment
Share on other sites

I figured out that this only works with g that has an initial transform: translate${x}, ${y}). An svg breaks for some reason, and I wonder why.

Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.