Hello, I’m a beginner and I’m trying to create a hero section for my new website with some basic scroll animation.
To be more precise, I’m having two columns in the hero section. In the left column are two text blocks, one underneath the other. I want these two to animate by scrolling and switch in a fade in-out matter. I wrapped these columns in a div with a longer height, ca 200%vh and position it sticky. The other column have a text link which should stay in the place while the left columns is switching between these two text blocks.
Now, I kind of managed to do this, but it’s not anywhere optimal, I believe there are a lot of mistakes. Can anyone please explain to me what am I doing wrong and how is the best to structure this? Also how to set the animation so this scroll fading effects feel natural. I’m also not sure if this exact layout will work on other breakpoints.
Here is my public share link: LINK https://rad-54474e.webflow.io/
This hero section will also include an embedded interactive javascript code which is a cute interactive animation made in p5.js which will play on the logo symbol and be placed behing everything. I’m planning to embed it after I figure out the structure and animation for the hero header text. I suppose I can do this by creating a new code element with an absolute position and maybe set up the Z-axis thing so it goes behind? Will this work?
Anyways, I’m super grateful for all input, since I’m feeling totally lost.
I finished some courses here but practice is something else.
Thanks in advance,
Radovan