How LINE Manga Achieves Native‑Like Page Transitions with a Page Stack

Introduction

LINE Manga provides a fluid comic‑reading experience inside the LINE app. To make page navigation feel as smooth as a native app, the team built a custom Page Stack mechanism that avoids full DOM replacement during navigation.

Web Page Issues

Typical SPA routers replace the entire DOM when navigating, which causes noticeable delay when returning to a long, complex home page, loses the previous scroll position, and forces lazy‑loaded images to reload. These problems break the illusion of a native experience.

Reference iOS Implementation

The solution draws inspiration from iOS UINavigationController , which manages view controllers with a navigation stack, using push and pop operations without destroying the underlying views.

Page Stack Implementation

By applying the same stack concept to web pages, LINE Manga eliminates DOM replacement during navigation, solving the latency, scroll‑position, and image‑reload issues.

HTML Structure

The page hierarchy places each view inside a

PageStack

container. Modals are also managed via a stack.

JavaScript Implementation (React & react‑router)

The implementation uses React components and a custom

withStack

higher‑order component to push and pop pages on the stack.

Usage Example

Developers can wrap their routes with the

PageStack

component and use

push

and

pop

methods to navigate without triggering full page reloads.

Result

After integrating the Page Stack, page transitions become extremely smooth, matching native app performance.

Scrolling also remains fluid without visual jumps.

Conclusion

To achieve a native‑like user experience, LINE Manga relies heavily on the Page Stack architecture, which resolves back‑button latency, scroll‑position restoration, and lazy‑load image flicker, delivering a seamless comic‑reading interface.