onScreen Animation

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