Hi @sauron, (sorry, couldn’t get to reply yesterday…)…
Thanks for the details of how you did it. In a way we had the same basic thought - ie to isolate the individual bird images and make them into a movie before overlaying it. I did it with “image sequence” in SC, you did it in GIMP as a gif. Interesting.
BTW can I ask if you could post your HTML file that allowed you to import the gif into SC? I’m guessing it’s just a simple file pointing to the gif. Thanks!
I just created a blank hrml using the text HTML template. Gave it a name, then used the edit insert image in the html editor to point to the gif.
Bird.htm.txt (396 Bytes)
Use an animated gif because it’s in a loop. The bird can fly for 10 seconds or 10 minutes. Just need to stretch the clip. Also, the speed can be changed by editing the gif in Gimp.
Didn’t think to use an image sequence. Tried it last night with the images created with Gimp. It didn’t work for me so evidently I’m doing something wrong or something’s broken with the images.
Ah, OK. Clever. Thanks!
Hi @elusien, did more testing - thought I’d aim high again and try to get this animation working in SC:
https://codepen.io/yoksel/pen/nxgrp
which looks like this:
https://streamable.com/ve53l
I tweaked the HTML to get this (I separated out the animations and keyframes):
disco cube inline style EDITED 02 with INLINE style separated WORKS IN CHROME.zip (3.3 KB)
But when I converted it to this:
disco cube inline style EDITED 03 with INLINE style separated CONVERTED.zip (6.1 KB)
it wouldn’t work in Chrome.
I hit F12 to debug and Chrome doesn’t seem to like the first line of the “rotate” animation:
Thought you may be able to shine some light on this? Many thanks.
Jon, only just seen your post. The problem is with your “rotate” keyframes. You should have got rid of the “-webkit-transform” line(s) when you copied in the utility, i.e. just keep the “transform” line(s).
@keyframes rotate {
100% {
-webkit-transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
}
}
The second problem is mine: I cannot handle the spaces in the “shadows” keyframes e.g.
box-shadow: 0px 0px 0 0 rgba(255, 255, 255, 0),
My translator removes these (a mistake) to produce:
box-shadow:0px0px00rgba(255,255,255,0),
which of course is gibberish. I’ll have a look at this tonight - out all day with family. I think I have a way of using the keyframes as-is, without having to translate them.
Hi @elusien, no worries at all. Glad you are having time with your family visiting.
I’ve adapted the HTML file to retain the spaces. Also removed all the -webkit- prefixes, except for
“-webkit_transform”…
Disco Cube animation 09 CONVERTED Jonray (working in CHROME but not in SC).zip (4.7 KB)
It works fine in Chrome (even with the animations commented out), but not quite in SC. I get only one side of the cube rotating. This is the exported video from SC:
https://streamable.com/p49kv
https://streamable.com/p49kv
I think I’m nearly there but could do with your expert help getting me over the final fence !! 
Glad to see you got it working in the end on Chrome. Unfortunately you won’t be able to get it to work in Shotcut because of the old version of the webkit browser engine it uses, which does not support transform-style: preserve-3d; and this is needed to show the 3D aspect of the animation.
I came up against this restriction when I first was developing my WebVfx framework and was hoping Dan would at some stage update to a later version of QTs webkit engine, but this required too much effort on his part.
However, I think I’ve found a way to get the animations (not 3D) to work without having to put them through the converter (i.e. using the CSS as-is). I’ll do the first testing of this tonight.
I tried an animated text based on a SVG file/code. It took quite some time to figure out how to achieve a SVG code which works in a browser but the conversion with the generator worked well. Following this tutorial (https://medium.theuxblog.com/the-ultimate-guide-to-animating-drawn-text-in-html-with-css-no-jquery-needed-bcdcfdb963d8) but adapting it to Inkscape results in this animation:
Thanks @elusien.
Ah yes, I seem to remember you telling me about this problem quite a while ago. (I had forgotten…
)
At least I got the rotation working, so it was a useful learning exercise.
Sounds wonderful, look forward to seeing what you’re cooking up …
Wow, @samth, now there’s something that interests me!
I had a look at that tutorial. Looks quite complex but it I will enjoy studying it and seeing if I can come up with something…
It’s all new to me but a quick Google search of “convert svg text to html code” led me to this:
https://www.youtube.com/watch?v=vJNVramny9k
which looks really interesting. Looks as though he uses Figma to create svg information from text; then he copies this into a HTML document. Good news is that there’s a free version of Figma. I am interested! I will explore when time allows.
For added information, the problem regarding the transform-style:preserve-3d issue was discussed here: https://forum.shotcut.org/t/html-css3-animations-now-possible-in-shotcut/12053/51
By the way, here the HTML file after the conversion: Text animated.zip (2.0 KB)
At the beginning it was a bit intimidating but the parts concerning creating the SVG and applying the animation in the HTML file were quite easy to accomplish. But the transfer to the HTML file was challenging. It was Inkscape’s overhead and a weird implementation (flow text is not supported by browsers and therefore not in Shotcut as well) which was quite the hurdle (FAQ | Inkscape).
I found Vivus (Vivus Instant - inline SVG animation with CSS) which can be used to create keyframes as well as animations and see changes immediately. It is a neat online tool which shortens the coding time a bit.
I saw this video as well which is kind of the visual representation of the linked text and helped me to understand the process.
I am a bit apprehensive about Figma since it is an online tool which requires yet another account and I really dislike the amount of accounts I have to create for so many tools. I would rather use a portable software.
Could you perhaps tell me about your experiences after trying it out? (A personal message is probably better to not clutter this topic too much.)
The idea was to use a method called getAnimations to obtain a list of CSS animations and operate directly on them. Unfortunately although the polyfill I use is supposed to support this, it doesn’t for CSS animations. There is a bug report on Github for this but it’s been there since January last year with no response from the team so I suspect it will not be fixed (at least in the short-term). So I’m back to fixing my converter - hey-ho!!
@samth, thank you so much for the HTML file and detailed information on SVGs, inkscape etc… There’s lots there to keep me busy and I will explore this fascinating subject when I can.
I will also have a look at VIVUS - looks intriguing.
Yes of course. I have signed up to Figma. I think the free version only allows you to make 3 designs though. I will try it out - but I’ve no idea when since I have quite a few little projects on the go (including a bit more testing for @elusien’s HTML generator…). All this learning new stuff certainly takes up a lot of time!! I’ll be in touch…
Oh dear, hope it won’t involve too much work. Eager to try it out when you’ve made the tweaks.
Well, well, that is so cool! Now you’ve got me scratching my head how you did it with a gif …
I would have probably done a Sharex screen capture from either the codepen site or from my HTML file rendered in Chrome, and saved it as an mp4.
Disco Cube animation 09 CONVERTED Jonray (working in CHROME but not in SC).zip (4.7 KB)
That is the least I can do after all the times you helped me 
. I held back since I do not know your process of trying things out and learning new techniques. But I had to inform you about the most time consuming annoyances which definitely do not help you understand more. Feel free to ask me if you encounter a problem.
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…:
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.
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:
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.
