Jump to content
Search Community

Distorting a square (SVG) using draggable?

Consequence test
Moderator Tag

Go to solution Solved by PointC,

Recommended Posts

Dear GSAP Community,

I am currently facing a problem with a new project. I want to allow the user to freely warp a square element into some random shape. Just like we know it from graphic programs.

Does anyone have an idea how to implement something like this? I have thought of a SVG element in connection with the Draggable plugin. Unfortunately I don't find any search results so far (which can definitely have something to do with my limited English skills).

Cheers to all

distorting-a-rectangle.gif

  • Like 1
Link to comment
Share on other sites

Hi there!

 

This sounds like a fun challenge, but it also sounds a little complex. There's not an 'out of the box solution' for this kind of thing. Someone may jump in with an answer, but I just want to manage expectations.  

 

Maybe this demo will be of some use?

See the Pen eYyRzJe by GreenSock (@GreenSock) on CodePen

 

Also - I just popped this together - it isn't using draggable, but it may give you a little step in the right direction. 

 

See the Pen LYQeZxg?editors=1111 by GreenSock (@GreenSock) on CodePen

 

Why don't you add draggable and give it a go? Questions with minimal demos often get more help around here.

  • Like 3
Link to comment
Share on other sites

  • Solution

Hi @Consequence :)

 

Thanks for being a Club member. We really appreciate it. 🎉

 

I think I'd wire up a polygon to some Draggables and do something like this. The width and height are dynamic so all you need to do is adjust the w/h variables to your liking. 

 

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

 

Hopefully that helps. Happy tweening.

:)

  • Like 3
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.
×
×
  • Create New...