Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Sahil

Wrapping draggable carousal while dragging

Recommended Posts

Hi,

 

At the moment I am working on a infinite carousal which can be dragged as well. I was able to add draggable functionality to Blake's pen but how can I duplicate modifier's wrapping behaviour for draggable? So the entire carousal is in xPercent and draggable updates x while dragging.

 

Also, Can someone explain calculation done here?

 

    function wrapPartial(min, max){
        var r = max - min;

        return function(value){        
            var v = value - min;
            return ((r + v % r) % r) + min;
        }
    }

 

I don't understand what it does exactly and where does 'value' come from.

 

Thanks.

See the Pen veLaxP by Sahil89 (@Sahil89) on CodePen

Link to post
Share on other sites

Nope. My brain does not compute that.

 

I have tried and failed. Sorry for taking this long to reply. I was going over the code and trying to work it out myself. Someone else will have to rescue you.

 

As for the snippet of code, let the one who wrote it explain - I kind of get what he's doing but not sure that I would explain it correctly.

  • Like 2
Link to post
Share on other sites

Well here's the post I made about that function. Understanding the math might require you to play around with different parts of the code by hand to see what they do.

 

The function looks weird because I'm returning another function. I did that just so I wouldn't have to pass in the min and max values on every call. It's kind of like using bind on a function to pass in parameters automatically.

 

// Returns a new function that will pass in -100 and 500 as the first paramaters on every call
var wrap = wrapFn.bind(null, -100, 500);

wrap(800); // => 200

// Which is the same as doing this
wrapFn(-100, 500, 800); // => 200

function wrapFn(min, max, value){
  var r = max - min;
  var v = value - min;
  return ((r + v % r) % r) + min;
}

 

  • Like 3
Link to post
Share on other sites

There. Better when someone smarter gets involved.

 

I'll be like that when I grow up.

  • Haha 2
Link to post
Share on other sites

Thanks Blake, I will go through it and see if I can modify it to wrap while dragging.

Link to post
Share on other sites

I would set it up just like the original

See the Pen ZOgGXB by osublake (@osublake) on CodePen

, but use xPercent instead of x for the animation. 

 

var animation = TweenMax.to(slides, 1, {
  xPercent: "+=" + (slides.length * 100), 
  ...
});

 

In the updateProgress function, divide by the actual width of all the slides. So that means you will have to recalculate that value on every resize.

 

To animate a slide change, you could something like this.

var step = 1 / slides.length;

var duration = animation.duration();

// Animate to the 3rd slide
animation.tweenTo(2 * step * duration)

// Animate to the 4th slide
animation.tweenTo(3 * step * duration)

// Animate to the 5th slide
animation.tweenTo(4 * step * duration)

 

You may need to do some rounding like the animateSlides function in that auto-slider

See the Pen brZLoP by osublake (@osublake) on CodePen

.

 

To round to a decimal, use the reciprocal.

var step = 1 / slides.length;
var place = 1 / step; 

var nextSlideProgress = (Math.round(animation.progress() / place) * place) + step;

animation.tweenTo(nextSlideProgress * duration)

 

Something along those lines. I'm doing all that in my head, so I can't guarantee everything is correct.

  • Like 1
Link to post
Share on other sites

Hi Blake,

 

Thanks for helping me out. I went ahead and updated my demo further, I was able to wrap elements.

 

I didn't use magical methods like you do, I basically calculated this.x plus the distance each element traveled in either direction and updated their xPercent to lowest or highest. It works as I would like, I will just clean up my code and update the demo.

Link to post
Share on other sites

I updated my demo, now it works perfectly with one issue of some slides flashing briefly when dragged too far. If that can be resolved then it will be perfect, still I am satisfied with result.

 

Please let me know if I can improve it any way.

 

Thanks.

 

See the Pen veLaxP by Sahil89 (@Sahil89) on CodePen

 

Link to post
Share on other sites

Probably because you're changing x and xPercent. 

 

Just use my magic methods... and I can assure you that there's no magic involved. Just a bunch of ratios. That's the secret to figuring out complicated animations. ;)

 

And I'm still going to make another version later tonight.

  • Like 3
Link to post
Share on other sites

I will see if I can adapt it.

 

7 minutes ago, OSUblake said:

And I'm still going to make another version later tonight.

 

When do you even sleep? You have been interacting with me all day as if you are living in India.

Link to post
Share on other sites
Just now, Sahil said:

When do you even sleep? You have been interacting with me all day as if you are living in India.

 

Hehe. That's why I said I later tonight. I need get some sleep.

Link to post
Share on other sites

Hi Blake,

 

Finally I managed to do it. Answer was right in front of me, it is combination of both of your pens. This time my solution uses your magic methods but may not be as elegant as your coding methods. So on update I just updated xPercent and on release the slides animate based on modulus of percentage.

 

You maybe wondering why I am avoiding using your original demo, well when I converted it into responsive slider it worked but on resize it would stay stuck based on boxWidth of previous window size and that method only uses easeNone so I was avoiding it in case I decide to use any other ease.

 

Let me know what do you think. And thanks a lot for your help.

 

 

See the Pen veLaxP?editors=1111 by Sahil89 (@Sahil89) on CodePen

 

Link to post
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.

×