MaryMax Posted January 4, 2023 Share Posted January 4, 2023 Hi there. Here's the original pen See the Pen 597a468071d4dce3f7bf0ce80d6cb8d3?editors=1010 by michellebarker (@michellebarker) on CodePen I need to put it inside wrapper, but I can't get the draggable to work. Even when I click the dots or dates, it doesn't animate the track to the next position. How can I use #wrapwrap as my scroller? Thank U💚 See the Pen vYaXeQL by MaryMax (@MaryMax) on CodePen Link to comment Share on other sites More sharing options...
Rodrigo Posted January 4, 2023 Share Posted January 4, 2023 Hi, The issue is that you're using a scroller in the ScrollTrigger configuration and because of that this method always returns 0: const getUseableHeight = () => document.documentElement.offsetHeight - window.innerHeight What you have to do is use the right element to get the proper scroll amount you're passing to SrollTrigger's scroll method. This seems to work as you expect: const scrollerElement = document.querySelector("#wrapwrap main"); const getUseableHeight = () => (scrollerElement.offsetHeight - window.innerHeight); Hopefully this helps. Let us know if you have more questions. Happy Tweening! 2 Link to comment Share on other sites More sharing options...
MaryMax Posted January 5, 2023 Author Share Posted January 5, 2023 7 hours ago, Rodrigo said: Hi, The issue is that you're using a scroller in the ScrollTrigger configuration and because of that this method always returns 0: const getUseableHeight = () => document.documentElement.offsetHeight - window.innerHeight What you have to do is use the right element to get the proper scroll amount you're passing to SrollTrigger's scroll method. This seems to work as you expect: const scrollerElement = document.querySelector("#wrapwrap main"); const getUseableHeight = () => (scrollerElement.offsetHeight - window.innerHeight); Hopefully this helps. Let us know if you have more questions. Happy Tweening! Thanks Rodrigo but my drag animation still doesn't work. When I click on dots it should animate along the line to its new position. See the Pen vYaXeQL?editors=1011 by MaryMax (@MaryMax) on CodePen Link to comment Share on other sites More sharing options...
Rodrigo Posted January 5, 2023 Share Posted January 5, 2023 Hi, You should use the ScrollTo Plugin for that. Adding this seems to do the trick: navLinks.forEach((link) => { link.addEventListener("click", (e) => { e.preventDefault(); gsap.to("#wrapwrap", { duration: 1, ease: "power2.inOut", scrollTo: { y: link.getAttribute("href"), } }) }); }); Once again this is related to the fact that you're not using the window object as the scroller, so you have to take into account the actual scroller element you're using. Hopefully this clear things up. Happy Tweening! 1 Link to comment Share on other sites More sharing options...
MaryMax Posted January 11, 2023 Author Share Posted January 11, 2023 I added a 200vh width div above the timeline container. Once I drag the track and then scroll the page it gets out of the sink with the scrollbar. Could you please help me? I can't get gsap.utils.mapRange to work. See the Pen wvxJVYx?editors=1100 by MaryMax (@MaryMax) on CodePen Link to comment Share on other sites More sharing options...
Rodrigo Posted January 11, 2023 Share Posted January 11, 2023 Hi, I'm curious about why you're disabling/enabling the ScrollTrigger instance in your Draggable instance's drag start/end callbacks. If you remove that everything seems to work as expected: const draggableInstance = Draggable.create(track, { type: 'x', inertia: true, bounds: { minX: 0, maxX: getDraggableWidth() * -1 }, edgeResistance: 1, // onDragStart: () => st.disable(), // onDragEnd: () => st.enable(), onDrag: updatePosition, onThrowUpdate: updatePosition }) The updatePosition method is actually using ScrollTrigger instance tied to the track element, so disabling it as you drag seems counter productive IMHO. I think, if possible, try to simplify your setup as much as possible. If I was you I would add everything into a single GSAP Timeline and then apply ScrollTrigger to just that, since everything is tied to the wrapper scroll position and, as you already know, updating a ScrollTrigger instance with Draggable is not that complex. Just a suggestion though, if your current setup works for you and makes sense keep it, if it ain't broken don't fix it I believe people say Happy Tweening! 1 Link to comment Share on other sites More sharing options...
MaryMax Posted January 12, 2023 Author Share Posted January 12, 2023 Thanks for your advice🌻 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