Scroll Animations Study

See it Live: https://john-azzaro.github.io/Study-Scroll-Animations/

What is Scroll Animations Study?

"Scroll Animations Study" is an exploration of interactive animations on events such as scroll. In this example, when the user scrolls down the page, two paragraphs will gently reveal from a slightly lower position. This adds a nice touch to websites by revealing text and images.

Here are a few questions from the study to explore:

• What are the key takeaways from the Scroll Animations Study?
• Does Scroll Animations Study feature commentary?
• What are the key features of the Scroll Animations Study?
• Screenshots

What are the key takeaways from the Scroll Animations Study?

Using DOM para.getBoundingClientRect.

---

For this particular implementation of scroll effects (i.e. without a library), I need to make use of para.getBoundingClientRect which returns the size of an element and is position relative to its viewport. In the case of this study, I needed it to get the distance of where this element is relative to the window by getting "para" and the method .getBoundingClientRect(angle), then access the top property.

   let paraPosition =  para.getBoundingClientRect().top;

Using DOM window.innerHeight.

---

This was interesting to use as it was used to make sure the transition works for different screen sizes. In particular, the transition was set for 1.3 the screen height of the viewport.

  let screenHeight = window.innerHeight / 1.3;

Does Scroll Animations Study feature commentary?

Yes! The Scroll Animations Study features commentary. which are in all files as well as the processNotes.txt which gives you a better idea of the step-by-step reasoning.

What are the key features of the Scroll Animations Study?

Since this study is ongoing, basic functionalities are covered first and more advanced features are added or will be added in the future. I divided this particular study into different branches covering different aspects of basic node servers, which i list below:

Features:	Feature Notes:
on scroll, reveal text	reveals text at a specified height

Screenshots