Jump to content
Search Community

ScrollTrigger + Draggable

dznyc test
Moderator Tag

Recommended Posts

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

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

  • Like 3
Link to comment
Share on other sites

  • 9 months later...
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

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

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.

 

  • Thanks 1
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.
×
×
  • Create New...