Coin-Flip Image Shotcut Transition (+ an HTML/CSS/Javascript file - easily tailored)

See the next post for how to do this transition wholly in Shotcut.

I’ve put together an HTML file that accepts various parameters and transitions two images as if shrinking the image to a small circle flipping it and then expanding the circle. Play around with them and see what you can come up with. You need to provide it with two or more images.

I have an example below and the HTML file is also below, just remove the ‘.txt’ suffix and run it in a browser and use screen-recording software, like Sharex, to record it.

Or, run it as a “Browser Source” in OBS Studio, recording the animation and then open this clip in Shotcut.

It should be possible to do this wholly in Shotcut using various filters. Would anyone care to try?

Shrink_coin_flip_transition.html.txt (9.9 KB)

3 Likes

To answer my own question: “YES it can be done with a simple transition and a Mask:Simple-Shape filter”.

Here is a ZIP file with the images and the MLT file. The first and last clips are 6 secs long, the one in the middle is 9 secs long, the transition overlaps are 3 seconds long and the transition is a “Cut at 50%” one.

Shrink_coin_flip_transition.zip (4.0 MB)

Shrink_coin_flip_transition

Here is a video of Shotcut playing the timeline.

2 Likes

Woo, a double-present this morning - HTML and MLT files. Thanks @elusien. :+1: I’ll be analysing both files…

@Elusien
Je l’ai fait d’une manière un peu différente avec 2 filtres
Crop: circle pour le cercle
Corner pin pour le retournement (Méthode que @MusicalBox nous avait expliquée)

I did it in a slightly different way with 2 filters
Crop: circle for the circle
Corner pin for the flip (Method that @MusicalBox had explained to us)

Voici le fichier .mlt (j’ai modifié la piste V3 et rendu invisible la V2)
Here is the .mlt file (I modified the V3 track and made the V2 invisible)

Shrink_coin_flip_transition.mlt (21.1 KB)

2 Likes

Nice!! Well done @namna