Share Posted May 26, 2022 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 1 Link to comment Share on other sites More sharing options...
Share Posted May 26, 2022 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. 3 Link to comment Share on other sites More sharing options...
Solution Solution Share Posted May 26, 2022 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. 3 Link to comment Share on other sites More sharing options...
Share Posted May 27, 2022 MotionPathHelper also has an .editPath() method that might be useful too. Look how easy it is: See the Pen d54b4626106a8cf164813074d63bab8c?editors=1010 by GreenSock (@GreenSock) on CodePen 3 Link to comment Share on other sites More sharing options...
Author Share Posted May 27, 2022 Thanks a lot to all of you. These are great solutions for my project. I really appreciate it! 😊 2 Link to comment Share on other sites More sharing options...
Share Posted May 27, 2022 Ah just remembered about this pen too. Thought I'd drop it here for any future thread-visitors. See the Pen qBBWPPe by GreenSock (@GreenSock) on CodePen 3 Link to comment Share on other sites More sharing options...
Share Posted May 27, 2022 @GreenSock you can't just wander into a thread late and drop a one line solution with a cool plugin. I'm pretty sure that's cheating. 🤣 3 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