Pre-purchase question about rotating spheres and draggable

[ScotKinney]

I want to create a GUI for a game using draggable. Something similar to the draggable demo with a grid, throw, easing etc.

But rather than rectangles I want to use spheres that look 3D that the user can spin horizontally with some easing also.

Then onclick the sphere's would do standard things like open a text box or another window.

The GUI uses Awesomium to display the web page as a transparent overlay on top of the 3d game screen.

 

Is this something I can do easily and are there any examples? I looked around the site quite a bit but couldn't really find any.

 

Thank you,

Scot

 

[Carl]

Hi and welcome to the GreenSock forums,

 

Thank you for sharing your interest in using our tools.

 

I'm not sure I'm following the explanation of the effect you are after completely so I'm not sure exactly what to advise, however it certainly seems possible.

How easy it is will be largely dependent on what you are comfortable with concerning scripting.

 

The good news is, you can try all our premium tools like ThrowPropsPlugin for free, as much as you want, using CodePen.

Simply fork any of our demos (like this one: http://codepen.io/GreenSock/pen/zDwEk) and add your own HTML, CSS, and JavaScript. 

Its a great way of learning what the tools can do before you purchase.

 

Be sure to check out our collections for 

 

Draggable / ThrowProps : http://codepen.io/collection/AtuHb/

SplitText : http://codepen.io/collection/KiEhr/

 

Let us know if you have any more questions

[ScotKinney]

I'm trying to find an example of a globe that sits and slowly rotates and is also spinnable (just for the fun of it) but I'm really having a hard time finding a good example. It would have at least the appearance of being 3D whereas the rectangles in the draggable demo are flat. I'm sure it's simple and can be done with GSAP but I have to know for sure. It wouldn't have to be achieved using GSAP but would have to work with it.

Also, do you know if there's a way to save the re-positioning of the elements if if they come back to the page later?

[Carl]

If you want true 3D, you will probably need to look into three.js (http://threejs.org/examples/#webgl_materials_bumpmap) which can do pretty much anything. GSAP can certainly move 3D objects, but you will probably need to be fairly comfortable with both libraries before doing anything terribly ambitious.

 

I just searched codepen for "globe" and found a CSS animation that I put a little Draggable love on: http://codepen.io/GreenSock/pen/c18ccd266d930f267d19098af8f195a5/

 

This is demo is a mashup up of JamieJefferson's http://codepen.io/jamiejefferson/pen/kFhKE and this http://codepen.io/akhil/pen/feLIu

 

 

 

 

Also, do you know if there's a way to save the re-positioning of the elements if if they come back to the page later?

 

There are probably quite a few ways, but I would start by reading this: http://diveintohtml5.info/storage.html

[ScotKinney]

Wow, that 3d guy is just freaky...lol

Your drag, spin, and flick globe would be perfect if, in addition, I could make it spin slowly indefinitely and also drag it around a grid and toss it etc like the main demo. Is that possible?

 

Thanks a ton for doing that example.

[Carl]

Yes, it is entirely possible to drag and throw a globe that is always spinning and have it snap to a grid. Just imagine the green and red boxes from our Draggable grid demo being a spinning globe.

 

What would be difficult though is to have the globe always spinning and then also allowing the user to spin the globe AND drag the globe to move it around.

In other words, the drag can only be used to spin the globe or drag it. I think it would be very difficult to figure out if the user intends to drag or spin.

[ScotKinney]

Yeah, I sensed that could be a problem. If it was spinnable though, and not always spinning, do you think I could drag it when it was not being spun? Maybe a right click to spin it or to drag it vs both being left click? Always spinning slowly is probably less desirable and I could let go of that thought. 

 

Then the last thing I need to be able to do is click or double click the globe to open a window. Preferably, a window that expands out as it opens. 

This is all just an idea based on some of the high tech looking GUI's you see in movies like Iron Man and others where you grab an element, drag it to the center, open it, use it, close it and toss it back, and grab another. I want to make the GUI as fun as functional.

[Carl]

I'd urge you to do as much as you can with the free tools (GSAP + Draggable), you will only need to purchase something if

 

1: you need a premium plugin like ThrowProps for momentum based throwing / tweening

2: you are ready to release your product and sell it to multiple end users which would require a Business License

 

Technically you could build 99% of what you need without purchasing anything. To add the ThrowProps capability would just be some added bling you can easily throw on at the end. It seems like you have quite a bit to figure out and experiment with before you get there (double-clicking to open windows, right-click to enable dragging, detecting if its spinning). 

 

We love helping people solve problems when using GreenSock tools. Hopefully the demos I've provided and you have seen before amply illustrate the capabilities of GSAP. I think instead of trying to get solutions for every step of your project it will be much better if you dig in a bit and come back when you need more help understanding the API.

 

My suggestion would be to use the Draggable grid demo as a starting - point template: http://codepen.io/GreenSock/pen/zDwEk

Add your globe, implement some of the design / html / css and build up from there step by step.