<section class="hero">
  <h1 class="hero__title">Hello</h1>
</section>
<article class="article">
  <h1 class="article__title">Article 1</h1>
  <p class="article__text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Commodi error doloremque modi aut molestias culpa pariatur quas. Vitae nisi impedit rem quia sed voluptate, expedita magni explicabo suscipit, ducimus dolore.</p>
  <p class="article__text">Molestias nam, voluptatibus quo accusantium nobis perferendis consequatur? Adipisci quibusdam consequatur aperiam, ipsam enim mollitia unde aut minima et error atque! Natus quibusdam id accusantium neque iusto nisi laudantium. Commodi!</p>
  <p class="article__text">Exercitationem quo quaerat neque possimus placeat aliquam sed dolorum cumque. Voluptatum architecto quaerat consectetur, tempora ipsum provident ratione fuga quos, a quia quam dolor quo deleniti repudiandae incidunt dicta nostrum!</p>
  <p class="article__text">Vero numquam illo beatae voluptate corporis porro blanditiis impedit ea eligendi atque, similique eos cum pariatur quibusdam voluptatibus asperiores dolor architecto molestiae tempore omnis? Facere voluptatem ab porro perferendis vel.</p>
  <p class="article__text">Unde laborum ea iure consectetur corrupti placeat corporis sed ab deserunt quibusdam quasi nemo fugiat recusandae delectus quis qui, nisi incidunt exercitationem temporibus amet architecto! Libero unde provident eos quasi?</p>
  <p class="article__text">Aut facilis, quae officiis itaque eum voluptates illo iste odit inventore cumque autem. Aperiam possimus minima assumenda tempore quibusdam, repudiandae consequuntur pariatur itaque voluptates voluptatibus mollitia. Adipisci perferendis sequi ut!</p>
  <p class="article__text">Veritatis magnam saepe, debitis reiciendis ab consequuntur beatae iusto mollitia, eligendi necessitatibus qui in explicabo deleniti consectetur labore animi minima recusandae facilis quibusdam eius dolores odio nobis voluptatem. Eveniet, commodi.</p>
  <p class="article__text">Alias iure nisi quibusdam molestias pariatur id perferendis mollitia accusantium voluptatum veniam laudantium, eius beatae recusandae debitis magni saepe error deserunt voluptatibus soluta ipsa quis. Enim suscipit ipsa porro distinctio!</p>
</article>
<article class="article">
  <h1 class="article__title">Article 2</h1>
  <p class="article__text">Quod dolores architecto quis quaerat maxime harum aperiam voluptatem expedita, perspiciatis laboriosam facilis praesentium odit? Natus sed similique eos vero, reiciendis exercitationem adipisci mollitia magni, sunt fugiat possimus, dolorum ea.</p>
  <p class="article__text">Explicabo cupiditate reiciendis, ad ipsa quos ipsam maxime commodi libero nam dolores illum doloremque earum perferendis harum fuga dolore voluptate necessitatibus voluptatem, quis inventore vero qui recusandae! Eum, impedit animi.</p>
  <p class="article__text">Eius eaque cum ab veritatis autem magni facere eum accusamus adipisci voluptatem dignissimos reiciendis ut, quia commodi dolorum excepturi laborum fugit officiis? Tenetur impedit quisquam repellat ex iure ipsam. Dicta.</p>
  <p class="article__text">Corporis iste veritatis ab ipsam, dolor voluptates, ipsum nostrum vero reiciendis ad qui eos voluptatem consequuntur quo inventore voluptatum quaerat commodi alias laboriosam unde dolore nisi fugit ratione dignissimos. Est.</p>
  <p class="article__text">Sunt ipsum quo nemo, dignissimos culpa nihil qui, aspernatur voluptatem officiis temporibus ex rerum dolor minus. Dolore amet perferendis iste, atque hic sequi at laboriosam! Dolore, accusantium numquam. Illo, perferendis?</p>
  <p class="article__text">Molestiae doloribus laudantium, ex quidem deserunt suscipit labore, perspiciatis accusantium, assumenda obcaecati blanditiis natus aliquam nobis velit a dignissimos ullam voluptates exercitationem eum! Assumenda debitis quas hic aspernatur doloribus dicta!</p>
  <p class="article__text">Earum aspernatur in cum nam, itaque deserunt dolor nobis repellendus. Aliquid quasi illum nemo, numquam saepe quidem repellendus tenetur reprehenderit? Obcaecati nisi voluptatum deserunt deleniti quaerat voluptates veritatis fugit iure!</p>
  <p class="article__text">Atque minima, consequatur perferendis temporibus possimus nesciunt officiis quam rerum, nisi corporis quidem alias enim nihil aut placeat voluptates necessitatibus natus voluptas facere recusandae. Iste cumque eligendi facilis quae natus?</p>
