Streaming live at 10am (PST)

Looped scrolling + fading animation

Hello there,
I am trying to build a nice looped scrolled animation inside a DIV. The main idea is to be able to scroll a bunch of DIV elements in a loop and to make sure that whenever each element scrolls in-view it fades in (opacity from 0% to 100%) and whenever each element scrolls out of the view it fades out (opacity from 100% to 0%).

Now, to achieve the looped effect, I used some custom code that I found here: [https://codepen.io/vincentorback/pen/zxRyzj](Scroll Loop on Codepen)
How it works (for what I understood) is basically by creating a duplicate of each element inside the scrollable list and then check when the list fully scrolled: in this moment the list gets automatically scrolled back to the initial position.

So far so good, the loop works flawlessly. I then started implementing the fade in / fade out animation using Webflow Interaction and this is where things started behaving a bit weirdly.

As you can see from the live preview, when the list scrolls, it glitches when it gets updated.
I think it has to do with the custom code (the moment when the first duplicated DIV gets repositioned) and I tried tweaking the Webflow Fading interaction a little bit but nothing seemed to work now :grimacing:

Any help would be much appreciated!

Thank you for your attention,

Matteo


Here is my site Read-Only: https://preview.webflow.com/preview/andrealosa-it?utm_medium=preview_link&utm_source=designer&utm_content=andrealosa-it&preview=580efb9b98bbfc7def4d62024eba9d7a&mode=preview

Hi, @palmierimtt
Did you find a solution?
I’m trying something similar with that codepen.
I saw that you are using a gradient now and, even the transition from the duplicated content is not perfect, I think is good enough.