amp-htmlamp-storyamp-stories

Loop through AMP web stories


Is there any way to loop through multiple amp web stories (or visual stories), so that a new story loads when a user scrolls to the end?

This is to reproduce app-like navigation (like facebook or youtube stories) when users scrolls through multiple stories without getting back to main page.

Something like amp-next-page component, which does not seem to work inside amp-story.


Solution

  • There is a way to loop through multiple stories by using the Web Story Player.

    If you're using it in AMP valid page, you can embed as many stories as you would like inside the <amp-story-player> component. The player will show the next story to the viewer after finishing each one.

    If you're embedding stories into a non-AMP page, you can programmatically fetch more stories as the user progresses, or circularly wrap a fixed number of stories to repeat in a loop.