Let HTML/CSS/JS sections fly in

Question

I'm working on a website, now I want that when you scroll, the respective section flies in (from the left). I'm not really getting anywhere though, would be nice if someone can help me.

A section looks like this:

<section>
<h2>title</h2>
<div>Text and other elements</div>
</section>

CSS:

section {
  max-width: 960px;
  margin: 0 auto;
  padding: 2rem;
  animation: text 3s 1;
}


@media (max-width: 1012px) {
  section {
    width: 90%;
  }
}

Answer 1

I don't know if this is what you're looking

 body { height: 200vh; } #flying { position: sticky; top: 10px; margin: 5px; width: 100px; height: 100px; background-color: green; }.others { width: 100px; height: 100px; background-color: blue; margin: 5px; }

 <div id="flying"></div> <div class="others"></div> <div class="others"></div> <div class="others"></div>