SteveS Posted January 10, 2023 Share Posted January 10, 2023 (edited) 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: Below 800px (content is shifted left, no longer draggable): See the Pen ZEjemdq?editors=0100 by StevenStavrakis (@StevenStavrakis) on CodePen Edited January 10, 2023 by SteveS Updated codepen to emulate error Link to comment Share on other sites More sharing options...
GreenSock Posted January 10, 2023 Share Posted January 10, 2023 Are you sure your project is using the latest version of GSAP (3.11.4 right now)? Draggable was made Context-aware in that version. Link to comment Share on other sites More sharing options...
SteveS Posted January 10, 2023 Author Share Posted January 10, 2023 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 More sharing options...
SteveS Posted January 10, 2023 Author Share Posted January 10, 2023 Yeah, looks like it's reverting such that the right side of the element is flush instead of resetting the value to 0 Link to comment Share on other sites More sharing options...
GreenSock Posted January 10, 2023 Share Posted January 10, 2023 I'm a little fuzzy on if you figured it out or if you still need help. The CodePen is behaving exactly as it should, right? Link to comment Share on other sites More sharing options...
SteveS Posted January 10, 2023 Author Share Posted January 10, 2023 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 More sharing options...
Solution GreenSock Posted January 11, 2023 Solution Share Posted January 11, 2023 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? 2 Link to comment Share on other sites More sharing options...
SteveS Posted January 11, 2023 Author Share Posted January 11, 2023 Yeah, that's what I ended up doing but wanted to confirm the matchMedia behavior and see if it was something I didn't unerstand. Thanks! 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now