#BlackLivesMatter
Do you build things with AMP? Fill out the new AMP Developer Survey!
AMP

Important: this documentation is not applicable to your currently selected format ads!

amp-orientation-observer

Description

Monitors the orientation of an element within the viewport as a user scrolls, and dispatches events that can be used with other AMP components.

Required Scripts

<script async custom-element="amp-orientation-observer" src="https://cdn.ampproject.org/v0/amp-orientation-observer-0.1.js"></script>

Supported Layouts

Overview

The amp-orientation-observer component monitors the orientation of a device, and dispatches low-trust level events (alpha, beta, gamma) that report changes in the device's orientation along the alpha, beta and gamma axises in terms of angle and percent. These can be used to trigger actions (Only Low Trust Actions) on other components (e.g., amp-animation).

The amp-orientation-observer component is only useful when used with other components and does not do anything on its own.

Events

These are the low-trust level events that the amp-orientation-observer component dispatches:

Event Description
alpha Represents the motion of the device around the z axis.
beta Represents the motion of the device around the x axis.
gamma Represents the motion of the device around the y axis. This represents a left to right motion of the device.

What can I do with amp-orientation-observer?

Currently, amp-animation and several video players in AMP are the only components that allow low-trust events to trigger their actions (e.g., starting an animation, seeking to a position within the animation, pausing a video, etc.).

Scroll-bound animations

Imagine an animation where the hour hand of a clock rotates as the user scrolls the page.

<!-- An animation that rotates a clock hand 180 degrees. -->
<!--
   Note that we are NOT setting `trigger=visibility`
   since we will manually trigger the animation.
-->
<amp-animation id="clockAnim" layout="nodisplay">
  <script type="application/json">
    {
      "duration": "3s",
      "fill": "both",
      "direction": "alternate",
      "animations": [
        {
          "selector": "#clock-scene .clock-hand",
          "keyframes": [
            {"transform": "rotate(-180deg)"},
            {"transform": "rotate(0deg)"}
          ]
        }
      ]
    }
  </script>
</amp-animation>

<!-- The clock container -->
<div id="clock-scene">
  <!--
    Use amp-orientation-observer to tie the movement of the clock scene within
    the viewport to the timeline of the animation
  -->
  <amp-orientation-observer
    on="beta:clockAnim1.seekTo(percent=event.percent)"
    layout="nodisplay"
  >
  </amp-orientation-observer>
  <amp-img layout="responsive" width="2" height="1.5" src="./img/clock.jpg">
    <div class="clock-hand"></div>
  </amp-img>
</div>

Attributes

alpha-range (optional)

Specifies that the associated action should only take place for changes between the specified range along the z axis. Specified as a space separated list of 2 values (e.g., alpha-range="0 180"). By default, the related action is triggered for all changes between 0 and 360 degrees.

beta-range (optional)

Specifies that the associated action should only take place for changes between the specified range along the x axis. Specified as a space separated list of 2 values (e.g., beta-range="0 180"). By default, the related action is triggered for all changes between 0 and 360 degrees.

Example: Using beta-range to limit the range of degrees to watch along the x axis

Imagine an animation where the hour hand of a clock rotates as the user scrolls the page.

<amp-orientation-observer
  beta-range="0 180"
  on="beta:clockAnim1.seekTo(percent=event.percent)"
  layout="nodisplay"
>
</amp-orientation-observer>
gamma-range (optional)

Specifies that the associated action should only take place for changes between the specified range along the y axis. Specified as a space separated list of 2 values (e.g., gamma-range="0 90". By default the related action is triggered for all changes between 0 and 360 degrees.

smoothing (optional)

When enabled, outputs a moving average of the last n values instead of the raw value read from the sensor. By default, when activated, smoothing will be set to 4 points.

Validation

See amp-orientation-observer rules in the AMP validator specification.

Precisa de mais ajuda?

Você já leu este documento várias vezes, mas ainda ficou com dúvidas sem respostas? Talvez outras pessoas pensem da mesma forma. Procure entrar em contato com elas no Stack Overflow.

Ir para o Stack Overflow
Encontrou um bug ou sente falta de um recurso?

O projeto AMP incentiva fortemente sua participação e contribuições! Esperamos que você se torne um participante assíduo de nossa comunidade de código aberto, mas também agradecemos contribuições pontuais para problemas que você tenha particular interesse.

Ir para o GitHub