Jump to content
Search Community

Can I access draggable methods?

jesper.landberg test
Moderator Tag

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

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

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

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

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

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