Jump to content
Search Community

shuggs

Members

  • Posts

    6

  • Joined

  • Last visited

 Content Type 

Posts posted by shuggs

    ScrollTrigger + Draggable

    in GSAP

    Posted

    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

    ScrollTrigger + Draggable

    in GSAP

    Posted

    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. 

    ScrollTrigger + Draggable

    in GSAP

    Posted

    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/ 

×
×
  • Create New...