Brilliant, thanks @elusien. Will try to do some more testing.
Brilliant, thanks, @samth. Very useful info, info I would not have been able to access without much research. Great, can’t wait to play…
I used your html.
disco cube inline style EDITED 02 with INLINE style separated WORKS IN CHROME.zip (3.3 KB)
Opened it in Chrome. Screen captured about 10 seconds. Saved to gif.
Opened a transparent clip made a blank HTML using the blank template. Inserted the gif. Positioned it in the html editor. Put it on the timeline. Added RS filter set to 180%. Added the audio. Trimmed it all to 35 seconds. Saved.
Created a new project. Opened the previously savedd project as mlt clip. Put the clip on V3. Added ADV filter and 4 ALV filters. Put an Image on V2. Chroma key did not work well so I set V3 blend mode to add. Exported.
I prefer using gifs. They keep looping so the duration can be changed by trimming the clip in or out. Also, I prefer using the add mlt xml as clip function. If any changes are made to the original project it is reflected in the project where the mlt clip is used. They are kind of linked.
Here’s another one using the same gif with the vertigo filter. Unfortunately the vertigo filter doesn’t play well with the ADV or ALV filters. And it doesn’t work when overlaid on another track.
Wow,! I certainly ended up with vertigo watching that one.
1 Like
Here it is:
It animates the “clip” property of a “box-shadow”. The ZIP file is below:
Chasing_Borders.zip (78.9 KB)
Yet another example of CSS animation using the webpage utility - this time of a beating heart:
Using only the disco cube by @jonray and placing it in a html page and some built-in SC filters,
we can go from this (still frame of the original living in a box video)
(full video here https://www.youtube.com/watch?v=mHzfhU8t5i8 )
To this:
5 Likes
@Paul2 Can you please upload your video to YouTube so I can add it to my Made with Shotcut playlist on my channel? Also, please add a link to this thread in the YouTube description.
Wow, reminds me of Doctor WHO intros… fabulous!
Nice. I’ve heard about the “clip” property. Will analyse the HTML. Thanks!
WOW, @paul2, that’s quite an amazing use of filters!! Did you use the dance visualisation filter? Great work, hugely creative! 
@elusien, I need your help again 
I designed this “Frightnite” animation with HTML, using flickering text keyframes adapted by me from HTML code obtained from http://animista.net ).
My HTML file works great in Chrome (here’s a screen capture of it rendered in Chrome):
…but on conversion with your generator, it won’t work in SC.
It seems to put in tons of random decimal places, eg from this:
@keyframes flicker
{0% {opacity:0;}
1.0% {opacity:0; }
1.2% {opacity:1; }
1.3% {opacity:0; }
3.0% {opacity:0;}
3.4% {opacity:1;}
3.8% {opacity:0;}
6% {opacity:0;}
6.1% {opacity:0.6;}
7.5% {opacity:1;}
7.6% {opacity:0;}
7.8% {opacity:0;}
8% {opacity:0.2;}
8.4% {opacity:0.6;}
8.8% {opacity:0;}
8.4% {opacity:1;}
8.8% {opacity:0;}
10% {opacity:0;}
10.1% {opacity:1;}
10.2% {opacity:0;}
etc… to this:
window.elusien_keyframes = {
"flicker" : [
{offset:0, "opacity": 0,},
{offset:0.01, "opacity": 0,},
{offset:0.012, "opacity": 1,},
{offset:0.013000000000000001, "opacity": 0,},
{offset:0.03, "opacity": 0,},
{offset:0.034, "opacity": 1,},
{offset:0.038, "opacity": 0,},
{offset:0.06, "opacity": 0,},
{offset:0.061, "opacity": 0.6,},
{offset:0.075, "opacity": 1,},
{offset:0.076, "opacity": 0,},
{offset:0.078, "opacity": 0,},
{offset:0.08, "opacity": 0.2,},
{offset:0.084, "opacity": 0.6,},
{offset:0.08800000000000001, "opacity": 0,},
{offset:0.084, "opacity": 1,},
{offset:0.08800000000000001, "opacity": 0,},
{offset:0.1, "opacity": 0,},
{offset:0.10099999999999999, "opacity": 1,},
… and it won’t work in SC. I wondered if you could look at this when you get a moment?
Here’s the converted HTML which works in Chrome when the four x’s (XXXX) are deleted from the animation line.
1 Like
Thanks @jonray
Busy uploading the video to Youtube as per @shotcut 's request.
In the meantime, will keep you all guessing for a while longer as to which filters I used .
Will wait with bated breath …
@elusien, Ah, it’s OK, got it working - my bad - DOHH, some of the keyframe percentages were not increasing values. I changed them to be incremental, then it still wouldn’t work in SC then I realised I had “script src=”./WebVfx.js"></script" still att he bottom of the HTML. Deleted that - and it now works.
Please ignore my above post!!
However I notice the text shadow isn’t quite as strong after exporting from SC as when rendered in
Chrome …
Here’s my amended code:
Flickering text 03 edited (works in Chrome and SC).zip (2.1 KB)
PS your generator still adds lots of decimal places to the percentage values. Is this normal?
Rutt-Etra-Izer.
Audio waveform visualization.
Audio dance visualization.??
Thanks. NICE work!! 
Jon,
Don’t worry about the extra decimal places. Certain floating-point numbers cannot be expressed exactly so when for example I convert (as I have to) the string 8.8% to a decimal it comes out as 0.08800000000000001. This is normal.
Your problem is described in the javascript console (Function key F12), which states:
elusien_cssanims2js.js:169 Uncaught TypeError: Failed to execute 'animate' on 'Element':
Offsets must be montonically non-decreasing.
at initiate_animation (elusien_cssanims2js.js:169)
at new Filter (elusien_cssanims2js.js:259)
at elusien_cssanims2js.js:319
You have the following sequence:
{offset:0.08, "opacity": 0.2,},
{offset:0.084, "opacity": 0.6,},
{offset:0.08800000000000001, "opacity": 0,},
{offset:0.084, "opacity": 1,}, // <--- Delete this one
{offset:0.08800000000000001, "opacity": 0,}, // <--- Delete this one
{offset:0.1, "opacity": 0,},
{offset:0.10099999999999999, "opacity": 1,},
{offset:0.102, "opacity": 0,},
{offset:0.138, "opacity": 0,}, // <--- Delete this one
{offset:0.13, "opacity": 0.2,},
The ones marked (0.084, 0.088 and 0.138) are either duplicates or out of order, so delete them. I did that and the animation works perfectly.
Thanks @elusien!! Yes, all sorted now, sorry for not noticing this error! Also thanks for the information on decimal places. For humans, processing a number like 0.08800000000000001 is difficult, but I guess for a computer it’s no big deal …
YES
YES
NO
Really like your flickering text, gave me an idea…hope you don’t mind.
(Don’t forget to turn up the volume).
3 Likes