The AMP Project Roadmap

What was accomplished

Story interactives - 🐛 Fixed text align of buttons #33217

Page attachments - Attachments do not open when clicked using TalkBack #33186 - Launching the CTA update with images in an experiment #33142 - Click listener on shadow root container #33187

Story video - 🐛 Fix video downgrading on load #33170

Story a11y - ♿ Improve screen reader output for interactive components #32969

Story player - ♿ Add label for next story and add i18n for pagination buttons #33205 - 📖 Rename skip-next control to skip-to-next #33164

What's next

• CTA improvements
• Panning media lock bounds
• Monti support
• Deprecate the bookend and sidebar

What was accomplished

Story autoanalytics - Added repeat: false on story-page-visible #32296

Story devtools - Rename logs and move Page Experience #32451

Story responsiveness - Added documentation to presets on amp.dev #32311

Story video - Add cached sources with different qualities to amp-video #32337

Panning media - Respect prefers-reduced-motion #32282 - Add early exit on animation loop #32320

Story Player - Load player iframes sequentially when starting from other than first story #31212 - Improvements on documentation

What's next

• Release documentation on Player
• More improvements on video performance
• Desktop experience update (Removing 3 panel UI)
• Work on panning-media component
• Work on primary CTA experience

What was accomplished

• Player:
• [amp-story-player] Player refactoring ♻️ #32115

• [amp-story-player] Introduce render() method ♻️ #32153

• Auto analytics:

• [Story auto-analytics] Added validation and tests #32288
• [Story auto-analytics] Initialize extension #32241

• amp-analytics linkers config not working on all web stories links #32060

• Panning media:

• [Panning media] Transition sibling group #31932
• [Panning media] Accelerate transitions using translate3d #32254
• [Panning media] Position / scale element #31503
• [Panning media] Transition between pages #31504

• [Panning media] Animate with JS #32098

• Story dev tools (in browser debugging tool):

• [Story devtools] Stories don't load on preview tab if starting on other tabs #32124
• [Story devtools] Finalize UI details: dark scrollbar, center devices, change tab order #32126
• [Story devtools] Device details #32074

• [Story devtools] Added logs status icon on tab selector #31709

• Story page layer:

• [Story page-layer] Internal support for scaling-factor on grid-layer #31282

• Other:

• [amp-story] 🐛 Add role=button back to components that need it #32283
• [amp-story] 🐛 Hiding story education layer when viewport warning layer is visible #32230

What's next

• Player simplification / performance refactor
• Panning media locked bounds attributes #31522 #31505
• CTA UX / UI updates

What was accomplished

• Player:
• Desktop navigation button should show "next" on the last page of a story #31224

• Documentation revamp

• diagnostic tooling (dev-tools):

• Add success page for logs #31906

• Interactives:

• disclaimer on interactive components #31447

• Other:

