Jump to content
GreenSock

MaryMax

daggable with custom containers

Recommended Posts

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

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!

  • Like 2
Link to comment
Share on other sites

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

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!

  • Thanks 1
Link to comment
Share on other sites

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

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!

  • Haha 1
Link to comment
Share on other sites

Thanks for your advice🌻

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.
×