Jump to content
GreenSock

jesper.landberg

Can I access draggable methods?

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'm trying to call a Draggable.onDrag() inside a mousewheel handler like so:

 

      let Slider = Draggable.create(document.createElement('div'), {
        type: "x",
        throwProps: true,
        trigger: wrapper,
        onDrag: updateProgressReverse,
        onThrowUpdate: updateProgressReverse
      })

      Hamster(wrapper).wheel((event, delta, deltaX, deltaY) => {
        Slider.onDrag()
      })

But I get the error 'Slider.onDrag is not a function. Is it possible to access Draggable props and methods "outside"?

 

 

Link to comment
Share on other sites

The Draggable constructor is different than usual draggable that we define. Following is the syntax for defining Draggable using constructor

 

var draggableInstance = new Draggable(singleTarget,{});

 

When you use draggable constructor you can pass only one target, and developers recommend using usual method instead of using constructor. Using that instance you can access it's properties and methods.

 

You can define draggable normally and access it's properties and methods of draggable as follows

 

Draggable.get(domElement).x;

 

I doubt you can use events in same fashion. What are you trying to do exactly? Can't figure out from your code.


 

Link to comment
Share on other sites

Just now, Sahil said:

The Draggable constructor is different than usual draggable that we define.

 


var draggableInstance = new Draggable(singleTarget,{});

 

When you use draggable constructor you can pass only one target, and developers recommend using usual method instead of using constructor.

 

You can define draggable normally and access it's properties and methods of draggable as follows

 


Draggable.get(domElement).x;

 

I doubt you can use events in same fashion. What are you trying to do exactly? Can't figure out from your code.


 

Hi. I see.

I am trying to trigger onDrag on mousewheel scroll, to get the same effect I get when dragging . Here is some more of my code:

     

let animation = TweenMax.to('.slide', 1, {
        x: "+=" + wrapWidth1,
        ease: Linear.easeNone,
        paused: true,
        repeat: -1,
        modifiers: {
          x: function(x, target) {
            x = x % wrapWidth1;
            return x;
          }
        }
      })

      let Slider = Draggable.create(document.createElement('div'), {
        type: "x",
        throwProps: true,
        trigger: wrapper,
        onDrag: updateProgress,
        onThrowUpdate: updateProgress
      })

      function updateProgress() {
        animation.progress(this.x / wrapWidth1 * speed)
      }

      Hamster(wrapper).wheel(function(event, delta, deltaX, deltaY) {
        Slider.onDrag()
      })

 

 

The code creates a draggable infinite/loop. Courtesy of @OSUblake.

Link to comment
Share on other sites

Can you reference his codepen demo/thread?

 

If possible also post demo of what you are working on.

Link to comment
Share on other sites

Just now, Sahil said:

Can you reference his codepen demo/thread?

 

If possible also post demo of what you are working on.

Here is his

See the Pen ee107aeb54bdf4dca1084715d86b5e9c?editors=0010 by osublake (@osublake) on CodePen

. And that is basically what I have done, except I don't use snap points and I don't use jQuery. What I would want to do is move the slider on mouseWheel to complement the dragging. Any idea how this could be achieved?

Link to comment
Share on other sites

Unless I'm making a simple demo to help somebody out, I always use the constructor. 

 

// meh
let Slider = Draggable.create(someElement)[0]

// I like this
let Slider = new Draggable(someElement);

 

Once you have an instance, you can call its methods.

 

updateProgress.call(Slider)

 

 

  • Like 3
Link to comment
Share on other sites

BTW, the callbacks are on the vars object you pass in, so to call the "onDrag" function like that, it would be like this.

Slider.vars.onDrag.call(Slider)

 

  • Like 2
Link to comment
Share on other sites

Or skip .call() altogether...

let Slider = new Draggable(someElement);

// If you use the instance instead 'this', you won't have to worry about scope
function updateProgress() {
  animation.progress(Slider.x / wrapWidth1 * speed)
}

