About this example

In this example we add class Active to sections when they come into scroll view. On scrolling in the opposite direction, class Active is removed.

By default, all sections have the Active class, so that complete information is displayed also when Javascript is disabled in the browser.

UPDATE: In Pinegrow Interactions 2.0 class changes are no longer animated. That means that classes are still added and removed, but the styling changes between these states are not animated. If you wish to animate styles, you need to add relevant transforms to the animation.

Notes about implementation:

Has "active" class

Has "active" class

Has "active" class

Has "active" class