How to Create Vertical Scrolling Credits with CSS

Vertical credits are a long block of text moving upward through a fixed viewport. The main design decision is duration: viewers need enough time to read each line without rushing.

Basic pattern

Put the credits inside a container with overflow: hidden, then animate the inner block from below the viewport to above it. Center alignment often suits names and roles, while left alignment is easier for longer explanatory lines.

One pass or loop

Movie-style credits normally run once. A lobby display or information panel may loop. If looping, add enough spacing between the end and restart that the transition is understandable.

Reduced motion

If motion is reduced, show the credits as a normal static list inside the page. Do not freeze the list halfway off-screen.

Export options

Use the Vertical Scrolling Text Generator for HTML/CSS. If the credits must become a media asset, pass the same content to the Scrolling Text Video Maker.

More guides