scroll-bound amp-animation

[aghassemi]

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:

Values	Meaning
%0 (or 0%, 0%)	Start as soon as a single pixel of the scene becomes visible.
%100 (or 100%,100%)	Start when the whole scene is fully visible.
0%,100%	When entering the view port from the bottom: Start when the whole scene is fully visible.When entering the view port from the top: Start as soon as a single pixel of the scene becomes visible
100%,0%	When entering the view port from the top: Start when the whole scene is fully visible.When entering the view port from the bottom: Start as soon as a single pixel of the scene becomes visible
%50 (or 50%,50%)	Start when the scene is 50% visible.

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:

Values	Meaning
0 (or 0,0)	thresholds will be calculated based on top/bottom of viewport without any clipping.
100	The top and bottom 100 pixels of the viewport will not be used for calculating thresholds.
0vh,70vh	The bottom 70% of the viewport will not be used for calculating thresholds. (e.g. only top 30% of the viewport will be used for calculating intersection percentages)
33vh,33vh	Only the middle third of the viewport will be used for calculating thresholds.

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

[aghassemi]

@dvoytenko So the original design was fairly close to what we discussed today. (it is a bit more powerful as it allows different ratios for end/start optionally). It however does not allow margin offsets for the scene container, given container itself can be anything, I don't really see he need to allow margins on the scene container anyway.

I am planning to implement this design very soon, PTAL

[lexandera]

I'd like to suggest also adding support for binding animation progress to video playback time. This would make it possible to create an HTML layer on top of video (interactive elements, annotations, ...) and have it always be in sync with the playing content.

[aghassemi]

@lexandera That's a really neat idea! It fits nicely with the discussions we have been having on #8971 as well. I will combine #8971 and this request into a new feature request for amp-video.