Creating scroll snapping blocks with GSAP v3 animations

1<main>
2  <article>
3    <h2>So...</h2>
4    <h3>This is a story all about how</h3>
5  </article>
6  <article>
7    <h2>The web got flipped, turned upside down</h2>
8  </article>
9  <article>
10    <h2>And i'd like to take a minute and sit right there</h2>
11  </article>
12  <article>
13    <h2>Read my blog, kthnxbye</h2>
14    <h3><a href="https://webanimation.blog">webanimation.blog</a></h3>
15  </article>
16</main>

1main {
2  scroll-snap-type: y mandatory;
3  position: relative;
4  max-height: 100vh;
5  overflow-y: auto;
6}
7
8article {
9  height: 100vh;
10  width: 100vw;
11
12  display: flex;
13  flex-flow: column nowrap;
14  justify-content: center;
15  align-items: center;
16
17  scroll-snap-align: start;
18}
19
20article:nth-of-type(1) {
21  background-color: rgba(0, 82, 178, 1);
22}
23article:nth-of-type(2) {
24  background-color: rgba(255, 164, 0, 1);
25}
26article:nth-of-type(3) {
27  background-color: rgba(144, 195, 255, 1);
28}
29article:nth-of-type(4) {
30  background-color: rgba(255, 173, 25, 1);
31}
32
33h2,
34h3,
35a {
36  font: 400 3rem/1.5 sans-serif;
37  color: white;
38  transform-origin: center;
39  text-decoration: none;
40}
41
42h3 {
43  font: 400 2em/1.5 sans-serif;
44}

1// Elements you want to track
2const blocks = document.querySelectorAll('main article');
3
4const blocksObserver = new IntersectionObserver(
5  entries => {
6    // entries === elements
7    return entries.forEach(event => {
8      // destructures the values we want to check for in the animateVisible function
9      const { target, intersectionRatio, isIntersecting } = event;
10      // Call function when an intersection triggers.
11      animateVisible(target, intersectionRatio, isIntersecting);
12    });
13  },
14  // threshold means the percentage between 0-1 (0 = 0, 1 = 100) when we want the intersection callback to trigger.
15  // This Intersection Observer triggers when the element is in view for at least half of it's height.
16  { threshold: 0.5 }
17);
18
19for (const block of blocks) {
20  blocksObserver.observe(block);
21}

1// Set all children of the article to invisible (autoAlpha is a mix between CSS properties: opacity and visibility) and downward for 1rem
2// Note: * should be avoided because it can cause performance issues, but for this example it was fine.
3gsap.set('main article *', { autoAlpha: 0, y: '1rem' });
4
5// Is triggered in the Intersection Bbserver
6const animateVisible = (block, ratio, isIntersecting) => {
7  // When the element is in view:
8  if (ratio > 0 && isIntersecting) {
9    // Animate all the children of this element
10    gsap.to(block.querySelectorAll('*'), {
11      // duration is one second
12      duration: 1,
13      // animate back to visible
14      autoAlpha: 1,
15      // animate back to top
16      y: '0',
17      // stagger will make all animations fire 0.3 seconds after each other.
18      stagger: 0.3,
19      // Ease In Out: accelerates --> decelerates
20      ease: 'power3.inOut',
21    });
22  } else {
23    // When the element is not in view anymore we set it to invisible and downward for 1rem (16px usually)
24    gsap.set(block.querySelectorAll('*'), {
25      autoAlpha: 0,
26      y: '1rem',
27    });
28  }
29};