Pagination indicator for "tappable" web stories?

Hi everyone,

I'm looking to understand if persistent symbols can be used to act as a pagination indicator.

Here is an example of image slider pagination in the Bootstrap framework:
(bottom centre of the screenshot)
Screenshot at Dec 01 10-32-56

And here's a live example using the Google Web Stories framework

Pagination is useful as it lets people know how long or short a story is. I'm looking to create a "tappable web story" where you tap right to move forward one screen, and tap left to go back.

Navigating back and forth can be handled inside Hype, but how can I set up the pagination element so it shows:

  • 100% opacity on the "active" scene bullet
  • 50% opacity on all the "inactive" scenes bullets
  • and follows this pattern as the user navigates through the story

Assume that all scenes in a project will be viewed in a linear fashion, so users would navigate from Scene 1 - Scene 10, or back from Scene 10 to Scene 1.


This template is a start…

It does the navigating. Obviously, it's the navigation template. :grinning_face_with_smiling_eyes:

For the little buttons at the bottom, I'd probably just use loops in JavaScript. One loop could be used to create the little page indicators dynamically, Another loop is used each time a scene is changed. All the indicators would be turned off first... 50% opacity …then one indicator would be set to 100% based on the scene name.

2 Likes (38.9 KB)


Thanks so much for this example @h_classen ! Just what I was looking for.

It's very easy to understand, and by playing around with the symbol in the editor, I think I can use it for my purpose. Since I am focusing on short stories (15 scenes max), I can set up the pagination manually.

1 Like

This is great! I actually have the Hype book you created, and keep telling myself I need to read the JS chapter carefully.

1 Like