Infinite Marquee with scroll-speed function

Hi People, does anyone know how to achieve this infinite marquee where the users can modify the speed of the it while scrolling?

I know how how to build an infinite marquee, but those I know how to build in webflow are not able to be modified in it´s speed (or even being completely stopped) when users interact with the site.

Thanks in advance for your help :slightly_smiling_face:


Here is my public share link: LINK
(how to access public share link)

Hi @JaimeOrtiz1981 I have found for you an example that you can take as starting point. Just rip off direction change and add stop scroll on image hover. I believe that code examples can be found on internet. It is jQuery so it should work in WF. Sorry I’m not jQuery syntax fan so I can’t help you more.

EDIT: As they use on their website GSAP I’ve a find on forum one example that may be helpful to you.

1 Like

Hi Stan
Thanks a lot for your support and help!, the second example works better since I need acceleration of the scroll speed to work well on smartphones.
On the second example that you have provided, do you know how to decrease the speed of the scroll when it´s being scrolled?

Sure thing @JaimeOrtiz1981 all you have to do to change mouse scroll speed is to set number between 0-1 on function that control it, to control main scroll speed change number of speed form 30 to eg. 100

I have created for you clone with these setting and add simple comments

1 Like

Thanks a lot Stan! you are the best. I tried to copy the js code into my webflow project but i does not work.
Could you be so kind to just tell me where and how to copy it. I´m also including my read-only link
https://preview.webflow.com/preview/ela2022-3ae4c91777da05985f7dfefab2162ad?utm_medium=preview_link&utm_source=designer&utm_content=ela2022-3ae4c91777da05985f7dfefab2162ad&preview=bd6b8110250fe4b5e5a7c468db38a542&pageId=61f9ce41991283ee3f242146&workflow=preview

hi @JaimeOrtiz1981 I do not see you code in page settings but I see that you have probably implement code into page settings → custom code. The first problem is that you do not have code wrapped in <script> tags. To be able run GSAP in any website you need inject GSAP library which I can’t see on your website either.

Get links to GSAP library from any CDN service you prefer or just read GSAP documentation where is all you need.


rendered code is just TEXT !!!

HI @JaimeOrtiz1981 I have been digging and coding all day long to find some some kind of reliable infinite scroll as on example on “Elite” has some issues when browser shrinks it will mess with images. I have found one that looks promising and doesn’t need any extra library. I will definitely try this one just in case I need it in future. :wink:

1 Like

ok , here it the thing, I’m not able to make it work on WF :face_with_symbols_over_mouth: but it works for me everywhere else not only CodePen. I have tried several things to make it work as placing code into page or site settings even inject it externally as I do when writing and testing JS, different HTML structure…

I thing that has something to do with body element but not 100% sure, but no mother what I do it just will not work and it just jumping back to beginning or just stop on the end. I have give up and add another black point to WF when is come to custom code. If someone find the way how to make it work in WF please share it. :wink:

EDIT: I have just tested code in local environment and it works only in Chrome.

Chrome: works (WF implementation doesn’t work in Chrome )
Safari: jumping to beginning
Firefox: stops on the end
Brave: stops on the end

1 Like

Hi Stan! thanks a lot for your support. Sorry that I havent been answering your posts, but i was not in checking my account this last saturday. I think im gonna leave it too that thing with the scroll.
Thanks a lot for your kind support :smiley:
Jaime

1 Like

hi @JaimeOrtiz1981 I was over the weekend trying to figure out how it is done on “Elite” website even that is not reliable. He has image boxes in flex-wrap that is easy part but I cant figure out how he is switching boxes distance that is shown in DOM. He is using another library https://github.com/ashthornton/asscroll but not sure what he is using it for.

Anyway as making endless loop with scroll feature is nice topic I have been developing my approach but Im just on beginning to figure out the principles what will be best way to achieve scroll to both directions endlessly.

I have decided to use Observers for it as it is easier to control and give me lots of data I can use. I can make easier infinite scroll adding box to end but … There is lot of thing you need to control, overall height of page, the way page is scrolling (up/ down) and based on result perform functionality and at the same time watching position of box or wrapper in viewport depend on approach used, pausing autoscroll for fraction of time when scroll is activated, its intersection distance from top and bottom etc etc. :crazy_face:

Like I have said is not easy and there is not good article to get into problem (I have learned a lot over the weekend reading many articles) :wink:

here are 2 rough ideas (not)

VERSION 1

  1. check wrapper/page moving/scrolling direction
  2. when wapper’s end reach innerHeight bottom (XXXXpx / %??) clone wrapper
  3. when wrapper end reach innerHeight TOP (-XXXXpx / %??) remove wrapper

VERSION 2

  1. check wrapper/page moving/scrolling direction
  2. check each box position
    when box is out of view and not intersecting append to end/top based on scroll direction
  3. move box to its new position
    when scroll UP add to bottom when wrapper scroll DOWN prepend to first child of parent

There was init idea just monitor boxes move in viewport but there was a problem (for me) monitoring scroll direction, to be able use values of window properties oldScroll and scrollY etc etc etc.

Maybe I overcomplicating things but create reliable endless autoscroll with scroll options ins’t as easy as I thought at least for me. :shushing_face:

Anyway I need to move to other things but this is one thing I would like to have in future if client will request such feature.

I didn’t try WF native actions yet if it is possible so if someone have it done please add example in comments.