I have completed my framework for developing HTML Filters using WebVfx. For a sample of what it can do go to: vimeo.com/257373574. This demonstrates neon-glow text, spinning logos, upward scrolling credits, credits zooming in from the side, stopwatches and gauges.
The framework simplifies creating HTML Overlay Filters. It hides the WebVfx interface and enables you to use a modern browser (with all its development tools - F12) to do the development, rather than using Shotcut, where the simplest of errors creates a blank screen and are extremely difficult to track down.
The framework enables many filters to be developed using only HTML and CSS, i.e. without any javascript, by using specific attributes on the HTML elements to produce the required animation. It uses WebVfx to synchronise the animation with the video frames.
I’ve set up a webpage where the framework javascript can be downloaded. It also has the documentation and the source for all the examples for you to modify/play with. If you have any comments/suggestions please feel free to reply.
Great stuff. Back in the day when Dan originally added the HTML filter, I looked for examples which maybe could be included. I’ll leave them here for inspiration:
I actually looked at the Movie Credits CodePen when I was developing the framework, trying to decide how to implement the framework’s keyframes. At first I was going to process actual CSS keyframes, converting them to JSON strings that get parsed. But I decided it was another level of complexity that I would have to deal with and I didn’t really have the time to do it.
Good work! I will think about how to incorporate this into Shotcut. It might need to wait until I add categories and searching to the Filters menu.
I have not looked at your source yet, but I did find out how to embed a Web Animations API polyfill to properly support CSS3 animation with seeking. However, it requires knowing the current duration of the trimmed clip to work correctly. I plan to factor that information into WebVfx when working on the Keyframes feature, which is currently in progress (not v18.03 unfortunately; had some personal setbacks).
Hi Elusien. This looks fantastic, the movie credits are silky smooth, and there are some highly effective animations. Great work! Can you help me? I’ve just created a video title sequence using HTML and CSS but I would really like to know how to tweak the code using your framework so it can be used directly in Shotcut, My video title can be seen at Codepen HERE:
I can post the full notepad text on this forum if you’d like t see it. Many thanks for posting your work here. Regards
Jon
Been out for the day, so only just seen this. The animation is very good. I’ll have a look at how to port it sometime tomorrow (it’s already evening here in Cyprus).
Wow, thanks for the speedy reply, Elusien! Thanks for having a look at it, that would be great - only when you get a moment. I was just unsure about the webfx code - what code to use and where to put it… One thing I’ve just noticed - would I have to change the font colours to hex values? Thank you. Jon (PS if you’re in Cyprus you probably haven’t got tons of snow like we have here in the UK…)
So long as the font colours are not in keyframes you can use any convention (name / #### / rgb(…
It only if the font color is animated that it has to be a #### or rgb(…
I should have something after I get back from golf tomorrow. My son was supposed to be flying back to the UK today, but we rescheduled his flight to next week. Looking at BBC news it looks like we did the right thing.
Dan, sorry to hear about your setbacks, I hope everything gets back on track for you soon.
I’ll have a look at the polyfill you pointed out. I’m afraid my code is a bit of a mish-mash. I originally knocked it together as a proof of concept and coding standards, unlike when I did programming for a living, were not at the top of my priorities.
It may be possible for me to use the polyfill code, but hide its complexities from the end-user. Eventually your suggestion of trying to find a way to support animation natively in Shotcut is the best course of action, but I appreciate how much effort this may take and that other features take precedence.
I had to modify the framework slightly to accept two sets of animation on an element. I could have modified your example to use only 1 by messing with the keyframes, but it would have been unrecognisable and not very intuitive. It now accepts a ‘data-animate2’ attribute.
The example looks very similar to your original CSS code. Since your animation runs for about 10 seconds it was fairly simple to modify. The ‘start’, is the CSS ‘delay’ divided by 10, to get a number between 0.0 and 1.0 and the ‘end’ is one-tenth of the sum of the ‘delay’ + ‘duration’.
If you go over to the website and download the latest version of the javascript and copy-paste the “Text” example that you’ll find there you should be able to compare this with your original to see what I mean.
I got hung up a bit on an MLT/Shotcut (WebVfx?) bug to do with text-shadows. It will accept an offset, providing the blur is zero (4px 4px 0), or it will accept a blur, providing the offset is zero (0 0 4px), but if you have both an offset and a blur, you get clipping on the text-shadow. It doesn’t happen on every element, but is very noticable on the ‘B’ and ‘o’. So I went for a zero-offset high-blur effect.
I’d be interested to see any new animations you produce using the framework, this one is quite cool.
Thank you SO much for doing this for me and for the probably considerable time it has taken you. I am very grateful! I think I am beginning to understand how your webVfx framework works. Busy right now mending the roof but I will have a more detailed look later and get back to you. Thanks again,
Jon
Your adapted version of my text animation looks really nice - thanks so much!!. I just had to get used to the blue blurring! I like it though and will adapt my original to include some blur around the text. One thing I was confused about though- I wondered why you have given the text-shadow 8 different values with a comma in between each? I’ve not seen that before.
I see the text letters move slightly faster and a little more jerkily than in my original - probably due to the timings? - and I see you have used EaseInOutBounce.
I’ve had a brief go at experimenting with your code but I’ve hit a problem - I cut and pasted the code from your website into Notepad++, saved it as a html file in my desktop, also downloaded the webFvx.js file to the desktop. But when I select “run in Chrome” all I get is a powder blue background. Any ideas about this would be gratefully received…
Thanks again,
Jon
Did you put the webvfx.js file in the same folder (directory) as the HTML file? If it is in a different folder you need to modify the <script src=‘webvfx.js’> line accordingly.
Otherwise hit function key F12 to bring up Chrome’s development tools. Then click on the “Console” tab and see what error is reported.
The 8 text-shadows is a neat little way to create a “neon” glow blur effect. You will see another text-shadow declaration below this one that is commented out. This is a much more subdued thin grey blur. Experiment with it and see what you like - same with the different easing functions. I like Bounce and Sine. In fact I think the one most similar to the one you were using is easeInOutSine
Hi Elusien,
I just solved the last problem - my fault - DOH! I had inadvertently added a space to the webvfx filename - simple human error!! Works fine in Chrome now. I will have a play when I get some free time. Thanks for the text shadow information. Interesting stuff!
Jon
but I will have a more detailed look later and get back to you. Thanks again,