Animation in and out the viewport

In this section, you discover how to animate the SVG graph Grapper when the component is visible into the viewport.

Attribute viewport-ratio

To activate the animation when the component enters the visible area (the viewport) it is necessary to define a viewport-ratio attribute in grapper-view. This attribute has to contain a value between 0 and 1 that indicates the percentage of the component that must be inside the visible area for the event to be triggered.

<grapper-view intersection-ratio="0.5">
</grapper-view>

Event intersection.enter

When the component enters the viewport at the ratio indicated in viewport-ratio a intersection.enter event is triggered which can be captured to launch an animation, modify SVG attributes, etc.

Event intersection-exit

Similarly, we can capture the intersection-exit event that is fired when the component exits the visible area at the rate indicated in viewport-ratio.