AMP amp-position-observer と amp-animation

AMP の amp-position-observer と amp-animationを使って、スクロール量に応じてナビゲーションの現在地のスタイルを変更するというのをやってみる。

結果

See the Pen AMP amp-position-observer & amp-animation by jotaki (@yuheijotaki) on CodePen.

つまづいた点など

amp-position-observer の取得フラグや位置の範囲

その名の通り、ポジションを監視しますという AMP JS なのですが、デモを見ても分かる通り、どうやらブラウザ上で画面に表示されている領域にいる場合は true 状態といった模様。
つまり、

<section id="section_01" class="content">
  <amp-position-observer on="enter:section_01_on.start; exit:section_01_off.start" layout="nodisplay"></amp-position-observer>
  <h2>section_01</h2>
</section>

例の場合、<section id="section_01"> の要素がブラウザ上で見えている限りは true の状態。

今回のようにナビゲーションの現在値を切り替える実装したい場合は、各セクションの高さがある場合は問題ないけれど、ブラウザの高さより低いコンテンツで実装する際は別方法か、<amp-position-observer> のマーカー自体を別 <div> などにいれてあげて処理しないと難しいかもしれない。（それでも無理っぽいですが）

amp-position-observer では引数が渡せない

各箇所に <amp-position-observer> 設置するのはいいとして、アニメーション処理側の <amp-animation> に引数などが渡せないっぽいので、ひとつのナビとセクションごとに処理を記述する必要がありかなり冗長になってしまいました。

この点含め、日本語のドキュメントやブログもあまりないのでなかなか細々した処理系は結構難易度高いなと感じました。

amp-animation の "keyframes" では使えるプロパティが限られる。

CSS3 でできるアニメーションはだいたいいけると思ってたのですが、 サポートされる CSS – AMP の 「制約のあるスタイル 」である通り、opacity、transform、-vendorPrefix-transformしか動かせない。
なので仮にボーダー引くとかのアニメーションする場合は空 span 作って無理くりやるしかなさそうです。