Jump to content

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

Swiper Slider and Tweenmax Drag

Recommended Posts



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

Share this post

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

Share this post

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

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.