Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
dznyc

ScrollTrigger + Draggable

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 post
Share on other sites

Hello dznyc,

 

here’s a recent post which looks at scrolltrigger and draggable that might help you.

 

Link to post
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 post
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 post
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 post
Share on other sites

I only see a problem in the embedded demo, showing a scrollbar at the bottom.

 

 

image.png

 

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 post
Share on other sites

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 

Capture.PNG

Link to post
Share on other sites

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 post
Share on other sites
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 

Capture.PNG

 

I've attached a video to show the issue I'm facing

Link to post
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 post
Share on other sites

Fine for me on firefox and chrome both embedded and on codepen. 🙃 (mac)

Gotta love an inconsistent bug

Link to post
Share on other sites

Quick question, @shuggs - do you have the browser zoomed at all or is it at exactly 100%? 

Link to post
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.

×