Jump to content

Alex G (Velocity)

Floor Plan Setup - Draggable

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hey guys!


I have something I'd like to implement which you could consider to effectively be a floor plan for a venue. I've advocated GSAP for a while now and so thought I'd explore what was available for it. I like the look of draggable a lot. 


Effectively I'd like some advice. I want to create an area on the screen and that can zoom/pan and allow me to add elements to a grid in the form of differently shaped tables. The size of the floor can grow (ad infinitum) depending on the positioning of tables, but there will always in practical terms be boundaries to the floor. A table may have dimensions of let's say 5x5 (as in grid squares) and I would like to be able to drag & rotate them as part of Angular 2 app, with them snapping to the grid. Draggable has a lot of the features I require.


I'm wondering whether anyone thinks I could suitably achieve this solely with draggable and a bit of vanilla JS, whether using draggable alongside canvas/webGL would be more appropriate, or whether it wouldn't fit my needs at all. 


Any recommendations here would be greatly appreciated. I would love it if anyone knew of any examples like this too, I've searched around but not found anything too similar as yet.


Many thanks,


Link to comment
Share on other sites

Here's a demo using Draggable with canvas/WebGL (Pixi.js) with some of the functionality you described like and pan and zoom (mouse wheel)

See the Pen 04586ee6fe7a7dd2503e49380a7cfcb2?editors=0010 by osublake (@osublake) on CodePen


And here's something else I made with the Draggable. It's actually a simplied version of something much more complicated. I wanted to test out using Draggable to drag and drop something into an irregularly shaped object of a different coordinate space. So I got some ray-casting going on in there for hit-detection. I used SVG for that demo, but what I'm doing it for is actually canvas based.

See the Pen VmgNJB?editors=0010 by osublake (@osublake) on CodePen


So what you're building doesn't sound too far fetched.


Curious, is this a personal project? It sounds very interesting and useful.

  • Like 3
Link to comment
Share on other sites

Also, there are a couple of improvements coming to Draggable.



Point snapping...

See the Pen QdbQjN by osublake (@osublake) on CodePen


And new properties like delta...

See the Pen LxVaVw by osublake (@osublake) on CodePen

See the Pen GrJQMR by osublake (@osublake) on CodePen

  • Like 2
Link to comment
Share on other sites

Hey Blake!


Many thanks for the examples & info there, those are very useful. I'm in the exploratory phase at the minute but GSAP is always my go-to for any serious animation on the web. At this stage I'm thinking canvas and GSAP will be my first experiment and depending on performance possibly webGL.


To answer your question, it's for a professional project at the company I work at, I'm quite excited about it too actually. Although the project is closed source, I may be able to share some code for the controller I end up writing for our Angular 2 app if you're interested!


We've actually crossed paths before, but I was on my personal account, I had an idea for a UI pack for GSAP a long time ago: https://greensock.com/forums/topic/11690-qui-work-in-progress-front-end-ui-pack-for-use-with-gsap/. I've now been working commercially with angular and typescript for the last two years, and fortunately am a much more experienced programmer. I'm curious is it still in your roadmap to implement that? If not, I was weighing the idea of writing a library for that purpose in TypeScript!

  • Like 1
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.