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
fade-in	Fades the targeted element in from 0 opacity to 1
fade-in-left	Fades and slides the targeted element in from the left side
fade-in-right	Fades and slides the targeted element in from the right side
fade-in-top	Fades and slides the targeted element in from the top
fade-in-bottom	Fades and slides the targeted element in from the bottom

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