Jump to content
Search Community

Dooshan

Members

  • Posts

    12

  • Joined

  • Last visited

 Content Type 

Posts posted by Dooshan

    Vertical infinite scroll

    in GSAP

    Posted

    On 2/4/2022 at 12:13 PM, akapowl said:

    Hello @Daniyarkz

     

    It looks to me like you tried to re-write the horizontalLoop helper function from the docs to make it work vertically?

     

    I'm not sure it would be as easy as that, as I saw @GreenSock craft another version of a helper function specifically for vertical looping in this thread.

     

     

     

    Here is one way you could utilize it to fit the logic you were trying to implement in your example.

    I'm not sure if this is the best way to do it, but it works. Maybe it will help. Happy tweening!

     

     

     

     

     

     

    Edit:

     

    And just now I saw the comment in the code, that the 'speed can be positive or negative (in pixels per second)'.

    So this actually gets quite a bit easier in the end.

     

     

     

     

     

    Can I get some help? I need a third column that goes down, as first? (JS confuse me)
    Here is a forkec codepen: 

    See the Pen BaOZLNV by stdusan (@stdusan) on CodePen

    Infinite marquee loop

    in GSAP

    Posted

    48 minutes ago, GreenSock said:

    It's hard for me to decipher what you were trying to do there, @Dooshan but...

    1. There were errors in your JavaScript (adding an event listener to a null object for example)
    2. You were creating two completely different infinite loops simultaneously with totally different techniques on the same elements, so they were conflicting with each other. 
    3. You had extra code in there that wasn't serving any purpose at all. 

    Are you trying to do this?: 

     

     

    Exactly! Thanks. I'm sorry, I shouldn't have play with the original pen. 

    Can't make custom cursor "draggable"

    in GSAP

    Posted

    6 minutes ago, GreenSock said:

    I see two problems:

    1. Your cursor element is obscuring the pointer/mouse events, so make sure you set pointer-events: none on that element. 
    2. You're listening to "mousemove" events only, but that's not cross-browser friendly. If you put a console.log() inside the event handler, you'll see that it stops being dispatched while you're dragging (at least in some browsers). You'll probably need to listen for pointermove events at least for some browsers. But of course some older browsers don't dispatch those. And Safari uses touchmove events. So you'll need to code around that. 

    Here's a quick fork showing how pointermove events seem to work, at least in Chrome. None of this is GSAP-related. 

     

     

    Thanks a lot! I'm a newbie

    Can't make custom cursor "draggable"

    in GSAP

    Posted

    2 hours ago, ZachSaucier said:

    Again, I am still unable to reproduce what you show in the gif. Please list exactly what you're doing and what OS and browser you're on so that I can try to reproduce the issue :) 

    Mac OS, Chrome, Firefox, Safari... all acts the same.
    You know how you can drag certain elements on webpage? I can't do that with custom cursor because it stays on the starting point of drag. And it also messes up the swiper slider (as on codepen)
    With normal mouse is like this: https://imgur.com/a/MzcPkjt (it's a gif)

     

    Can't make custom cursor "draggable"

    in GSAP

    Posted

    2 hours ago, ZachSaucier said:

    Hey Dooshan. Thanks for the minimal demo. However I can't seem to recreate the issue that you're talking about. Can you please provide the exact steps that you're taking to create the issue? Including browser and OS information if relevant.

    It's a little bit harder when there's no slider, so I added it. Try to drag slides. 

     

    https://codepen.io/stdusan/pen/pobYvOa

×
×
  • Create New...