Jump to content

SteveS last won the day on July 23 2022

SteveS had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


SteveS last won the day on July 23 2022

SteveS had the most liked content!

1 Follower

About SteveS

Profile Information

  • Location
    US East

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. Yeah, we need at least the GSAP related code to see what is going on. Without video it's really hard still, but ScrollTrigger issues with reload are fairly regular and fixable.
  2. Can you provide at least a video of the issue? Are you saying when the page loads already scrolled their is a problem?
  3. 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!
  4. 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.
  5. Yeah, looks like it's reverting such that the right side of the element is flush instead of resetting the value to 0
  6. 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.
  7. 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):
  8. Not as well established, but something I have been playing with is Rapier.js Its documentation isn't the best yet and there's few resources on it, but it is still pretty cool if you want to try it out.
  9. Can you explain what the interaction is supposed to look like?
  10. I would look at the existing ways of integrating scrollTrigger with other smooth scrolling libraries like locomotive scroll or AsScroll
  11. bad on me for not checking the flickity docs 😅
  12. Ah, I see. Yeah. If flickity won't provide a callback for when the slide changes then mutation observer should work. This article provides a function to watch for changes in className: https://nikitahl.com/listen-for-class-change-in-javascript
  13. Ok. Well, I still don't understand what this is supposed to look like, but it seems that the issue you are having is that the tween doesn't fire when the class is added or removed. That is expected behavior since you need to tell the tween when to fire. If flickity provides a callback for when a new item is selected, you could put the logic in there. Alternatively, you can use the JS Mutation Observer to watch for when the class changes.
  14. And why are you adding a scrollTrigger to the tween?
  15. So how is this supposed to interact with flickity?