kamcauley Posted September 9, 2022 Share Posted September 9, 2022 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 More sharing options...
Cassie Posted September 9, 2022 Share Posted September 9, 2022 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 More sharing options...
Solution GreenSock Posted September 9, 2022 Solution Share Posted September 9, 2022 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? 1 Link to comment Share on other sites More sharing options...
kamcauley Posted September 12, 2022 Author Share Posted September 12, 2022 @GreenSock - that did it! Thank you 🙌 Link to comment Share on other sites More sharing options...
kamcauley Posted September 12, 2022 Author Share Posted September 12, 2022 @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 More sharing options...
GreenSock Posted September 14, 2022 Share Posted September 14, 2022 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 1 Link to comment Share on other sites More sharing options...
kamcauley Posted November 3, 2022 Author Share Posted November 3, 2022 Brilliant! Thank you 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