Jump to content


Switch Draggable transform to Percentages

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

I have a carousel that animates by xPercent when clicking menu buttons.

I also use the Draggable with ThrowPlugin on the carousel to swipe left and right on sections of that carousel.


The menu tween uses xPercent (which is what I want, since the carousel keeps its place on window resize)

But the Draggable tween uses either translate3D or matrix by pixel values and not percentages.  By the way, I'm use an array for snap: {x: [pos1, pos2, pos3]}


I've been able to figure out the new percentage and remove the translate3d value using 'onThrowComplete', but the Draggable values is not cleared.


So my questions are:

1. What is the best practice to integrate a regular tween and a Draggable tween on an element, when xPercent is required on the regular tween?

2. What is the correct way to flush out any values when a Draggable event has completed?


Any help would be appreciated. Thanks in advance.

Link to comment
Share on other sites

Interesting - I've never heard of someone wanting to use percentages for Draggable. Hm. Since you didn't provide a codepen, I'm not entirely sure I understand your question properly, but have you tried using Draggable.update()? 


Also beware that transform percentages are always in relation to the element itself, not the window or parent. I'm curious why you wouldn't use normal px-based transforms, especially if you can do something like element.offsetWidth * 0.5 or something. Not saying it's wrong - just curious. 

Link to comment
Share on other sites

Here is a link of the original carousel without percentages:



This implementation works great with a regular tween and draggable.


But when the window is resized, the carousel snap position is off -- ultimatel I'm trying to resolve how to keep the carousel in correct snap position on window resize, when using draggable and a regular tween.

Link to comment
Share on other sites

i think i just solved it. i just need to tween back to new position on window resize. i'll try that.

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