Cinematic text-scroll effect

Introduction

This intriguing storytelling effect was requested by a client, a group of research journalists. They not only uncover stories but also excel at narrating them. They possess the unique ability to translate their findings to paper and are now pushing the boundaries by bringing this to digital platforms.

I am grateful to be part of this journey, and I relish the opportunity to brainstorm with them and build experiments within Webflow.

It's perfect if you have some drone footage you want to integrate in your website.

Getting Started

Clone the project here: cinema text

‍

How It Works

A Lottie Video

This can be a regular video you pick from the internet, such as from Pexels. The video is converted to a Lottie file using the Video-to-Lottie Converter. A Lottie file is essentially the same video, cut into images, with each image getting a keyframe, making it programmable. We can now, for example, link the scroll event to the keyframes.

Some Text with Space in Between

This is standard text, inline with the website, to anchor scrolling. This means the text will still scroll at a normal speed.

Setup

The Lottie file will be sticky and have an interaction that links the scroll percentage of this container to the Lottie play percentage.

‍