How to build a feature comparison split screen layout?

Hello everyone, newbie here :wave:

I’m trying to build a section with a feature comparison split screen layout but I can’t seem to find any help that addresses this specific (and very common) type of layout. I attached a couple of screenshots of examples from and

I’ve made the section and divided it into a grid with two columns: one for the features and one for the visuals. From this point on I have several questions:

  1. Should the grid have as many rows as features? I watched this tutorial ( where the grid has only one row and the scrolling reveals the other features.

  2. Is it possible to animate the feature scroll with webflow’s interactions or does it have to be custom code, like in the tutorial above. I also watched the same creators tutorial on achieving the same thing but without custom code(, but I can’t seem to understand how to extrapolate his method to what I’m trying to build here lol ? :face_with_spiral_eyes:

**Also I don’t mind if it’s just clickable like the Sage example or clickable/timed like the Webflow example.

  1. Should the features be part of a collection list and pull all the data from there (much like the tutorials above) or should it be individual text?

  2. How can I add the highlight vertical colored line to each feature?

I’ll put the link to the page I’m working on, the section I want to apply this to is “¿cómo funciona?”

BONUS: I also need help trying to achieve a similar -but slightly different- interaction in the section above “Nuestras soluciones”, where I want the section to stick and as the user scrolls, it goes through the three different types of products/solutions and the image changes accordingly. (I followed the tutorial above for this but got stuck at the custom code :face_with_diagonal_mouth:)

Thanks for the help!!

Here is my site Read-Only: Webflow - LISTO.MX
(how to share your site Read-Only link)