This subject fascinates me ! I’m glad you mentioned all this - please don’t hold back on any other things!! No, it’s just lack of time that is the problem - especially when you just HAVE to see whether it’s possible to get a flashing disco ball animation to work by screen capturing it as an mp4, chroma keying out the black, superimposing it on a disco-syle background - and adding a touch of BeeGees!!
@sauron, this is what I got using a mp4 screen capture. Still intrigued as to how you got your gif…:
2 Likes
Just updated the webpage to stop compressing the spaces out of the keyframes.
Also modified it:
-
to ignore “-webkit-” properties in the keyframes, since these are not allowed
-
and to allow a hyphen in the keyframe name.
-
allow the user to have the jQuery and elusien_cssanims2js javascript libraries either in the current folder/directory or the previous one. The code will discover where.
1 Like
So I will gladly provide more pointers. If you use Figma, I guess the following parts do not concern you. In Inkscape the SVG should be first saved as an optimised svg with the standard settings and to get rid of most of the other overhead as a plain svg as well. Afterwards one should use SVGOMG (SVGOMG - SVGO's Missing GUI) to optimise the file for browser usage.
For the animation you need the path length of each letter but instead of figuring that out, I recommend Vivus because it does that automatically. Also it adds to the SVG the animation and keyframes data which you can use for the generator. Just open the file with a code editor (Notepad++ does the job) and scroll to the bottom to find the code.
With this you can skip a lot of steps in most tutorials.
To summarise it:
- Create the svg file (because you use Figma the video you mentioned should provide enough information)
- Use Vivus to get the keyframes and animations.
- Copy the SVG lines to “body” and the keyframes as well as animations to “style”.
- Use the generator and that should give you the result.
That should decrease your time spent quite a bit.
This disco ball type animation is funny 
. And to be honest this is way easier than trying to get the animation to work in Shotcut 
. Not that one should not try it, it is just way more time consuming than capturing the output in a browser.
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.
Sure, will take care of it.
Thanks.
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.