Jump to content
Search Community

Q; how to control Draggable "trigger" element effect

lunelson@gmail.com 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,

 

so this is an alteration of one of the demos Chris Gannon included in his blog post about null objects — 

 

I'm using a trigger element, and trying to figure out how ( what logic) the distance dragged on the trigger element is translating in to a rotation of the circle. Dragging the maximum available distance from left to right seems to be able to create about 150 degrees of rotation, regardless of how big the trigger area is.

 

Anyway I'd like to be able to control the 'ratio' by which a drag is translated in to movement: possibly I need to capture the data in a different way? just wondering if someone can tell me the mechanics of what's coming through. 

 

Best

LN

See the Pen GgPqqz by lunelson (@lunelson) on CodePen

Link to comment
Share on other sites

Thanks Diaco!

 

It wasn't quite what I meant with the 150 degrees but your construction got the result I was looking for—once I removed the value limits on the draggable items. I'm still not quite sure why if the rotating items used the dragTarget directly, it reacted more slowly than doing it via a dummy div, but using a dummy div it's clear to see that the drag target is just passing through the exact number of pixels dragged. I'll be able to work with this to do what I want!

 

This is what I made, forking from yours: 

See the Pen Byvpvo by lunelson (@lunelson) on CodePen

Link to comment
Share on other sites

hmm , unfortunately i can't understand completely what you mean , but in your forked codepen , onDrag Fn should be like this :

 

function onDrag(){
if (this.target.className=='dial'){
  dragreport = (this.target._gsTransform.rotation);
  TweenMax.set(D,{x:dragreport});
  TweenMax.set(".dummy",{x:dragreport});
} else if (this.target.className=='dummy') {
  dragreport = (this.target._gsTransform.x);
  TweenMax.set(".dial",{rotation:dragreport});
  TweenMax.set(D,{x:dragreport});
}else{
  dragreport = (Dragger[0].target._gsTransform.x);
  TweenMax.set(".dial",{rotation:dragreport});
  TweenMax.set(".dummy",{x:dragreport});
}
  document.getElementById("rotationLog").innerHTML=dragreport;
};
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...