Storing Values as Variables

[Greg Stager]

I am energized by the possibilities that Greensock has to offer and am enjoying playing around.

One of the things I have struggled with today is trying to store a property value as a variable that I can use elsewhere.

I made a knob that rotates in 30 degree increments and is limited between -120 and +120 degrees. It works great!

 

What I am trying to do now is to grab the degree value that corresponds to the knob position. I researched the forums and found a solution to this.

 

Using the console - I can use 

gsap.getProperty("#simKnob", "rotation");

This responds great! with a value such as 60.

I can also - through the console - set this to a variable.

var output = gsap.getProperty("#simKnob", "rotation");

Then I can simply type the variable name in the console and it will respond with 60 as I expect.

 

However, if I try to set the variable in my source file instead of the console - it fails.

I must be missing something.

Any ideas on how to grab that value?

 

I will figure out how to make a CodePen thing later if needed.

[ZachSaucier]

Hey Greg and welcome to the GreenSock forums!

 

What do you mean "it fails"? It errors? Or it's just null? 

 

Most likely that means that element either doesn't exist when you're trying to get the property or that property doesn't exist at that time. Without seeing the code it's impossible to say  

[Greg Stager]

Sorry the big wait between posts - I was away at a seminar the last couple days and was not at my desk working on this.

I have tried a number of things based on what I have found in the forums.

Getting this close to working in the codepen was not easy either - I ended up browsing other codepens to find the right combination of files to load so the dragging would work.

I want the div below the knob to update with the current degree value. I've tried using gsap.getProperty("#simKnob","rotation"); because that worked when I typed it in the console but it always comes up as undefined when I try to use it in the code directly.

I must be missing out on how to properly access it.  I have tried it both in and out of functions - ugh.

 

So in my updateBox function I simply put a value of 120, which works, but I want that to dynamically grab the current degree value of the knob position and update the box - I am just having trouble finding out how to grab that data. Hopefully this codepen shows up. I used the Greensock knob URL for the example - I hope that is OK

 

See the Pen abOWPRb by Arelwynn (@Arelwynn) on CodePen

Edited February 28, 2020 by Greg Stager
Trying new URL for codepen after making an account

[ZachSaucier]

17 minutes ago, Greg Stager said:

Getting this close to working in the codepen was not easy either - I ended up browsing other codepens to find the right combination of files to load so the dragging would work.

You should have just forked our starter pen linked to in the thread about making a CodePen demo. It's quite easy if you do that  

 

Inside of the callbacks, this will refer to the Draggable instance. So you can just use this.rotation to get the rotation! In GSAP 3, you can also just use gsap.utils.snap(30) to snap to increments of 30, no need for a custom function.

See the Pen dyoWwwX?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Side note: .innerText performs better than .innerHTML so use it instead whenever possible.

[Greg Stager]

Thanks - this worked great!