SoK/2025/StatusReport/Swastik Patel
Add animated transition preview support in Kdenlive
Project Abstract
The goal of this project is to make Kdenlive's transition system more user-friendly and intuitive by adding animated previews. Currently, when users want to add a transition between clips, they have to rely on static icons or try the transition to see how it looks. This can be time-consuming and frustrating, especially when working with complex transitions.
The solution adds live animated previews directly in the transitions panel. When users browse through available transitions, they'll see a small animated preview showing exactly how each transition works. This means users can quickly understand how a transition will look in their project without having to apply it first. The previews are automatically generated and cached, so they're always available when needed.
Deliverables
- Live animated preview in the transition panel
- Python script for generating transition preview GIFs
- Code documentation and comments
Mentors
- Jean-Baptiste Mardelle ([email protected]) or contact through https://matrix.to/#/#kdenlive-dev:kde.org
Weekly Progress
Week 1 - 2: Environment Setup and Initial Structure
- Set up Kdenlive development environment
- Studied existing codebase structure
- Analyzed AssetListWidget and TransitionListWidget implementations
- Created initial project structure and files
- Implemented basic view switching mechanism in AssetListWidget
Week 3-4: Basic UI Implementation
- Implemented QListView integration alongside QTreeView
- Created basic TransitionIconDelegate class
- Added view mode toggle button to toolbar
- Implemented basic preview placeholder system
- Set up initial preview directory structure
Week 5-6: Preview Generation System
- Developed Python script for MLT-based preview generation
- Created standardized preview clips (red and blue colored clips)
- Implemented batch processing for transitions
- Added preview generation button to toolbar
- Created the Merge Request[1] containing all the changes.
Week 7-8: Preview Display and Integration
- Implemented animated GIF preview rendering
- Added proper scaling and centering of previews
- Implemented preview loading and unloading system
- Added debug logging for preview operations
- Integrated preview system with existing transition model
- End result looked something like this :
Week 9-10: Polish and Documentation
- Added error handling for preview generation
- Implemented fallback static previews
- Polishing the final code