In View Animations
These are the built in animations for transitioning elements into view
You can see them change as you scroll along this page
fade-in
By default, InViewComponents will transition as soon as 20% of it is in the viewport.
This corresponds to a 'threshold' attribute being set to 0.2
fade-side
This component uses the 'threshold' attribute to wait until the element is almost completely in the viewport before becoming visible.
fade-up
This component uses the 'threshold' attribute to animate as soon as any part of the component enters the viewport.
The margins of the Observer Root have been adjusted so that you can see the transition working
Single Transition
If you want to only transition elements the first time they become visible, you can set 'untrackOnCallback' to true.
none
The transition style can also be set to 'none' in order to implement your own styles or event handlers.
The current threshold of this component is 0
In this example, I am using a callback function to display the current threshold of this component