</article>
<article class="article">
  <h1 class="article__title">Article 3</h1>
  <p class="article__text">Non itaque ex sit, reprehenderit sunt reiciendis dolorem suscipit omnis eius sapiente corporis voluptatem esse. Natus sit optio temporibus repellat, dolorum magnam, exercitationem ea eius, corrupti veniam reprehenderit nobis itaque.</p>
  <p class="article__text">Illum porro et consequuntur itaque distinctio voluptas commodi omnis minus eveniet. Deleniti sequi ullam quae voluptate non suscipit aspernatur asperiores eligendi expedita, consequuntur perferendis inventore modi maiores dolorem corrupti fuga!</p>
  <p class="article__text">Veniam molestiae sunt ipsam, consequuntur incidunt delectus tenetur quidem recusandae necessitatibus. Accusantium distinctio, repudiandae saepe non error quod provident fugiat nisi dolorum atque officia, voluptate eveniet ullam, facere delectus omnis.</p>
  <p class="article__text">Reiciendis, ea. Sequi vel amet nam nisi tempore cupiditate facere praesentium laboriosam quis earum sapiente reiciendis perspiciatis voluptatum, doloremque mollitia totam, nulla a obcaecati eos magnam asperiores eaque nihil blanditiis.</p>
  <p class="article__text">Pariatur eum esse porro tempora. Necessitatibus perspiciatis excepturi, placeat nemo aperiam a doloremque error eos nesciunt blanditiis at laudantium, delectus, ipsam repellendus veritatis nobis nam atque! Fuga, saepe est. Amet.</p>
  <p class="article__text">Aperiam placeat fugiat nam! Est quo accusantium, cumque delectus eius quisquam dolores quam officiis id dolor placeat ex, et corrupti? Numquam officiis debitis vero voluptatum dolores neque voluptate. Consequatur, harum!</p>
  <p class="article__text">Excepturi ex earum non, nihil iure dolorum delectus optio, consectetur debitis vel sequi accusantium quisquam velit consequatur accusamus odio deserunt aliquam tempore adipisci, asperiores praesentium? Dicta unde ipsa blanditiis non!</p>
  <p class="article__text">Autem, incidunt at maiores cumque excepturi voluptatem sit, enim iste assumenda error commodi atque architecto ea culpa asperiores rerum itaque nobis. Repudiandae magnam aliquam similique dolore maiores placeat, ducimus tempora?</p>
