Yesterday I had the idea of creating a HTML file to produce what I’ve called a “Slide and Rotate” transition - a bit like a letterbox transition but with added rotation. As you can see from my short demo, the transition features white angled boxes sliding in from each side, then rotating, before shooting off to reveal the next shot. I’ve created 3 HTML files, each making the white boxes move around at different angles.
The movement of the white boxes makes use of @elusien’s Webvfx framework js file which you can download from his site - Google “Elusien Shotcut”, select “WebVfx” and you’ll see it.
I’ve zipped the files to share or for anyone to have a play with them. (I’ve included Elusien’s WbVfx file in the .zip file; Elusien please let me know if this is OK or if you’d prefer for users to download it from your site instead)…
NB I’ve included two folders. One set of HTML files have PURPLE backgrounds so you can preview them in your browser (just double-click the file and it should open in your browser), the other set have transparent backgrounds for importing into the Overlay HTML filter in Shotcut.
Make sure the HTML file is in the same folder as the WebVfx.js file.
Create a transition in the timeline by dragging one clip over another.
Make it 4 seconds long.
Select the transition, go to Properties and change the transition from “Dissolve” to “Cut”.
Apply an Overlay HTML filter to the transition.
Select “Use WebVfx” and confirm.
Open one of the HTML files by pointing to it (from the TRANSPARENT folder).
That’s it. NB Playback may not give an accurate result.
Repeat for further transitions if desired.
Export to see the rendered effect.
NB you can change the colour of the sliding boxes from white by editing the HTML file.