Were to put / place / install / locate transitions .png files in Shotcut folder?
@Melphyx, No need to put them in a specific folder.
- Unzip and place the files in any folder.
- On the timeline, drag one clip over another to create a transition.
- Select the transition (purple box), then click the properties tab.
- Navigate the drop-dpwn menu (where it says “dissolve”) to the bottom of the list (“custom”).
- Navigate to the folder in step 1 and click on one of the png files.
- Play the transition.
Ta- dah, your transition should now appear.
Thanks for replay. Very useful.
now i want download literally ALL custom traslations
Can i create my own transitions?
Yes you can. Wipe transition are the image file .png or .pgm files using any Image editor ( Gimp, Photoshop etc). Create 16:9 or 4:3 images. See the pattern of the transition wipe file to get the idea of new transition.
Dan is planning to implement more transitions into Shotcut this year. But it requires quite a bit of coding to be done, so there could be some delay before they are released.
In the meantime I have created a new framework called GL-Transitions to make use of the transition code shown on the gl-transitions.com website. A full explanation of how to use this framework is given in the GL-Transitions area on my website at www.elusien.co.uk/shotcut.
You can very easily preview transitions, tailor the parameters to fit your requirements and create a very simple Overlay HTML filter to apply to a shotcut transition between two clips.
Below is a short video showing the use of five of the transitions, including the Inverted Page Curl, where a faint outline of the first video is shown on the reverse of the page being turned and the Cube, which rotates and the transition is reflected on the dark “floor” on which the cube rests.
4 Likes
You can do exactly this with my new GL-Transitions framework. See the video in my post above .
The GL-Transitions are working very well. There is one little glitch. I couldn’t download the Shader.js file from the website. Using the one that @shotcut provided with the Swirl overlay.
These look AWESOME, @Elusien ! looking forward to trying them out tomorrow if I can find some time. Yes, the shader.js file is unavailable, as @sauron found out too. Bravo for this - very clever!
Sorry, my fault. Thanks for reporting it. I had it as ‘shaders.js’ in the download link when of course it should have been ‘shaderkit.js’. Now fixed.
A few Transitions made using Elusien’s Shotcut GL-Transition Overlay HTML Generator. The horizontal and vertical bow ties are done with mask filter presets.
Thanks to @Elusien.
2 Likes
That looks great, @sauron. 
I’m also experimenting with @elusien 's GL Transitions Generator today - it’s brilliant!
So, I made this demo featuring all 26 transitions which have a green arrow next to them (see his website) - in alphabetical order.
Like sauron said, grateful thanks to @elusien for making this available, and looking forward to seeing GL transitions being integrated fully into Shotcut later this year by @shotcut.
The transitions in the demo are:
Burn
CircleCrop
Color Phase
Crazy Parametric Fun
Crosswarp
Cube
Directional Warp
Doom Screen Transition
Doorway
Dreamy
Dreamy Zoom
Fade Color
Fade Grayscale
Flyeye
GridFlip
Hexagonalize
Inverted Page Curl
Kaleidoscope
Linear Blur
Morph
Mosaic
Pixelize
Rotate Scale Fade
Stereo Viewer
Swirl
Water Drop
4 Likes
Brilliant, I am so pleased that you and Sauron are making use of the transitions. It makes the hours of coding so worthwhile. I’m working on a Shotcut “Template” project now, so watch this space.
Thanks, @Elusien - all down to your coding brilliance - I am in awe as to how you did this!!
Also – I also just had a go at producing a short title using your Textflow - I amended the code a little to create just a Type 0 animation at a text height of 100 pixels with a light blue background. I applied it to a darker blue colour clip, and this was the result : Notice there is a blue border around the outside. Is this a problem or a bug?
Cheers, Jon
[EDIT] I found the problem - the table is set at 98vh and 98vw.
1 Like
Just thinking, @elusien - I think your GL Transition generator and Textflow framework are important and therefore should deserve a thread of their own instead of being at the bottom of a very long one!
So, if you wanted to begin a new thread I’d be happy to re-post my last post - and I’m sure @sauron would post his too! I think this is an important development that should be seen by lots of shotcut users…
Regards, Jon
Hi @elusien, I changed the code to 100vh and 100vw (see 2 posts above) - but the text came out like THIS:
Hmmm, strange… (to me at least…) Wonder why it comes out like that?
I had a border issue when I was doing my textflow. Changed this line in the code to fix it.
#screen {width: 100vw; height: 100vh; position: relative; border: solid 1px #000;}
Changed solid to 0px.
I found a tiny flaw in the code for the GL-transition generator.
When I made my demo I noticed that there is a slight shift in the image position where the transition overlay transition begins.
I tried to use the S&P filter to offset the image and correct the shift but it didn’t work. I looked at the code that @shotcut created for the swirl effect and found that his code had an additional set of parameters for canvas.
I removed the highlighted line in your code and replaced it with a line from Dan’s code . Now there is no shift in the image.
Here’s 9 html files that I.modified.
GL-Transitions.zip (4.3 KB)
Made a new demo to compare with the one I made and also the one you and JonRay made. The difference is very visible in the Cube transition.
Can you post the html (including the CSS) you are using and I’ll have a look.
‘ ’ is a 'non-breaking space. I have to replace each of the normal spaces in the original text by one of these. It should appear as a normal space on the screen though, as it did on your original video (with the blue background showing…
Thanks for the info. I shall change the code on the website.
I don’t understand why as 100vw means 100% of the viewport, which should be the same as 100% for html, body and hence canvas.