Animate On Scroll in Angular
How to trigger Angular animations without any third party library
Building SPAs we sometimes come across the need of animating elements while scrolling in the view, similarly to what happens in regular web apps taking advantage of popular libraries like aos.
The thing is, none of the available libraries seem to fit well with Angular and the way it expects the animations to be triggered programmatically, so, I came up with a solution I called wmAnimate.
Notes
This article assumes you are familiar with Angular framework and specifically the way Angular’s animations work.
The Home Page
Let’s take a look on how the home page using “animate on scroll” looks like:
Here the magic is done by the wmAnimate directive instructing the div container to run an animation named “landing” at a “slow” speed while the “aos” flag is the one actually telling the component to trigger upon scrolling into the view.
