Jump to content
Search Community

gsap.matchMedia(); draggable not reverting

SteveS test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

I'm running into an odd issue. In my project I am using draggable to get a slider exactly like the one contained in the codepen. I've copied and pasted the styles, html, and JS with the exception of IDs.

However, in my project, upon leaving the bounds of the media query the X transform on the "track" is not reverting. My project is in Astro using Tailwind CSS, TypeScript, and HTML. I tried replacing the tailwind styles with regular styles to match the codepen with no change.

To confirm: upon reaching the bottom break point, the transform3d property of the dragged element is unchanged. In the codepen, everything gets set to 0.

Edit:
I have updated the codepen so that the scroll elements are larger than the viewport when the media query break happens and now the error appears.

What could possibly be preventing the matchMedia from reverting the draggable in my project, but not a codepen? In theory, Astro generates HTML, CSS, and JS that just runs in the browser. I wouldn't expect any deviation in behavior.

Above 800px:
image.thumb.png.38181841108900d14491139f42a4473a.png

Below 800px (content is shifted left, no longer draggable):
image.thumb.png.967a60e00992e7056c0728755b60cc62.png

See the Pen ZEjemdq?editors=0100 by StevenStavrakis (@StevenStavrakis) on CodePen

Edited by SteveS
Updated codepen to emulate error
Link to comment
Share on other sites

Yes, I am on version 3.11.4

It looks like if I remove the cleanup function the behavior changes. Instead of not changing at all, it instead changes to a static negative amount. Seems to be connected to the fact that the element is wider than the viewport when the change happens.

I updated the codepen so that the scroll elements are wider than the 800px breakpoint and am now seeing a similar effect.

Link to comment
Share on other sites

No, the codepen no longer works as expected now that I have updated it. To see the issue, resize the viewport to be lower than 800px and inspect the transform property on the #content element.

Now when it reverts it doesn't revert to 0 and is instead still transformed by some amount.

Link to comment
Share on other sites

  • Solution

I see what you mean. Yeah, Draggable wasn't set up to automatically revert the original transforms like that, but I can add that functionality to the next release: 

See the Pen bGjqXXQ?editors=0010 by GreenSock (@GreenSock) on CodePen

 

In the meantime, it should be as simple as just doing the reset yourself in your cleanup function, like this: 

See the Pen OJwmLLo?editors=1010 by GreenSock (@GreenSock) on CodePen

 

Does that clear things up? 

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