dznyc Posted September 11, 2020 Share Posted September 11, 2020 Ran into an issue that I'm sure is easy to solve, but very new to this. Would like to be able to have a ScrollTrigger animation that moves a Draggable object. The issue that I'm having is that when I drag the object, it skips back to where the ScrollTrigger animation left off rather than updating the position. Any help is appreciated! Thanks. See the Pen eYZMwMx by dznyc (@dznyc) on CodePen Link to comment Share on other sites More sharing options...
Richard1604 Posted September 11, 2020 Share Posted September 11, 2020 Hello dznyc, here’s a recent post which looks at scrolltrigger and draggable that might help you. Link to comment Share on other sites More sharing options...
GreenSock Posted September 11, 2020 Share Posted September 11, 2020 Welcome to the forums, @dznyc. First of all, thanks for providing a minimal demo. That's a huge help! What you're asking may be logically impossible (unless I'm misunderstanding). You want the scroll position to scrub a tween that controls the position of the element...and you also want the user to control its position via drag? What would you expect to happen if the user scrolls halfway down (thus the ScrollTrigger is at 50% progress) and then the user drags to a totally different position and lets go? What would happen if they scroll up...or down? Here's my best crack at what you might be wanting: See the Pen 21fbbf0c242c90ef148c8d920e3cb474?editors=0010 by GreenSock (@GreenSock) on CodePen 3 Link to comment Share on other sites More sharing options...
shuggs Posted June 22, 2021 Share Posted June 22, 2021 On 9/10/2020 at 9:33 PM, GreenSock said: Welcome to the forums, @dznyc. First of all, thanks for providing a minimal demo. That's a huge help! What you're asking may be logically impossible (unless I'm misunderstanding). You want the scroll position to scrub a tween that controls the position of the element...and you also want the user to control its position via drag? What would you expect to happen if the user scrolls halfway down (thus the ScrollTrigger is at 50% progress) and then the user drags to a totally different position and lets go? What would happen if they scroll up...or down? Here's my best crack at what you might be wanting: Is it possible to make dragging scrub a tween that affects an objects transform, rather than modify an objects transform directly? I'm asking about this because I'm trying to implement a wrapping, draggable, scrollable horizontal image carousel, like this one: https://prb-a.com/ Link to comment Share on other sites More sharing options...
OSUblake Posted June 23, 2021 Share Posted June 23, 2021 Hi shuggs! If you have a question to ask, it's better to start a new thread. Check out this demo. See the Pen RwKwLWK by GreenSock (@GreenSock) on CodePen And learn about how something like that works. https://css-tricks.com/going-meta-gsap-the-quest-for-perfect-infinite-scrolling/ Link to comment Share on other sites More sharing options...
shuggs Posted June 23, 2021 Share Posted June 23, 2021 15 hours ago, OSUblake said: Hi shuggs! If you have a question to ask, it's better to start a new thread. Check out this demo. And learn about how something like that works. https://css-tricks.com/going-meta-gsap-the-quest-for-perfect-infinite-scrolling/ Hey! Thanks for sharing this example. I'm currently trying to adapt it. I have noticed that on Chrome, scrolling to the right (scrollbar towards the bottom) will get stuck on the 0 card. This doesn't happen on FireFox. See the Pen bGqPxWq?editors=1111 by seanhuggins1 (@seanhuggins1) on CodePen Here's my modified example. I've added some console.log statements which fire when the carousel wraps right or left. You should be able to see that on Firefox, "wrap-left" and "wrap-right" are logged when you'd expect them to be, whereas on chrome, "wrap-left" AND "wrap-right" fire continuously when you attempt to scroll down. I think it has something to do with the onUpdate() method in the ScrollTrigger instance firing more than it should for Chrome browsers. Any thoughts on this? Weird that there seems to be a browser inconsistency. Thanks for your help. Link to comment Share on other sites More sharing options...
OSUblake Posted June 23, 2021 Share Posted June 23, 2021 I only see a problem in the embedded demo, showing a scrollbar at the bottom. Probably a css issue or something to do with running inside an iframe. When I open it up on CodePen it works fine. 🤷♂️ Link to comment Share on other sites More sharing options...
shuggs Posted June 23, 2021 Share Posted June 23, 2021 Really? The demo doesn't work for me in both the Iframe and in codepen.. and I'm not seeing a scrollbar at the bottom. Really strange Link to comment Share on other sites More sharing options...
OSUblake Posted June 23, 2021 Share Posted June 23, 2021 If I could get the problem to happen on CodePen, I could try to troubleshoot it, but it only happens for me on the embedded pen. Anyone else seeing this problem? Link to comment Share on other sites More sharing options...
shuggs Posted June 23, 2021 Share Posted June 23, 2021 35 minutes ago, shuggs said: Really? The demo doesn't work for me in both the Iframe and in codepen.. and I'm not seeing a scrollbar at the bottom. Really strange I've attached a video to show the issue I'm facing 2021-06-23 16-09-44.mp4 Link to comment Share on other sites More sharing options...
shuggs Posted June 24, 2021 Share Posted June 24, 2021 31 minutes ago, OSUblake said: If I could get the problem to happen on CodePen, I could try to troubleshoot it, but it only happens for me on the embedded pen. Anyone else seeing this problem? I've troubleshooted it a bit... there seems to be an issue with how trigger.scroll() is working for me across different browsers. On chrome trigger.scroll(1) actually moves the scroll position to 0, causing the subsequent scrollTrigger update to wrap backwards (hence lock the carousel in place). Whereas on firefox, trigger.scroll(1) moves the scroll position to 1 as you'd expect. I can temporarily fix it by calling wrap(1,2) instead of wrap(1,1) but it's super weird to me why this is happening. 1 Link to comment Share on other sites More sharing options...
Cassie Posted June 24, 2021 Share Posted June 24, 2021 Fine for me on firefox and chrome both embedded and on codepen. 🙃 (mac) Gotta love an inconsistent bug Link to comment Share on other sites More sharing options...
GreenSock Posted June 25, 2021 Share Posted June 25, 2021 Quick question, @shuggs - do you have the browser zoomed at all or is it at exactly 100%? 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