Jump to content
GreenSock

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

How to drag SVG clip-path with GSAP draggable?

Recommended Posts

I am trying to drag my SVG clip-path however it seems that I can't target it?

 

The orange backdrop isn't following the circle number and the stem.

See the Pen eWBqgJ by vennsoh (@vennsoh) on CodePen

Link to comment
Share on other sites

Hi venn  :)

 

Dragging clip-paths or masks can be a bit tricky. You can create the draggable and then bring the clip or mask elements along for the ride. Is this what you wanted it to do?

 

See the Pen JNEPwV by PointC (@PointC) on CodePen

 

Happy tweening.

:)

  • Like 2
Link to comment
Share on other sites

Yes! This is what I want to achieve.

Been scratching my head and trying many ways.

 

You save my soul thanks.

Link to comment
Share on other sites

The only problem with this is that the actual draggable area is the number and the stem but I can't include the whole rectangle area.

Link to comment
Share on other sites

You can add a rectangle to your draggable group that is the same size as you clip-path and set the fill to transparent.

<rect x="46" width="48" height="100" fill="transparent"/>

I've updated my pen to reflect this change.

 

See the Pen JNEPwV by PointC (@PointC) on CodePen

 

Happy tweening.

:)

  • Like 4
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.
×