Spin a dial with Greensock Draggable

Using JavaScript with Hype
1

Hi,

I would like to create a rotatable dial with stops on predefined degrees stops. I found the greensocks library with Draggable and a spinning example. I try to implement this in Hype, but not sure if I do everything right. I’m fairly new to Hype and not a hardcore JS coder either. Is anyone is able to see why my example is only spinning and not fixing on 90 degree stops?
And is it possible to get some actions attached to these stops? So on 90 degrees go to next scene or play timeline or activate button?

Many thanks!

Grreensock-rotate.hype.zip (154.2 KB)

2

Hi Olav,

  1. don’t include # in id box in the inspector :smile:

  2. add liveSnap: true, after throwProps: true,

  3. I’ve added a class of rotate rather than an id so that you can add it to more than one object. But it’s not necessarily needed. An id would be fine.

  4. adding actions … not sure about that one :slight_smile: have to think about it.

D

1 Like
3

Also if you’re wondering why it won’t snap smoothly it’s because you need the ThrowPropsPlugin

So throwProps: true, isn’t doing anything in the example above.

D

1 Like
4

Thank you very much for your answer! I’ll give it another try. Adding actions will probably a bit more difficult I can imagine. Hints appreciated.
Thanks again!

5

Ok I have updated the code and now it snaps nicely. It only will not stay into position. It returns to the first postion after dragging. Any thoughts?
And about the ThrowProps plugin I read that I need a GS-membership to download. Will see if that will be a usefull investment.

Thanks again!

Grreensock-rotate2.hype.zip (153.7 KB)

6

Just remove the “bounds” line. Sorry I left it in. :slight_smile:

7

No more bounds! :smile:
That did the trick indeed.

8

Hi! Thank you! This post really helped me!

I was curious to know if anyone has figured out how to have an action triggered hen the dial reaches a certain degree. For example, I’d like it to go to another Scene when it rotates 270*.

Thanks for all of this!

9

Hi @lriley3

You can have several callbacks within the “Draggable” like onDragEnd, onDragStart, etc. These are added within the object like so:

onDragEnd:function() {
  // actions go here!
}

I’m not at my computer at the moment but I’ll try and code something later for you if you can’t manage to work it out.

D

10

Hi @lriley3

Here is the code you need to go to another scene when the rotation is around 270.

var rSnap = 45;
  Draggable.create(".rotate", {
  type:"rotation",
  edgeResistance:0.65,
  liveSnap:true,
  snap:function(endValue) { 
  if (endValue >= "255") {
    hypeDocument.showSceneNamed(/*put scene name here */);
  }
  return Math.round(endValue / rSnap) * rSnap;
  }

});

D

2 Likes
11

Dear you are a genius! Thank you so much for that code!! Worked like a charm!
@Olav hope this helps you too!

L

1 Like
12

Yes this excellent! Thanks so much!