Summary

• Allow animations defined in amp-animation to be ticked using scroll rather than time.
• Allow start/end of an amp-animation to be based on visibility of a whole parent container or another element on the page.

Sample

Idea

amp-animation is a wrapper for Web Animation API which allows manual control of the animation timeline using currentTime property (also supported by the pollyfill). Therefore, scrollbound amp-animation can be achieved by pausing the animation (anim.pause()) and then ticking anim.currentTime with onscroll. (prototype: http://codepen.io/aghassemi/pen/MpGaGm)

• Ignore duration property of the animation definition.
• duration = amount of scrolling that takes us from start to end based on visibility criteria we talk about.
• Most cases: duration =~ 1 viewport scroll
• Everything else stays the same.
• iteration can still be used, but can’t be infinity. (we divide scroll amount by # of iterations)

API

ticker property

Ticker property can be set on any animation definition: ticker=<"time"|"scroll">:

<amp-animation>
{
  "animations": [
    {
      "target": "rabbit-tunnel",
      “keyframes”: []
      “ticker”: “time”, // Time-bound animation
    },
    {
      "target": "alice",
      “keyframes”: [],
      “ticker”: “scroll”, // Scroll-bound animation
    },
  ]
}
</amp-animation>

Visibility Criteria

One can tie start/end of an amp-animation to be based on visibility of a whole parent container or another element on the page. This applied to both scroll and time based animations.

<amp-animation 
   trigger="scene-visibility"
   scene-id=<Id>
   scene-start-visibility-threshold=<fromTop%, fromBottom%>
   scene-end-visibility-threshold=<fromTop%, fromBottom%>
   scene-visibility-exclusion-margins=<top, bottom>
</amp-animation>

trigger="scene-visibility"

Specifies that animation's start/end is tied to visibility of the scene.

scene-id=id

Specifies the HTML id of the container element that constructs the scene. The visibility criteria to decide when to start/end the animation will be based on visibility of this elements.

scene-start-visibility-threshold=<fromTop%, fromBottom%>

Indicates at what % of visibility of the scene the animation should start.

Different values could be provided for when scene is entering the viewport from the top vs from the bottom (e.g. using scrolling up or down).

If a single value is provided, it will applied to both fromTop and fromBottom.

Defaults to 0%, 0% meaning animation will starts as soon as a single pixel of the scene becomes visible.

Examples:

scene-end-visibility-threshold=<fromTop%, fromBottom%>

Indicates at what % of visibility of the scene the animation should end. Otherwise same as scene-start-threshold

scene-visibility-exclusion-margins=<top, bottom>

Can be used to create exclusion margins on top/bottom of the viewport restricting where scene-*-threshold calculation boundaries.

Values can be pixel or viewport sizing (vh).

If a single value is provided, it will applied to both top and bottom

Defaults to 0, 0 meaning thresholds will be calculated based on top/bottom of viewport without any clipping.

Examples:

Questions and Other Considerations

• Proper integration with in-a-box and A4A
• What should happen if iframe containing A4A/in-a-box loads half way through the scroll duration?
  • animation is advanced to the corresponding part of the timeline
  • animation is not advanced but scroll duration is now reduced
  • option to pick either of the above.
• Ability to pick between "1 viewport scroll" vs "1 page scroll" as duration to enable use-cases such as building a page position progress bar. ITI: read position progress bar  #8658