Jump to content
Search Community

How to link the animation of time counter and dragged item?

Arthematix test
Moderator Tag

Go to solution Solved by Diaco,

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

Hi guys! Need your help! I need to connect the "Knob" and animation of numbers in Adobe Edge Animate, I did the dragged knob, and don't know how to do the rest ...

 

Knob like this one greensock.com/draggable

Change numbers with dragging like this greensock.com/timelinelite

Add some scrins and Edge Animate files in attach files to better explain what I mean :)

 

Thanks in advance for any help! Regards

Misha.

post-37847-0-52324600-1439317928_thumb.jpg

post-37847-0-91930600-1439317928_thumb.jpg

dc_power_supply_animate.zip

Link to comment
Share on other sites

  • Solution

Hi Arthematix  :)

 

you can get rotation easily with " this.rotation " , like this : 

See the Pen NqJZbG by MAW (@MAW) on CodePen

Draggable.create(".dial", {
type:'rotation',
bounds:{minRotation:0,maxRotation:360},//set min/max range limitation 
throwProps:true ,
onDrag:Calc , 
onThrowUpdate: Calc // if you want to use ThrowProps you need onThrowUpdate fn to run your function on throwing
});

function Calc(){
  console.log( this.rotation ) 
 // you can do any math calc with " this.rotation " to get your desire range number like : this.rotation/360
 var R = this.rotation/360 ;
 document.getElementById(" myText ").innerHTML= R ; 
}
  • 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...