onScreen Animation

Whilst not strictly part of the Vanilla theme, there is functionality available that can be used to animate elements of Adapt when they come into view. The _onScreen property is available for both the Framework and the Authoring Tool and can be applied to content objects, articles, blocks, or components - it is recommend, however, to limit usage of the _onScreen property to blocks and components.

"_onScreen": {
  "_isEnabled": true,
  "_classes": "fade-in-bottom",
  "_percentInviewVertical": 50
}

_classes

There are a number of pre-defined classes that can be used to animate elements within Adapt. They are;

Class	Definition	Released
fade-in	Fades the targeted element in from 0 opacity to 1	v5.0.0
fade-in-left	Fades and slides the targeted element in from the left side	v5.0.0
fade-in-right	Fades and slides the targeted element in from the right side	v5.0.0
fade-in-top	Fades and slides the targeted element in from the top	v5.0.0
fade-in-bottom	Fades and slides the targeted element in from the bottom	v5.0.0

Additional classes can be used but they must be predefined in one of the Less files

_percentInviewVertical

Define the percent in-view the targeted element animates on screen. The default is 50