</article>
<article class="article">
  <h1 class="article__title">Article 4</h1>
  <p class="article__text">Voluptatum, est porro! Iure alias nisi culpa excepturi possimus reiciendis nihil ratione nulla porro odio amet tempore dicta omnis dolorum accusamus quisquam labore non qui, inventore sapiente illo sunt voluptatibus.</p>
  <p class="article__text">Delectus quae veniam dolore in magni quidem animi, quaerat veritatis harum necessitatibus voluptates perferendis corrupti dicta officiis velit unde. Nesciunt ullam eum numquam magnam consequuntur praesentium omnis natus nemo nisi.</p>
  <p class="article__text">Hic voluptas quidem reiciendis non aut perspiciatis quia ab quisquam, nulla facilis, voluptate distinctio facere, quam sed. Alias voluptas laborum cum, beatae iste recusandae. Dignissimos soluta fugiat consequuntur earum aut.</p>
  <p class="article__text">Esse nulla repellendus, corporis reiciendis veniam qui harum quas distinctio eos autem nobis asperiores aperiam veritatis sunt optio vitae libero voluptatem nemo quam aspernatur vero placeat? Quam autem consectetur fuga.</p>
  <p class="article__text">Nam soluta necessitatibus iusto! Quo porro excepturi architecto tenetur eius inventore aspernatur corrupti similique blanditiis ex animi, rem magnam consectetur nobis quaerat eveniet earum dolorem quae omnis nemo doloremque perferendis.</p>
  <p class="article__text">Minima consequuntur cum, ratione, id perferendis, blanditiis quo magnam quibusdam saepe voluptas expedita quidem tempore aut temporibus quod eos tempora distinctio earum qui omnis officiis libero voluptatibus dolores. Quaerat, eum.</p>
  <p class="article__text">Veritatis, facilis inventore impedit consequuntur commodi pariatur! Recusandae ipsum, aliquam, fugiat itaque laborum assumenda optio eaque perspiciatis quod nam maxime accusamus, dolore quaerat cumque omnis nostrum harum totam fugit inventore?</p>
  <p class="article__text">Similique officiis at quia nihil dolore, dignissimos dicta, laudantium aut a, architecto iste cupiditate excepturi inventore. Quam et explicabo ipsam voluptates id ratione, dolor nam delectus! Adipisci nisi sit natus.</p>
</article>
<article class="article">
  <h1 class="article__title">Article 5</h1>
  <p class="article__text">Ducimus maxime debitis, aliquid delectus animi exercitationem nam provident sit, quas veniam impedit explicabo, laborum quos. Consectetur nemo cumque provident harum itaque at minus assumenda doloribus, ex delectus, dolorum expedita.</p>
  <p class="article__text">Dolor quibusdam repudiandae voluptate nemo nisi minima, earum et sint! Nemo dolorum laudantium numquam. Placeat, laborum voluptas, officiis repellendus accusamus dolorum temporibus eos nobis nam aspernatur, fuga amet quaerat. Possimus?</p>
  <p class="article__text">Necessitatibus repellendus recusandae id quam eveniet ipsa expedita cupiditate odit possimus sit excepturi, tenetur quasi temporibus inventore? Magnam aliquam tempora voluptatem minima culpa. Aspernatur voluptates vitae minus quis quidem et?</p>
  <p class="article__text">Delectus aspernatur quae tempora, temporibus possimus accusantium consequuntur eaque, corporis quas velit adipisci beatae repudiandae animi sit similique porro vitae. Nobis quos doloribus quas odio corrupti similique iure nulla eveniet.</p>
  <p class="article__text">Dolore, quo ratione eum est quaerat pariatur amet facere iusto voluptatum laudantium recusandae ad explicabo accusantium corporis dolores totam eos modi sequi, earum sint consectetur deserunt, eligendi in ullam! Laboriosam?</p>
  <p class="article__text">Soluta doloribus modi officia expedita earum cum totam pariatur ipsum. Possimus fugiat sequi doloribus qui mollitia itaque illum exercitationem maxime esse culpa earum doloremque, quisquam dolores, debitis nemo dicta quam!</p>
  <p class="article__text">Amet libero eaque sapiente sed, praesentium blanditiis perspiciatis voluptate nostrum velit nemo cum maxime nobis fugit consectetur hic. Cum maiores deserunt iusto vitae qui inventore facilis quos? Quaerat, nostrum doloremque.</p>
  <p class="article__text">Adipisci repellendus mollitia earum? Iure unde cumque magni quas voluptates magnam hic reiciendis asperiores, laborum cum officia deserunt eum facilis, ea eos amet fugit. Ipsa necessitatibus debitis soluta quo. Cumque!</p>