updateProgress(); // ok

 

  • Like 1
Link to comment
Share on other sites

19 minutes ago, jesper.landberg said:

Here is his Pen. And that is basically what I have done, except I don't use snap points and I don't use jQuery. What I would want to do is move the slider on mouseWheel to complement the dragging. Any idea how this could be achieved?

 

Here's a similar, but better version of that demo I was helping @Sahil with.

 

See the Pen veyxyQ?editors=0010 by osublake (@osublake) on CodePen

 

 

You should be able to use your mouse wheel delta to hook in to changing the progress somewhere in there. 

  • Like 4
Link to comment
Share on other sites

1 hour ago, OSUblake said:

 

 

Just add event.preventDefault() so it doesn't scroll the page.

I stripped down @OSUblake 's example to my use case.. still having problem figuring out how to make it work on scroll. Dunno what to place inside my mousewheel handler=/ Any tips?

 Pen: 

See the Pen GOpLYe by ReGGae (@ReGGae) on CodePen

 

Link to comment
Share on other sites

What is Hamster?

 

Here  is the stackoverflow thread that talks about mousewheel events.

Link to comment
Share on other sites

Ohk, can't you use demo I posted? It has functionality to call next or previous slides, the one you are editing will need some work to do.

Link to comment
Share on other sites

Just now, Sahil said:

Ohk, can't you use demo I posted? It has functionality to call next or previous slides, the one you are editing will need some work to do.

The demo is nice, however I'm not using snapping, what I want is to move the slider when I scroll in the same way it does when I drag it.  Continuous movement. "drag the slider with mousewheel" or how to say:P

Link to comment
Share on other sites

Got it, let me give it a try otherwise Blake will resolve it.

  • Thanks 1
Link to comment
Share on other sites

Just now, Sahil said:

Got it, let me give it a try otherwise Blake will resolve it.

I'm very thankful for your help!

  • Like 1
Link to comment
Share on other sites

Here is how you can do it.

 

TweenMax.to(animation, 1, {progress: animation.progress() + delta/5});

 

you can change the duration or the value you are dividing with based on width, but 5 seems like good distance.

 

See the Pen vWNqrZ?editors=0011 by Sahil89 (@Sahil89) on CodePen

 

@GreenSock Didn't know tweens can be used like this, amazing.

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

Just now, Sahil said:

Here is how you can do it.

 


TweenMax.to(animation, 1, {progress: animation.progress() + delta/5});

 

you can change the duration or the value you are dividing with based on width, but 5 seems like good distance.

 

See the Pen vWNqrZ?editors=0011 by Sahil89 (@Sahil89) on CodePen

 

Woho awesome! thanks a lot!

  • Like 2
Link to comment
Share on other sites

8 minutes ago, Sahil said:

Here is how you can do it.

 


TweenMax.to(animation, 1, {progress: animation.progress() + delta/5});

 

you can change the duration or the value you are dividing with based on width, but 5 seems like good distance.

 

See the Pen vWNqrZ?editors=0011 by Sahil89 (@Sahil89) on CodePen

Just one thing I'm noticing, when u scroll and then drag before the scroll animaton is done, it often "jumps". Any idea how to prevent this?

Link to comment
Share on other sites

I know why it is happening but not sure if it can be fixed, only Blake can answer that. Otherwise it will need to be done in some other way where tween isn't tied to draggable.

Link to comment
Share on other sites

7 hours ago, Sahil said:

I know why it is happening but not sure if it can be fixed, only Blake can answer that. Otherwise it will need to be done in some other way where tween isn't tied to draggable.

@OSUblake got any idea on how this might be fixed?

Link to comment
Share on other sites

You are in tough luck, he probably won't be online until Monday/Tuesday. @GreenSock might suggest something, otherwise I will try something tomorrow but can't guarantee it will work.

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