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).
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.
Does anybody have experience with a simple SVG creation tool which can create outlines and is generating code which is compatible with browsers? It is way too much hassle to accomplish a clean SVG file with Inkscape.
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.
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 (https://inkscape.org/learn/faq/#flowed-text-doesnt-show-exported-file).
I found Vivus (https://maxwellito.github.io/vivus-instant/) 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 …
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…:
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 (https://jakearchibald.github.io/svgomg/) 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.
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.