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 
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