Jump to content
Search Community

Wrapping draggable carousal while dragging

Sahil 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

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