How Draftly's Multi-Video Continuation Feature Works
A single, looping video background is a common sight. It adds motion, but it doesn't tell a story. It's a visual that repeats, not one that progresses. This is a missed opportunity for brands that want to guide users through a narrative. Draftly's Multi-Video Continuation feature was built to solve this, transforming a simple scroll into a cinematic journey by seamlessly stitching multiple video clips into one continuous, scroll-driven experience.
This isn't just about adding more video; it's about creating a narrative flow that unfolds as the user explores your page. Instead of a static loop, you can show a product being assembled, a project evolving from sketch to reality, or a virtual tour that moves from one room to the next. This guide breaks down how the feature works, how to set it up, and best practices for creating an unforgettable visual story.
What is Multi-Video Continuation (and Why Does it Matter)?
Multi-Video Continuation is a powerful Draftly feature that links two or more separate video files, playing them back-to-back in a single, fluid sequence as a user scrolls. The playback is directly tied to the scroll position, giving the user full control over the story's pace. It’s the technology that powers a new wave of immersive, narrative-driven websites.
!how draftlys multivideo continuation feature works, product
The difference is profound. A standard video background says, "Here's a look at our brand." A multi-video continuation says, "Let me take you on a journey."
This shift from a static visual to a progressive story has a measurable impact on user engagement. Data shows that websites with strong visual narratives can increase user session duration by up to 80%. Why? Because the user is motivated to keep scrolling to see what happens next. This curiosity-driven exploration leads to a deeper connection with the content, boosting brand recall by an estimated 55% compared to sites with static imagery.
How Draftly's Multi-Video Continuation Feature Works Under the Hood
Creating a seamless multi-video experience requires more than just playing files in a list. Draftly's engine handles the complex technical work in the background so you can focus on the creative narrative.
Intelligent Sequencing and Pre-loading
When you add multiple videos to a section, Draftly's AI doesn't try to load them all at once. It intelligently pre-loads the next video in the sequence just before it's needed. This "just-in-time" loading means the initial page load remains incredibly fast. As the user scrolls toward the end of the first video, the second one is already buffered and ready to play, ensuring a transition with zero lag or stutter. This approach is critical for maintaining a high-performance site and a positive impact on your 3D website loading speed.Scroll-Mapped Playback
Unlike a simple playlist, the video playback isn't on a timer. It's mapped directly to the user's scrollbar. Scrolling down moves the video forward; scrolling up rewinds it. This gives the user a tactile sense of control and turns passive viewing into active interaction. Our engine calculates the precise start and end points for each video transition based on the section's height and the videos' durations, creating a perfectly synchronised experience.Step-by-Step: Setting Up Multi-Video Continuation in Draftly
Implementing this feature is straightforward. You can create a compelling visual narrative in just a few steps. For a deep dive into the initial setup, our Draftly Motion Pass Guide is an excellent starting point.
- Choose a Compatible Section
- Upload Your First Video Clip
- Enable the 'Continuation' Feature
- Add Subsequent Videos in Order
- Preview Across Devices
Use Cases: When to Use Multi-Video Continuation
This feature is versatile and can be adapted for almost any industry to create a high-impact experience.
Product Assembly or Process
* Example: A luxury watchmaker shows a close-up of a gear being placed (Video 1), followed by the watch face being attached (Video 2), and finally the finished watch on a wrist (Video 3). The user effectively assembles the watch by scrolling.Brand Storytelling
* Example: A sustainable fashion brand shows a shot of raw cotton in a field (Video 1), then the weaving process on a loom (Video 2), and finally a model wearing the finished garment (Video 3). This tells a powerful farm-to-closet story.Virtual Property Tours
* Example: An architecture firm creates a walkthrough. The scroll begins with an exterior shot of the building (Video 1), transitions to the lobby (Video 2), moves into the main office space (Video 3), and ends with the view from the rooftop terrace (Video 4).Digital Product Demos
* Example: A SaaS company demonstrates its software. The first video shows the clean dashboard (Video 1), the second shows a user clicking to create a new project (Video 2), and the third shows the final report being generated (Video 3). It’s a mini-tutorial driven by scroll.Best Practices for a Flawless Experience
To make your multi-video sequence truly cinematic, follow these expert recommendations.
* Match Start and End Frames: For a truly seamless transition, the last frame of your first video should be identical to the first frame of your second video. This makes the cut completely invisible to the user.
* Maintain Consistent Visuals: Ensure that lighting, color grading, and camera angles are consistent across all video clips. A jarring change in style can break the immersive feeling.
* Optimise Your Video Files: Keep each video clip short (under 15 seconds is ideal). Compress your files using modern formats like WebM or HEVC (H.265). Always upload videos without audio, as browsers often block autoplaying sound and it increases file size.
* Design a Clear Narrative Arc: Plan your sequence like a story with a beginning, middle, and end. Each video should logically follow the last, pushing the narrative forward and rewarding the user for scrolling.
By chaining multiple videos together, you move beyond simple web design and into the realm of digital storytelling. It’s a feature that empowers you to create a truly memorable and engaging experience that captures attention and communicates your message with cinematic flair.
Ready to tell your brand's story in motion? Generate your 3D website with Draftly today.