• iOS 14.2 and 14.3 Unmuted navigation is bug fix (#31911)[https://github.com/ampproject/amphtml/issues/31911]
• Page attachment UI to show URL #27941
• Prerendered story branching URL bug fix #29351

What's next

• Analytics component planning
• Desktop panels experience
• Player performance enhancement planning

cc @ampproject/wg-stories

What was accomplished

AMP Story Player

• Dev preview documentation README.md
• Custom UI Controls API amphtml/issues/30031
• "Expand to fullscreen" button amphtml/issues/30377
• Hide close button when tweet is expanded amphtml/issues/29718

amp-story-360

• Filed WebGL loseContext WebKit bug with one pager and example app
• Validator improvements
• amphtml/pull/30869
• amphtml/pull/31028 (PR pending)
• Compress testing and diff assets amphtml/pull/31002
• Manage webGL resources (PR pending) amphtml/issues/29512
• Component visual diff tests (PR pending) amphtml/issues/30739
• Manual QA testing guide

Others

• Improve how storyProgress analytics metric are computed amphtml/issues/30821
• Fix rendering of transformed amp-story document amphtml/issues/30798
• Visual diff test for transformed amp-story document amphtml/pull/31001

What's next

Content layout

• Extension to preview story responsiveness amphtml/issues/31031

Large image panning component

• A persistent image component that transitions between pages

cc @ampproject/wg-stories

What was accomplished

• Story format:
• Enforce navigational safe zone on desktop amphtml/issues/30825

• Ignore links that prevent navigation amphtml/issues/31108

• 360 Component:

• Fixed: Animation does not always play amphtml/issues/31062
• Fixed: Inactive pages do not stay paused amphtml/issues/31121
• Fixed: Gyroscope mode amphtml/issues/31061
• Deallocate resources on page navigation amphtml/issues/29512
• Improve duration validation amphtml/issues/31028

• Added documentation amphtml/issues/29511

• Player:

• Allow no initial stories amphtml/issues/31192
• Merged documentation
• Improve player behavior on scrolling amphtml/issues/28009

• Expose go to page API amphtml/issues/31047

• Dev-tools:

• Created extension and trigger amphtml/issues/31194
• Added header and tabs amphtml/issues/31265

What's next

• More AMP Story dev-tools
• Aspect-ratio guidance implementation
• Launch 360 component
• Large image panning
• Fix player improvements and bugs after launch

What was accomplished

Interactive Components (quizzes/polls)

• Official documentation published amphtml/issues/29468
• Fix prompt alignment https://github.com/ampproject/amphtml/issues/30531

360

• 360 video support ampproject/amphtml#29509
• Feature discovery UI & animation amphtml/pull/30406
• Pause animation on long press https://github.com/ampproject/amphtml/issues/29593

Others

• Build pagination buttons for prerendered stories https://github.com/ampproject/amphtml/pull/30503

AMP Story Player

• Fix responsive layout validation https://github.com/ampproject/amphtml/issues/30414
• Fix responsive layout sizing https://github.com/ampproject/amphtml/issues/30423

What's next

AMP Story Player

• Dev preview documentation
• Custom UI Controls API https://github.com/ampproject/amphtml/issues/30031
• Fetch stories from endpoint https://github.com/ampproject/amphtml/issues/29864

Interactive Components (quizzes/polls)

360

• Manage webGL resources amphtml/issues/29512
• Default heading for gyroscope amphtml/issues/30002

cc @ampproject/wg-stories

What was accomplished

New team member

• Welcome @raxsha!!

AMP Story Player

• Fetch more stories from a remote JSON API endpoint amphtml/issues/29864
• Fix a P0 where an amp-story-player fails to render entirely amphtml/issues/30783

Interactive Components (quizzes/polls)

• Remove confetti effects if user vote is being loaded ampproject/amphtml#30584
• Binary polls won't properly clamp long options to two lines amphtml/issues/30657

amp-story-360

• 360 video support demo ampproject/amphtml#29509
• Gyroscope default heading optimizations amphtml/issues/30002

Others

• Fix .getImpl race condition on Android, that was probably causing completely blank stories on render ampproject/amphtml#30598
• Disable the video equalizer on Stories with no audio UI amphtml/issues/29933
• Fix Story amp-video usage with amp-analytics amphtml/issues/29938
• Fix story video poster stretched on first page amphtml/issues/30651

What's next

AMP Story Player

• Dev preview documentation
• Custom UI Controls API amphtml/issues/30031

360

• Manage webGL resources amphtml/issues/29512
• Component visual diff tests amphtml/issues/30739

cc @ampproject/wg-stories

What was accomplished

Web Player

• Dispatch end of stories event https://github.com/ampproject/amphtml/issues/29865
• Fix fragment param issue https://github.com/ampproject/amphtml/pull/30069
• End of stories behavior API finalized https://github.com/ampproject/amphtml/issues/29289
• show() improvements https://github.com/ampproject/amphtml/pull/30085

Interactive Components (quizzes/polls)

• Create public documentation for new sizing strategy https://github.com/ampproject/amphtml/issues/30035
• Size components with relative units https://github.com/ampproject/amphtml/issues/29925
• Show ellipsis with 4 lines https://github.com/ampproject/amphtml/issues/29897
• Change amp-story-interactive version to 0.1 https://github.com/ampproject/amphtml/pull/30080

A11y

• Make education screens buttons focusable for screen readers ampproject/amphtml#30021

Others

• Fix audio race conditions. ampproject/amphtml#29520
• "swipe to go to next story" animation bug https://github.com/ampproject/amphtml/issues/30025

What's next

Web Player

• UI Controls API https://github.com/ampproject/amphtml/issues/30031
• End of stories behavior https://github.com/ampproject/amphtml/issues/29289
• More samples / documentation

Interactive Components (quizzes/polls)

• Create animations for the results component ampproject/amphtml#29818
• Work on supporting multiple layouts for interactive components ampproject/amphtml#29925

Animations

• Example story for new animation presets https://github.com/ampproject/amphtml/issues/30028

360

• Public documentation https://github.com/ampproject/amphtml/issues/29511
• Feature discovery UI ampproject/amphtml#29591

Accessibility

• Talkback: provide a way to navigate to the next story page ampproject/amphtml#29974

cc @ampproject/wg-stories

What was accomplished

Interactive Components (quizzes/polls)

• Official documentation in progress amphtml/issues/29468

360

• Feature discovery UI & animation amphtml/pull/30406

Others

• Reduce bundle size of interactives by 11% ampproject/amphtml/pull/30233/issues/30274
• System UI updates amphtml/issues/30274
• Smooth drop animation ampproject/amphtml/pull/30220

What's next

Interactive Components (quizzes/polls)

• Official documentation amphtml/issues/29468

360

• 360 video support ampproject/amphtml#29509

cc @ampproject/wg-stories

What was accomplished

Web Player

• Started work on UI Controls API https://github.com/ampproject/amphtml/issues/30031
• Scoping for player developer preview milestone

Interactive Components (quizzes/polls)

• Create animations for the results component ampproject/amphtml#29818
• Work on supporting multiple layouts for interactive components ampproject/amphtml#29925
• Explore other interactive components (range sliders, image quizzes & polls) ampproject/amphtml#29838

Animations

• Example story for new animation presets https://github.com/ampproject/amphtml/issues/30028

Accessibility

• Talkback: provide a way to navigate to the next story page ampproject/amphtml#29974

cc @ampproject/wg-stories

What's next

(Pending update)

cc @ampproject/wg-stories

What was accomplished

Web Player

• Publish programmatic API documentation ampproject/amphtml#29730
• AMP version of the Web Player ampproject/amphtml#29312
• Dispatch events on Story page navigation with page ID and Story progress ampproject/amphtml#29878

Interactive Components (quizzes/polls)

• Add new designs of results components ampproject/amphtml#29793
• Work on supporting multiple layouts for interactive components ampproject/amphtml#29925

360

• Prompt for iOS gyroscope permissions ampproject/amphtml#29590
• Gyroscope support ampproject/amphtml#29513
• Scale down image if too large for device GPU ampproject/amphtml#29738

Others

• Allow meta tags for Story generators to mark the story ampproject/amphtml#29991
• Messaging queue for incoming viewer communication ampproject/amphtml#29906
• Fix vertical gaps around amp-twitter within a Story ampproject/amphtml#29194

What's next

Web Player

• Capability to support "Swipe down to close" gestures ampproject/amphtml#28397
• show() API method improvements ampproject/amphtml#28987
• Fix for Edge browser ampproject/amphtml#27358

Interactive Components (quizzes/polls)

• Create animations for the results component ampproject/amphtml#29818
• Work on supporting multiple layouts for interactive components ampproject/amphtml#29925

Videos

• Downgrade bitrate on slow initial load ampproject/amphtml#29501
• Optimize media play/pause operations on page navigation ampproject/amphtml#29508

360

• Feature discovery UI ampproject/amphtml#29591

Accessibility

• Talkback: provide a way to navigate to the next story page ampproject/amphtml#29974
• Make education screens buttons focusable for screen readers ampproject/amphtml#30021

cc @ampproject/wg-stories

What was accomplished

• UI Animations for quizzes/polls highlight on page navigation
• Update polls/quizzes API endpoints (base64 encode URL, use component ID over page ID, use :vote method on POST request)
• Category results page for multi-polls story
• Fixing audio state propagation from story to story in a Player
• Ability to navigate back using TalkBack

What's next

• Percentage results page for multi-quizzes story
• Moving interactive components to their own extension
• Interactive components validation
• Prompt gyroscope data access on iOS for amp-story-360
• Player entry point: singleton preview
• Player entry point: circular wrapping
• Player API: proxy to getDocumentState/setDocumentState API
• Restart active page advancement when swiping back to a Story (#28927)
• Fix joint latency video metrics (#29105)

What was accomplished

Web Player

• Make initial load 52% faster ampproject/amphtml#29703
• Add stories to the player programmatically (player.add(storiesArray)) ampproject/amphtml#29280
• Expose page attachment state ampproject/amphtml#29219
• Visual tests ampproject/amphtml#29372

Interactive Components (quizzes/polls)

• Validation rules ampproject/amphtml#29465
• UI animation to show interactive elements are tappable ampproject/amphtml#29466
• Move code to a new extension (~10% savings on amp-story.js) ampproject/amphtml#29464
• Implement percentage results page for quizzes ampproject/amphtml#29458
• Add transparent style to all components ampproject/amphtml#29791
• Improve tap targets to only block page navigation on tap when needed ampproject/amphtml#29792

Videos

• Fix joint latency that would not be tracked on the first page ampproject/amphtml#29105
• Send video performance metrics on last Story page ampproject/amphtml#28650

360

• Prompt for iOS gyroscope permissions in code review ampproject/amphtml#29590
• Gyroscope support in code review ampproject/amphtml#29513
• Scale down image if too large for device GPU in code review ampproject/amphtml#29738

Animations

• Refactoring all the presets default timing functions demo ampproject/amphtml#29684
• New preset: Scale fade ampproject/amphtml#29685

Others

• Talkback: provide a way to navigate to the previous story page ampproject/amphtml#28422
• New optional metadata attributes to represent the creator entity ampproject/amphtml#28992
• Swiping back to a story restarts its active page ampproject/amphtml#28927
• Option to opt-out from history localStorage ampproject/amphtml#29645

What's next

Web Player

• Capability to support "Swipe down to close" gestures ampproject/amphtml#28397
• show() API method improvements ampproject/amphtml#28987
• Publish programmatic API documentation ampproject/amphtml#29730
• Fix for Edge browser ampproject/amphtml#27358

Interactive Components (quizzes/polls)

• Early launch 🎉
• Add new designs of results components ampproject/amphtml#29793
• Create animations for the results component ampproject/amphtml#29818
• Prototype other types of interactive components ampproject/amphtml#29838

Videos

• Downgrade bitrate on slow initial load ampproject/amphtml#29501
• Optimize media play/pause operations on page navigation ampproject/amphtml#29508

360

• Feature discovery UI ampproject/amphtml#29591
• Public documentation ampproject/amphtml#29511
• Merge Prompt for iOS gyroscope permissions ampproject/amphtml#29590
• Merge Gyroscope support ampproject/amphtml#29513
• Merge Scale down image if too large for device GPU ampproject/amphtml#29738

Others

• Fix vertical gaps around amp-twitter within a Story ampproject/amphtml#29194
• Ensure services are not included in sub extensions bundles ampproject/amphtml#29282

cc @ampproject/wg-stories

What was accomplished

• Viewer
• Show(), go(), play/pause(), mute/unmute(), add() callbacks
• Exposed a navigation event
• Bug fixes
• Adding visual tests
• New github dashboard for tracking player-related tasks
• "Interactions" (formerly quizzes & polls)
• Results page implementation
• Demos and documentation of API
• Emoji burst animation
• Videos
• Two fixes for videos on first story page, and simplifying video playback code to reduce surface for bugs
• Custom adaptive bitrate implementation MVP
• Other
• 360 images launch with programmatic animations

What's next

• Viewer
• Preview mode for amp-story-player
• Starting implementation work on entry points
• Wrap to first story after finishing last one
• Merging amp-story-player AMP extension
• "Interactions" (formerly quizzes & polls
• Additional demos and documentation
• Emoji validation for emoji confetti
• Other
• 360 component to support video and gyroscope
• Animation preset enhancements

What was accomplished

• Started work on results-page components and multi-option polls
• Interactive poll animations (PR pending) https://github.com/ampproject/amphtml/pull/28931
• Fixit week: 25 bugs closed
• Accessibility fixes (https://github.com/ampproject/amphtml/pull/28860, https://github.com/ampproject/amphtml/pull/28780, https://github.com/ampproject/amphtml/issues/28408, https://github.com/ampproject/amphtml/issues/28294)
• complete docs regarding analytics in STAMP
• audio bug fixes
• increased tap target for swipe up
• tooltip dark-theme
• fix sandbox flag bug in player
• Fixed bugs related to video playback and media pool (on story replay)
• 360 videos and images implementation ongoing, with two projections
• Removed amp-story v0.1 (~2 years after deprecation 😅 )

What's next

• Planning 360 media component
• Figure out solutions to improve the audio UX
• Ongoing video performance work (hoping to get bitrate selection prototypes)
• implement show() callback in player
• expose swipe down to close handlers for players
• Starting to design/implement UI primitives / API methods for the story player
• Demos, documentation, and tooling for fixed aspect ratio grid layers

What was accomplished

• a11y bugs related to TalkBack
• Animations for amp-story-reaction
• Gyroscope experimentation
• Binary polls
• Launched API for programmatic control of the amp-story-player
• Fixed audio bugs
• Support remote attachments in Safari in the amp-story-player

What's next

• Continue launching APIs for the amp-story-player
• Continue work on binary poll
• Documentation pass on analytics

What was accomplished

• amp-story-animation launched
• Video performance bug fixes
• amp-story-reaction refactoring in preparation for new components (quizzes, polls) and finalizing API.
• Animation investigation for amp-story-reaction
• Refactoring of LocalizationService
• Ability to override story language via an attribute at the player level (wip).
• amp-story-player
• Load stories inside the player from the AMP cache of the publisher's choice. This is specified as an amp-cache attribute in the player tag. (e.g. amp-cache="cdn.ampproject.org")
• Progress on programmatic API hooks for publishers to use (onReady, loadStory, etc..)
• Scoping work for entry points to the player (upcoming interns project).

What's next

• Implementation of animations for amp-story-reaction.
• Launch API for programmatic control of the amp-story-player.
• Working through embedded components

What was accomplished

• Work to support <amp-animation> support within <amp-story>
• Prototype of polls in stories
• Work to support player
• Manual QA test cases to improve reliability
• Fix for bug where videos don't fall back to other sources if the first source failed to decode

What's next

• Work to fix race conditions that prevent video playback
• Expose JS APIs to programmatically control player
• Start work to productionize polls in stories

What was accomplished

Story a11y - Make CTAs not tabbable when not on active page #32840 - Improve tabbing on social-share and bookend #32859 - Rename i-amphtml-orig-tabindex #32867 - Pagination buttons alt text #32861 - Accessible close button in share menu and Twitter overlay #32863 - aria-label on amp-story-360 canvas #32871 - Empty img alt tags #32880 - Accessible close buttons #32925

amp-story-player - ♻️ Mini refactoring #32944

Story video - Do not downgrade a managed video that is already fully loaded #29498 - Manage bitrate on pool elements only (from amp video) #32618 - override aria-label with alt #32963

Story devtools - Add visual diff test for tab loading #31437

Others - amp-story: Images with missing or inadequate text descriptions #32493 - 🐛 Added layout fixed to page-attachment to fix CircleCI test #32732 - Story grid layer documentation - Singleton player experience UX design developments / gestures for closing - Desktop player experience UX design developments - Desktop blurred background technical planning - Google backend disclaimer documentation draft - Implementing CTA design updates - Demo story for responsive grid layer guidelines

What's next

• Building Desktop player experience / planning LE
• Google backend disclaimer documentation finalization
• Implementing CTA design updates
• Localization refactor planning