Jump to content
Search Community

KNOB Integration in existing js-App (iPad Pro), based on example from Chris Gannon

TirochH test
Moderator Tag

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

I adapt following Example from Chris Gannon




In DEMO-Mode it runs perfect. But I have Problem with the integration in my App   for  Home-Automation,


IN your demos you start always from the body-tag.  I use in my tests different tags.


In the example (3rd attachment )  I used the "container" tag.


I have it  on my screen on the top position. The wheel run perfect.

But not on the right  position in the popup window (down-right). I want the Picture  with a predefined size (240x240).


Additional Questions:

How I get a value from the wheel? Or how I put a Value to the wheel? Your predefined  value "initialFace" don't work........




Link to comment
Share on other sites

Hi and welcome to the GreenSock forums,


At this moment I only understand your additional questions not really sure what the other questions were. Perhaps you can explain again with some more detail.


As for setting the rotation and getting the rotation you can just get the rotation value of the Draggable instance.

//get rotation

To set the rotation you can use a TweenLite.set() on the target of the Draggable and then use myDraggable.update()

//set rotationTweenLite.set(knob, {rotation:90});

Please see this reduced demo: http://codepen.io/GreenSock/pen/QpeXKV?editors=1011


Press the set button to change the rotation and the get button to get the current rotation.


If you need more help, please try to create a very simple demo in CodePen (you can just fork my example) with just the code and assets necessary to replicate the problem. 

  • Like 2
Link to comment
Share on other sites

Dear Carl,


thank you very much for your answer.  It was the first time I  worked with your solution. 

I learned also important basic knowledge in the area of Javascript.

My native language is German, and not English. Sorry.


But in the meantime I solved the most, but not all Problems.


I integrate the following two examples in my Home-Automation Solution.   See following pictures:




and here the codepen-link to my Example 1: 

See the Pen oWNoeX?editors=0010 by TirochH (@TirochH) on CodePen


and  the codepen example 2:  

See the Pen bWGoKw?editors=0010 by TirochH (@TirochH) on CodePen


The animation  features are amazing.


You see not very often. Pure javascript, no  HTML, no CSS. I love this approach.


Please can you look over the code and give me a feedback.


Following are not totally solved:

- the start value

- the interaction with  the touch features, I copied this solution from  Chris Gannon

- the snap feature in example 2, should be 5%


Please look about  this  code  in example 2, with th jQuery.plugin (see codepen).

In codepen, it does not run. But in my "simple" solution it runs perfect.

The reason I need this, because I get by "ElementById" a Null-Pointer return.

This is special by the "SVG". 



function initSVG(){
oarg.item.xxapi.dialLineBg = document.getElementById('dial-line-bg'); //SVG
TweenMax.set(oarg.item.xxapi.dialLineBg, {


I have more questions, but I find. This is enough for the first step.


I want integrate your amazing features in my  Home-Automation Solution.


Examples are for "dimming"  the light or volume of radio, etc.


Greetings from Vienna.

Its a little country in Europe.




Link to comment
Share on other sites

Very glad to hear you are making progress.


The work you are sampling from Chris Gannon is already highly specialized. The amount of code in the second demo is quite large and complex and I fear it would take and hour or two just to get a basic understanding of how it is supposed to work.

For instance: I really have no idea where I would begin to track down these variables:


if (liveDial) { //
          TweenMax.set(xx_dialNum, {
            rotation:-(rtStep * i)-rtStartV // waaagrecht -- init, noch keine Drehung
        if (rtDial_0or90) { //
          TweenMax.set(xx_dialNum, {
            rotation:rtDial_0or90 // rtDial_0or90: -90 Grad == zur Mitte

We really have to focus our attention on the GSAP API and its core capabilities. The type of help you are looking for here unfortunately falls more in the category of something you would hire a developer to do and not something you would get from a public forum.


If there is a way to create a VERY simple and reduced demo of a single feature you need help with, that might help us point you in the right direction.

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