Jump to content
Search Community

Draggable Plugin scrollProxy animation

kamcauley test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

Hi there!

 

My timeline example:

 

I built this draggable timeline based on this demo: 

See the Pen ALvYEO by GreenSock (@GreenSock) on CodePen

 

Everything came together rather well except the dragTL.scrollProxy.left(); doesn't maintain the inertia, like in the example, when you drag on the timeline scrubber and it snaps to the point on the timeline. In the example, when the knob snaps to one of the markers the slides smoothly scroll into position but in my example, they jump into place. I'm wondering if there is a way to pass in the "gsap.to" functionality to the scrollProxy object. I'm still very green with GSAP and javascript in general.

 

Also, I added in the functionality so that the year markers on the timeline track are clickable and will scroll using the Draggable scrollProxy object - but I want to be able to add an animation to that as well. Is that possible with my current methods or do I need to rebuild to something more like this example

See the Pen yLbOwOa by GreenSock (@GreenSock) on CodePen

?

 

  

See the Pen vYjGmYZ by kmcauley (@kmcauley) on CodePen

Link to comment
Share on other sites

Hey there!

 

Just wanted to pop by to say sorry you haven't got a response yet. You're not being ignored - there's just quite a lot of code and a few different questions here, so it's going to be a little harder to parse than a some of the other questions in here.

I've taken a look but I'm afraid I'm not to well versed with draggable and scrollProxy, maybe someone else will drop by soon with an answer for you.

If you don't get a response here are some tips that may increase your chance of getting a solid answer:
 

  • Ask one question at a time so that people helping don't get overwhelmed
  • Reduce the code down in your demo as much as possible. Try to show the problem you're trying to overcome in the simplest way possible.
  • Add a clear description of the expected result - "I am expecting the purple div to spin 360degrees"
  • A clear description of the issue -  "the purple div only spins 90deg"
  • A list of steps for someone else to recreate the issue - "Open the demo on mobile in IOS safari and scroll down to the grey container" 

 

Link to comment
Share on other sites

  • Solution

If I understand you correctly, it should be as simple as changing ".endX" to ".x" in your onThrowUpdate: 

// old
dragTL.scrollProxy.left((maxScroll * dragMarker.endX) / -dragMarker.maxX);

// new
dragTL.scrollProxy.left((maxScroll * dragMarker.x) / -dragMarker.maxX);

Does that help? 

  • Like 1
Link to comment
Share on other sites

@GreenSock - any thoughts on my second question?

 

 I added in the functionality so that the year markers on the timeline track are clickable and will scroll using the Draggable scrollProxy object (line 50 in my code) - but I want to be able to add an animation to that as well. Is that possible with my current methods or do I need to rebuild to something more like the slider with the navigation example?

Link to comment
Share on other sites

On 9/12/2022 at 3:02 AM, kamcauley said:

 I added in the functionality so that the year markers on the timeline track are clickable and will scroll using the Draggable scrollProxy object (line 50 in my code) - but I want to be able to add an animation to that as well. Is that possible with my current methods or do I need to rebuild to something more like the slider with the navigation example?

Sure, just tween the value instead of setting it. 

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

  • Like 1
Link to comment
Share on other sites

  • 1 month later...

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