<div class="container">
<h1 class="heading">First container heading</h1>
<p class="content">Looping is so helpful!</p>
</div>
<div class="container">
<h1 class="heading">Second container heading</h1>
<p class="content">Looping is so helpful!</p>
</div>
<div class="container">
<h1 class="heading">Third container heading</h1>
<p class="content">Looping is so helpful!</p>
</div>
@import url('https://fonts.googleapis.com/css?family=Signika+Negative:300,400&display=swap');
body {
font-family: "Signika Negative", sans-serif;
font-weight: 300;
}
.container:nth-child(2) {
text-align: right;
}
.container > * {
opacity: 0;
}
gsap.utils.toArray(".container").forEach((container, i) => {
const header = container.querySelector("h1");
const content = container.querySelector(".content");
gsap.to([header, content], {autoAlpha: 1, duration: 0.5, stagger: 1, delay: i * 2});
});
This Pen doesn't use any external CSS resources.