I think you are right. The idea is to have the 10 sub-images as the background image, with the size of the div chosen so that only 1 is shown. Then every tenth of a second the background is moved instantly to expose the next sub-image. It looks as if the animation polyfill cannot handle this.
A possible workaround is to use a ‘linear’ easing instead of the ‘step(10’ and have the following keyframes:
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!
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.