The AMP Project Roadmap

What was accomplished

Story interactive

• ✨ Basic Layout for Image Quizzes and Image Polls #35043
• ✨ [Story interactive] Basic slider component #35041

Story a11y

• 🐛 Reduced motion should apply the animation's last frame to the elements #34466

Story desktop one panel

• amp-story-desktop-one-panel blurred background #34764
• amp-story-desktop-one-panel confirm display of amp-story-auto-ads. #34785
• ✨ amp-story-desktop-one-panel Background color #34939
• amp-story-desktop-one-panel blurred background, get largest page image #34959
• amp-story-desktop-one-panel blurred background, method to create and attach canvas #34962
• amp-story-desktop-one-panel blurred background, update canvas method #34967

Others

• 🏗 Allow story examples to be excluded from amp validation #35026
• Video caching: rewrite /i/ URLs to /mbv/. #35072
• Move building outlink attachment to layoutcallback. #34924

What's next

• Destkop panels player #34765
• Launch desktop one panel and blur
• Image quiz interactive component styling and backend integration
• slider interactive component styling and backend integration

What was accomplished

Story interactive

• ✨ Make disclaimer work RTL #35164
• 🖍 Post-Selection Animations for Image Quizzes and Image Polls #35205
• 🐛 Deattach disclaimer from interactive component #35253
• ✨ Interactivity for Image Quizzes and Image Polls #35125
• Make slider component interactable #35167

amp-story-page-attachment

• Link text placed at extreme left or right does not behave as clickable inside of page #34949
• 🐛 Move overlay logic from story to page. #35036
• Prevent double navigation from page-outlink. #35187

Story performance

• 🚀 Experiment to load first page assets before loading other pages to improve LCP #34846
• 🚀 Launch first page load experiment to 10% #35192
• Use remote video cache over AMP Cache video cache. #35194

Story animation

• 🐛 Fix error thrown when user pauses before animation runs. #35161

One panel layout

• ✨ Ensure img is loaded, no animation on landing #35132
• ✨ Pre draw image to fade in #35175

What's next

• Launch experiments to improve LCP on stories
• Deploy the 1 panel desktop layout
• Work on interactive sliders and image quizzes / polls

Story player

• ✅ Fix animation unit test flakiness #34382

Amp story

• 🐛 ✅ Get reference to win #34299

Auto advance

• Minimum duration for auto-advance-after. #34592
• Time based auto advancement broken on beta. #34597

Performance

• Track flexible-bitrate experiment through CSI pipeline. #34548
• Launch flexible-bitrate experiment to 10%. #34549
• Don't block Story render on a fallback media load. #34583
• 🚮 Remove bookend extended code #34343

• 🚮 Disabled bookend and related tests #34354

• Welcome to our interns Brandon and Sydney!

Up next

• One panel desktop
• Launch amp-story-page-attachment-ui-v2 at 100%
• New interactive components

What was accomplished

Amp story player

• Add more unit/integration tests #31276
• ✨ Add parameter to configure amp-story-player animation #34204

Desktop one panel

• ✨ Scaffold desktop one panel experiment #34755
• ✨ Experiment on method #34738
• Don't trigger viewport warnings when amp-story-desktop-one-panelis active #34760
• amp-story-desktop-one-panel Responsive story panel #34761
• amp-story-desktop-one-panel pagination arrows #34762
• amp-story-desktop-one-panel Page tap targets #34815
• amp-story-desktop-one-panel System layer positioning #34823
• amp-story-desktop-one-panel Revise breakpoint to mobile view #34829
• amp-story-desktop-one-panel resolve non-active page position on load #34830
• amp-story-desktop-one-panel Confirm calculation of --story-page- CSS variables #34833
• amp-story-desktop-one-panel Update demo with usecases #34867
• ✅ amp-story-desktop-one-panel Rename visual test and new test for small square screen #34906

Page attachments

• Update visual tests for new UI #33184
• Launch amp-story-page-attachment-ui-v2 at 100% #34714
• page-attachment and page-outlink docs (in reivew) #34883

Story interactive

• 📖 Remove link in interactives.html #34756

Story video

• Video cache for amp-video[src] #34570
• Lazy load amp-cache-url and make it optional. #34588

What's next

• Page experience optimization
• page-outlink and page-attachment launch
• Video cache optimization
• Shopping experience ideation
• Load first page only experiment

What was accomplished

Page attachments - open-attachment animation does not cover top of screen on iOS #34470

Story video - ✅ Add e2e tests for Bitrate Manager #33660

Story bookend - 🚮 Remove bookend extended code #34343 - 🚮 Disabled bookend and related tests #34354

Story devtools - 🐛 Toggle devtools on mjs build #34372

Story player - Launched https://go.amp.dev/web-story-player - ✅ Fix animation unit test flakiness #34382

Amp story - 🐛 ✅ Get reference to win #34299

Others - ✨ Add parameter to configure amp-story-player animation #34204

What's next

• Launch adaptive bitrate experiment
• Remove 3 panels desktop experience
• Finish CTA redesign
• Document amp-story-bookend removal and new amp-story-social-share component

What's next

• Amp story player animation configuration
• Testing for new page attachment UI
• Experiment cleanup for new page attachment UI
• Video flexible bitrate experiment
• Desktop refactor I2I

What was accomplished

Page attachments - Theme attribute #32716 - Theme attribute for pre-tap #32767 - Remove background linear gradient #33767 - Add closable affordance for screen readers #33820 - Background contrast protection for text #33913 - 🐛 Use linker on swipe up #33911 - 🐛 Navigate with click on swipeup remote #33656

Story video - Looping videos could get downgraded due to nontrivialWait #33169 - ✨ Connect CacheUrl service to amp-video and load sources #33466 - ✨ Google cache validation #33611 - 🏗 Add testing tools to video story for e2e and manual testing #33857

Story a11y - ♿ Make amp-twitter not tabbable if not on current page #33919

Story autoanalytics - 🐛 Use pageview to trigger story_page_count #33797

What's next

• Finish page attachments redesign
• Finish video cache
• Start rolling experiments on flexible bitrate
• Improve experiment rollouts

What was accomplished

Story responsiveness - Set overflow to visible on preset layers #32678

Deprecating sidebar and bookend - 🚮 Added warning to deprecate amp-sidebar in stories #33328 - ✨ Created amp-story-social-share #33077

Story video - Don't call load() if sortSources was a noop #32731

Story player - Publisher identity #33353 - Add publisher identity in the system layer #33355

Page attachments - Open to max of 80% of screen #32760 - .5 overlay behind attachment #32761

Panning media - Desktop panels, transition only active page #32215 - handle zoom value being 0 #33071 - 📖 Draft docs for developer preview #33386

Others - Write documentation for amp-story-auto-analytics #33407 - ✨ Changing Outlink Page Attachment Button UI #33667 - 📖🐛 Fix typo in 360 docs #33380

What's next

• Release Google Video Cache opt-in and rollout flexible-bitrate algorithm under experiment
• Develop outlink v2 with themes and color customization
• Launch story attribution in players

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

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