Jump to content
GreenSock

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

Swiper Slider and Tweenmax Drag

Recommended Posts

Hi,

 

I'm trying to animate the drag for the swiper with tweenmax. Now the dragging option is to quick and jerky. Dees anyone know how to animate the drag option with tweenmax to have an easing accelerate effect?

 

Here is an example with a slider who has the drag options with nice easing options: http://www.benmingo.com/

 

Thank you!

See the Pen aMadpP by Hector18 (@Hector18) on CodePen

Link to post
Share on other sites

I don't know this Swiper, never used. I am supposing it is what you are using to animate your sliders. If that's the case, it's the Swiper responsibility to animate your content smoothly.

 

Now, if you were to replicate what is happening in the site you have referenced, you would have to calculate the delta (movement of) the mouse (or touch event), translate that to a fraction of the total of the movement and move your slides along it. Or, you would get that same delta and convert that into a "force" to be applied to the vertical movement and thus use physics simulation to generate the drag and acceleration of the vertical movement.

 

I'm sorry if it sounds complicated but the creation of natural, smooth, movement is that involved.

  • Like 2
Link to post
Share on other sites

Yeah, I've never used swiper either, but this seems like a non-GSAP related question. You could accomplish the same thing with GSAP and Draggable. Sahil has some neat demos with easing in this thread. It's not quite the same as what you're doing, but it may give you some ideas.

Happy tweening.

 

  • Like 1
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.

×