Draggable not fluid

[haja]

Hello,

 

I attempt to use draggable for one of my project, as you see here  it works fine but not fluid, i want tween effect when i drag element.

Draggable.create(".item", {
    type: "x",
    edgeResistance: 0.65,
    bounds: ".frises-items",
    //lockAxis:true,
    throwProps: true,
    onDrag: function() {
        pos = parseInt(this.x);
        if (pos < 0) {
            $('.slick-prev').show()
        } else {
            $('.slick-prev').hide()
        }

    },
    onDragEnd: function() {
        reference = 10880;
        pos = parseInt(this.x);
        if (Math.abs(pos) == reference) {
            $('.slick-next').hide()
        } else if (Math.abs(pos) < reference) {
            $('.slick-next').show()
        }
    }
});
Draggable.get(".item").enable();

Do you have an idea please?

 

Thank you

[haja]

anyone please ?

[Jonathan]

Hello haja, and Welcome to the GreenSock Forum!

 

In order to better help you, can you please provide a codepen demo example? This way we can see your code in context and in a live editable environment, where we can test your code and see what your seeing.

 

 

[haja]

Hello,

 

I cannot put it to codepen unfortunately, but i put a link on my topic where you can see it, thanks again

[Carl]

hmm, having a hard time understanding what is wrong.

 

Can you elaborate on what "i want tween effect when i drag" means?

 

Like Jonathan said,  CodePen would really help. You don't need to include your real images or text, just create a big div with a bunch of fake text in it.

 

It should not be difficult at all to take a pen like this one: http://codepen.io/GreenSock/pen/ywpet, fork it, and add your own code. It already loads TweenMax, Draggable and ThrowPropsPlugin. 

 

Since we can not edit the demo you provided, my first suggestion would be to remove the onDrag and onDragEnd callbacks and see if they could perhaps be contributing to what you see as a problem.

[GreenSock]

Like Carl and Jonathan said, it'd be super helpful to see a codepen that we can tinker with, but from glancing at your live page I noticed:

1. You have some JS errors. "frise.html:274 Uncaught TypeError: mySwiper.resizeFix is not a function"
2. You are calling show() or hide() on EVERY drag event (like 60 times per second). That's a jQuery function that probably isn't cheap performance-wise. I'd strongly recommend adjusting the logic you're running to only call show() or hide() when necessary. Like use a variable to track state. 

[haja]

Hello, 

 

Thanks for your response, sorry i tested another plugin so why you found there errors, i re-use now the draggable code, i just want a smooth scroll when dragging the container, even i remove the "show and hide" for every drag events, following code is not smooth :

 

The link : http://goo.gl/sXjrb7

 

Draggable.create(".item", {
    type:"x",
    edgeResistance:0.65,
    bounds:".frises-items",
    autoScroll:true,
    //lockAxis:true,
    throwProps:true,
});

when i use the scroll plugin but not the greenshock draggable, this is very smooth : http://goo.gl/2Q3gLI

[GreenSock]

I didn't notice any major slowdowns but I'm on a fast system. What kind of device are you testing on? It looks like the actual DOM structure is different between those two examples, and I'm curious why you have autoScroll enabled. Perhaps that's part of the problem. Your "smooth" example doesn't seem to offer that same behavior. 

 

You also have some arrow <div> elements overlaid on the GSAP one but not the other. And you have overflow:hidden on the body of the "smooth" one, but not the GSAP one. Hiding the overflow could really help the browser avoid doing a bunch of unnecessary rendering work. 

 

There are other differences too. Unfortunately I don't have time to pull everything apart and do a detailed analysis for you, but hopefully this gets you moving in the right direction. 

 

I'd strongly recommend that when you're doing the comparisons, you make sure that everything is identical as much as possible. And again, reproducing it in codepen will significantly increase your odds of getting a good answer from people in these forums.