Greg Stager Posted February 25, 2020 Posted February 25, 2020 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 Posted February 25, 2020 Posted February 25, 2020 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 Posted February 28, 2020 Author Posted February 28, 2020 (edited) 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 Posted February 28, 2020 Posted February 28, 2020 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. 1
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now