Animation in and out the viewport

In this section, you discover how to animate the SVG graph Graphane 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 g-component. 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 viewport.enter event to be triggered.

<g-composer intersection-ratio="0.5">
</g-composer>

Event viewport.enter

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

Event viewport.exit

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

Component event

Currently, the viewport.enter and viewport.exit events are fired in the component, not in the SVG template, so you cannot use the g-bind syntax in the templates, and you need to do $.addEventListener() to define an event handler at the component level.