Scrolling is the fundamental interaction of the Internet. Having animated elements triggered on scroll is a common practice, but what if you want to take it to another level? For example, websites like r2d3 — A visual introduction to machine learning and NASA: Prospect all features full-scale animations that users can control and interact with through scrolling.
I was really drawn to this form of interaction, which has inspired me to create OKAI — An Interactive Introduction to Artificial Intelligence(AI). Every chapter (except Chapter 0) features full-scale scroll-based animations that visualize and break down complicated concepts in AI. Allowing users to control the pace of the animations give them a sense of control and security when exploring the unknown world of AI principles.
In this article, I am presenting the workflow of how these animations are created and controlled through scrolling.