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:

• The first section contains the interaction, Apply to Many is used to copy these interactions to other sections.
• Scroll Scene action is used to control the animation
• Custom animation (edited in Timeline Editor) has two transforms:
  • The first one is a Set that removes class Active and displays the element.
  • Tween that adds the class Active. Note that the animation engine tweens CSS properties of the class, for example background color.
• Hide at Start action is used to hide the element, so that we don't see a flicker when the page loads and Active class is removed by the first Set in the animation.
• We added bottom margin to the last section, so that it can reach the center scroll position.