</article>
<article class="article">
  <h1 class="article__title">Article 6</h1>
  <p class="article__text">Nihil autem cumque quod incidunt delectus veniam obcaecati, laboriosam illo totam cupiditate unde natus molestias porro a at illum, in, rerum ipsum. Cumque quod dolores, voluptatibus mollitia a sit voluptates!</p>
  <p class="article__text">Ut ipsam aut quaerat vitae, sint eius nostrum ad impedit deserunt commodi sunt excepturi, architecto, numquam quo pariatur! Eveniet iure dolorum, natus corrupti quas saepe veritatis ad mollitia laudantium explicabo!</p>
  <p class="article__text">Dolores, aut sequi ut, sunt, vel aliquid a deserunt reiciendis animi in incidunt assumenda. Assumenda, asperiores explicabo? Voluptatum, dolores! Dolor porro alias praesentium dolorum aliquam beatae repellendus expedita non architecto!</p>
  <p class="article__text">Animi qui molestias quas delectus. Soluta neque temporibus eius voluptatum voluptatem hic officia! Nulla placeat aliquid est impedit, inventore odit recusandae itaque tempora, et illo quam, adipisci laudantium vero sit?</p>
  <p class="article__text">Eum amet dignissimos consequuntur magni dolore! Eveniet reiciendis doloribus ullam modi? Voluptates dolorum in deleniti dolorem labore sed! Expedita in rerum natus necessitatibus velit, voluptate unde laborum atque illo magnam!</p>
  <p class="article__text">Quia dolore iste unde error ad inventore sit beatae pariatur. Quasi, ducimus cumque praesentium cupiditate odit provident ad soluta consectetur repellendus amet vero pariatur saepe eveniet adipisci recusandae. Laborum, sed.</p>
  <p class="article__text">Eaque nulla consequatur impedit expedita omnis assumenda maxime deleniti a quam odio magni vero, tenetur minima non necessitatibus eos architecto voluptates voluptate fugit cumque sequi, quis accusantium. Esse, magnam nulla.</p>
  <p class="article__text">Voluptatem reiciendis facere ducimus at sapiente repellat odio perspiciatis harum quasi accusantium molestiae adipisci neque, similique magnam est enim culpa iste. Fuga repudiandae, necessitatibus quisquam assumenda labore voluptas earum libero.</p>
</article>
<article class="article">
  <h1 class="article__title">Article 7</h1>
  <p class="article__text">Blanditiis veniam laboriosam natus nesciunt corporis omnis aliquam, porro corrupti, quidem molestias ea reiciendis neque ratione quos dignissimos mollitia magni sint architecto! Molestias veniam nostrum fuga, ipsam consequuntur ad ipsa.</p>
  <p class="article__text">Illo iure dicta omnis sunt reiciendis asperiores placeat facilis doloremque sint autem, illum impedit officiis ab, cumque, magnam voluptate provident quidem quam quibusdam ea exercitationem vitae voluptatum minima dolorum! Cumque!</p>
  <p class="article__text">Tenetur exercitationem rerum a modi omnis optio minima aliquid repudiandae quae vero, cum expedita laudantium, distinctio magni quos rem harum! Maxime amet accusantium nulla? Id doloremque magnam deserunt ipsam officiis.</p>
  <p class="article__text">Nesciunt nam asperiores saepe nostrum labore, quas molestiae adipisci, perspiciatis hic deserunt ipsa, sint iusto dolores nisi ab magnam veniam rem quasi sit autem temporibus dicta id. Nisi, rem quam.</p>
  <p class="article__text">Voluptates in vel quidem eum doloremque quae facilis ratione nam, soluta placeat minus corporis error officiis culpa perspiciatis? Commodi nam dolores debitis exercitationem ut provident odit iusto quia distinctio incidunt.</p>
  <p class="article__text">Molestiae, obcaecati. Dolores quidem, tenetur fugiat impedit autem quae veritatis voluptatibus sequi placeat, commodi temporibus possimus blanditiis quibusdam eos consequuntur dolorem sapiente voluptate a vero, quasi libero totam quaerat voluptatum.</p>
  <p class="article__text">Maxime iusto veritatis nemo debitis sapiente esse laudantium aliquam totam dolorem ullam facere est asperiores voluptate commodi nam magni vitae cupiditate, pariatur nesciunt quibusdam laborum molestias molestiae obcaecati! Eligendi, nobis.</p>
  <p class="article__text">Aliquid ullam incidunt perspiciatis ad esse at nobis, recusandae laborum earum autem consequatur tenetur corporis ut error rem adipisci laudantium a nulla ipsam vero, quasi quod architecto iste! Natus, beatae.</p>
