New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

scroll-bound amp-animation #8411

Closed
aghassemi opened this Issue Mar 27, 2017 · 3 comments

Comments

@aghassemi
Member

aghassemi commented Mar 27, 2017

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

2

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. #8658

@aghassemi aghassemi self-assigned this Mar 27, 2017

@aghassemi aghassemi added this to the New FRs milestone Mar 27, 2017

This was referenced Mar 27, 2017

@aghassemi aghassemi changed the title from scoll-bound amp-animation to scroll-bound amp-animation Mar 28, 2017

@ericlindley-g ericlindley-g added this to Sprint (candidate) in UI Mar 30, 2017

@ericlindley-g ericlindley-g moved this from Sprint (candidate) to Sprint (committed) in UI Mar 31, 2017

@aghassemi aghassemi added the Needs UX label Apr 3, 2017

@aghassemi

This comment has been minimized.

Show comment
Hide comment
@aghassemi

aghassemi May 31, 2017

Member

@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

Member

aghassemi commented May 31, 2017

@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

This comment has been minimized.

Show comment
Hide comment
@lexandera

lexandera Jun 4, 2017

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.

lexandera commented Jun 4, 2017

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

This comment has been minimized.

Show comment
Hide comment
@aghassemi

aghassemi Jun 5, 2017

Member

@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.

Member

aghassemi commented Jun 5, 2017

@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment