Nice, @hudson, thanks!
@MusicalBox - what a cool idea to use noise for the transition png.
Wow, these are pretty good!
2 Likes
May I also suggest the following website as a source of semi-random ānoiseā images. Near the bottom of the page is a link to download the high-resolution images, which can then be selectively cropped.
2 Likes
You can make an image with the title you want and a freed up background (png)
Then you can use the Size and Rotation filter to move the picture around.
There are several filters like fade, glitch, rotate and so on that, you can use in combination with keyframes to fancy. PM on Twitter if you want some more info. https://twitter.com/CarloolucaS
2 Likes
Iāve been messing about with an HTML/javascript animation package recently, for another project, and have managed to produce some reasonable animations of the Shotcut Logo. It will work with any PNG or JPEG image. Several of these would fit the bill. The last of them is an explosion type effect.
Of course now that WebVfx is no longer supported youād have to record the animation (e.g. with OBS Studio) using a āgreen screenā background colour that youād Chroma Key to transparent later in Shotcut. Another possibility would be to use an older version of Shotcut that did support WebVfx, modify the javascript to enable it to use the Text:HTML filter and export the video as a .mov file with transparency for use in your other projects.
5 Likes
The html file is here: gsap1.txt (12.7 KB) . Just rename it from ā.txtā to ā.htmlā, run it in a browser and it should work. The first half of the javascript is to allow you to easily position the image on the page using points of the compass. The second part is the code that does the animations.
It uses the free GSAP animation package, which is relatively simple to use, is highly optimised (e.g. it tries to use the GPU) and makes it easy to try out animation experiments. Just google āGSAP animationā for further examples.
Please note, it is NOT tailored to use Shotcutās WebVfx. If there is any interest I could try to to integrate it so it could be used in old versions of Shotcut that have the Text:HTML filter. So to get the animation into Shotcut you will have to screen-record the browser running the animation or use it as a browser source in OBSStudio.
Play around with it and let me know what you think. If you need any further explanations donāt hesitate to ask.
1 Like
Hi @elusien, Iām just getting a white screen in Chrome. I realised that I hadnāt got the image Shotcut_Logo.png so I tried with a similar JPG image I have which I called āShotcut_LOGO.jpgā. I put it in the same folder as gsap1.html and amended the code to
<img id="image" src="Shotcut_LOGO.jpg">
Still just a white screen. Iām probably missing something obvious ā¦
Did you make any other modifications to the gsap1.html file?
Run it in the Chrome browser and hit function key āF12ā, then click on āconsoleā (green in the picture) and hopefully the reason will be apparent in the console log area (blue).
If you made changes and there is nothing in the console.log, just send me the HTML and Iāll have a look for you.
No other changes. Iāll try F12.
Got it - simple really - I got this message:
telling me I had to change line 66 to:
.tile {
position : absolute;
background : url(Shotcut_LOGO.jpg) no-repeat;
}
ā¦ and itās working! Thank you. Iāll try to play around with it when I get a chance.
My fault. I have fixed the code so the image name is a parameter (Line 29). Go back to the earlier post and downlowd the .TXT file again and rename it to .HTML. Let me know if you have any other queries.
1 Like
This is cool - I just made this very quick demo. Lovely and very clever!!
(Music - Tritsch Trasch Polka by Johann Strauss)!
1 Like
This topic was automatically closed after 90 days. New replies are no longer allowed.