</article>
<article class="article">
  <h1 class="article__title">Article 8</h1>
  <p class="article__text">Atque dicta rem beatae, quos officiis ad unde corrupti vel deleniti vero iusto id facere aperiam? Fugit atque tempore sed culpa aperiam ipsa ipsum tempora ea fugiat? Repellat, sunt molestias.</p>
  <p class="article__text">Tempore velit minima impedit voluptatem omnis ipsa non error rerum. Accusantium nisi, voluptatem ullam, impedit atque similique enim voluptatum itaque officia tenetur ipsum. Nam delectus dignissimos quisquam. Reiciendis, quod tenetur!</p>
  <p class="article__text">Quo esse, obcaecati alias dolor temporibus soluta ab tempore dolores, suscipit aut autem, quibusdam provident error dolorem perferendis ducimus perspiciatis voluptatum eum architecto atque sequi sapiente officiis ipsum similique? Tenetur.</p>
  <p class="article__text">Quae dignissimos animi, laboriosam cumque sapiente nostrum nobis perferendis provident earum incidunt iste ea voluptas aliquam tenetur minus et inventore modi labore nisi vitae ipsa sed quidem, delectus architecto! Facilis.</p>
  <p class="article__text">Itaque dicta iste pariatur, nobis obcaecati commodi sint tenetur laboriosam voluptates, architecto harum officiis voluptatibus odit, delectus sed? Animi aliquam necessitatibus iure ipsa, saepe dolore hic quisquam facere reprehenderit iusto.</p>
  <p class="article__text">Exercitationem ipsa delectus dolorem, necessitatibus tenetur architecto iusto, reiciendis odit sed, animi nemo qui! Mollitia adipisci veritatis voluptatem natus quos quae accusamus, ad numquam modi, qui voluptas. Nesciunt, non omnis!</p>
  <p class="article__text">Officia dicta facere architecto? Nesciunt natus ratione est, mollitia tempore quibusdam? Rem quo quae reprehenderit in cumque, rerum magni sequi provident maxime mollitia commodi ex delectus dolore non a modi.</p>
  <p class="article__text">Eaque esse numquam delectus, optio quisquam ratione, nesciunt obcaecati commodi cupiditate, ea porro iste! Libero, enim nam. At possimus natus pariatur dolorem. Dolor iusto soluta eos quidem dicta corporis eius!</p>
</article>

body {
  margin: 0;
  font: 16px 'Roboto', 'Segoe UI', Arial, Helvetica, sans-serif;
    background: url(https://images.unsplash.com/photo-1562386130-926081dc4fbf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&q=100);
  background-size: cover;
  background-attachment: fixed;
  background-position: 50% 50%;
}

.hero {
  height: 100vh;
  padding: 80px;
  box-sizing: border-box;
  display: flex;
  align-items: flex-end;
  user-select: none;
}

.hero__title {
  padding: 16px;
  margin: 0;
  font-size: 16vmin;
  font-weight: 300;
  line-height: 1;
  background: rgba(0, 0, 0, 0.4);
  color: #ffffff;
}

.article {
  position: relative;
  padding: 80px;
  background: #f5f5f5;
}

.article:not(:last-child) {
  margin-bottom: 16px;
}

.article__title {
  position: sticky;
  top: 0;
  margin: 0;
  padding: 16px 0;
  font-size: 32px;
  font-weight: 300;
  background: #f5f5f5;
  z-index: 100;
  opacity: 0;
}

.article__text {
  margin: 0;
  text-indent: 2em;
  text-align: justify;
  opacity: 0;
}

.article__text:not(:last-child) {
  margin-bottom: 16px;
}

const controller = new ScrollMagic.Controller();

const articles = document.querySelectorAll('.article');
let i = 0;
for (let article of articles) {
  const title = article.querySelector('.article__title');
  const text = article.querySelectorAll('.article__text');

  const timeline = new TimelineMax();
  timeline.to(title, 0.4, { opacity: 1 });
  timeline.staggerTo(text, 0.25, { opacity: 1 }, 0.1);

  const scene = new ScrollMagic.Scene({
    triggerElement: article
  });
  scene.addIndicators({
    name: `article ${++i}`
  });
  scene.setTween(timeline);
  scene.addTo(controller);
}