Infinite Loop integration

Design help Custom code
1

Hey guys, I tried to integrate this into my website https://codepen.io/vincentorback/pen/zxRyzj

Here is my website https://acommons-com.webflow.io/

I hooked up the code on the homepage specifically, tried both on the header and body. I gave the body wrapper .js-loop and named the last div as .is-clone, but the site doesn’t loop as intended.

Will anyone have any advice on how to implement this?
Thanks!

1 Like
2

Hi Egon,

Can you share a read-only link to the project?

btw, watch out for that horizontal scroll there :slight_smile:

3

https://preview.webflow.com/preview/acommons-com?utm_source=acommons-com&preview=54159035740290347602cc502e64019d

Thank you, will fix that scroll!

4
  1. Use a different div to wrap the hole website and give it the classes of Loop and js-loop (don’t use the body for that).
  2. Give the body and the js-loop elements the css properties as in the codepen (Oveflow, position, height, etc’)

That should do the trick :smiley:

5

Hey @avivtech, thank you very much for the help.
Currently, scrolling upwards work, but not downwards.
Would you know why that’s the case?

6

hmm… a progress! almost there :wink:

I am not sure, but try removing the css you entered in the <head> tag and apply it directly to the elements using Webflow.

7

Hey! I got it to work changing the 1 pixel scroll to 5 in the JS. No idea why, but it worked!
Just got to play around with the numbers more now.
Thanks again buddy.

1 Like
8

Amazing! happy to help :smile:

If you can, please mark as solved

2 Likes
9

Hi there, can somebody help me to solve this? I can’t seem to be making this work, what am I doing wrong? I tried the solution above, but unfortunately the preview link of the example has been changed too much and I don’t think the structure is there anymore.

https://preview.webflow.com/preview/petras?utm_medium=preview_link&utm_source=dashboard&utm_content=petras&preview=1114100d69af873b24d2494f49c35577&mode=preview

Thanks in advance!

10

Hey, could you possibly help me as well! I can’t preview the example that had this resolved…
Thank you! See my post below for the link

11

Hi @avivtech

I found this post and manage the implement it and works fine. However, i want this for CMS items in a grid and the scroll loop does only work for one column. Would you know why?

Here is my Read only link: https://preview.webflow.com/preview/danielremes?utm_medium=preview_link&utm_source=designer&utm_content=danielremes&preview=514f6b5c0b008083b21f46398d7c662b&workflow=preview

12

Hi, Late response but I think you only need to make sure your -body class has overflow: hidden. I made it work in my site…

/Daniel

14

Hi, Thanks for that.
I made it work, but when I publish and preview, I get some sort of flicker once I reach the end and the loop starts. Do you get this too? Is it possible to make it smooth?

Here is the published staging site - https://petras.webflow.io/

15

Hi,

It works perfectly when I visit the link. I open it in Safari.