Make an image dissolve

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.

NASA - The Tycho Catalog Skymap - Version 2.0

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

@Elusien - That’s really great. Is the HTML handy for me to try it out? :grin:

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:
console error

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.