TravelPath Webvfx

Hi all,

This a a small feature i needed for a series of videos i am about to shoot and edit. I though it could be useful to some others users so i just shared this tool.

Basically, this is a small web page app that allows loading an image, defining a path with the mouse and exporting a ready-to-use HTML overlay document to replay the path animation using Webvfx.



Execellent app. Maybe you could add the gif, your tutorial and link to the web app here too?


The app generates webvfx animations like this:

The app can be launched here.

The project repository with code and explanations is here.

1 Like

Hi mig - well, well, that is a fantastic tool!

I just tried it - OMG it works - I just did this an a few minutes:

Just a couple of points - it generated a LOT of html code. I copied and pasted to Notepad (windows) but Notepad didn’t seem to be able to handle the large amount of text, and hung. So I imported it into Notepad++ instead - worked immediately! Then saved it as a html.

Thank you for this, it’s quite amazing.

Thanks for sharing that. People are doing some interesting things with WebVfx, and I need to introduce template selection into the Overlay HTML filter to integrate some of these ideas. Not sure what to do about one that requires a web app, however. Perhaps once I upgrade Qt and integrate OpenSSL, I can add a “Design” tab to the HTML editor where it can contain a parameters UI or access a site-based tool like this.

Maybe this kind of tools that help generating ready-to-use HTML overlays should not go into Shotcut since they answer very specific needs, but instead having those tools referenced from a page on Shotcut page would help users. So if someone has a specific need, it would be possible to quickly check if a helper is available to create the HTML. Since not every video editor is a web coder, this could be useful. But maybe this already exists. Does it ?

This being said, i think Shotcut would benefit at introducing a new file format with a specific extension, that would group all the HTML resources into a single file, like a ZIP archive that would contain: the HTML file, the associated CSS, JS, images, fonts, …, and maybe a webvfx.js file to ensure compatiblity. That would make FX much more portable than it is now. For instance, in my tool, for making things easy for users and have only one file to manipulate, i had to data-url-encode the image into the HTML file, which had as a side effect to break jonray’s notepad editor.

Even better, if that FX file format publishes a manifest that defines parameters for the given FX resources, Shotcut could provide the UI to edit those parameters and customize the FX. Like someone would write a “Credits” FX resource and allow the user to edit the credit text and background color directly from within Shotcut. But again, this may already exist and i just missed it.

What a great addition to WebVfx, thank you for creating this.
Only discovered it today and it worked straight away with no issues.

What would make it even better would be the ability to add a small png (with alpha) that also moves with the dashed lines.
Not unlike what is often used in travel programs, a picture of a plane or car showing the route that the presenter/s took.



Yes, this feature would be a good addition. Probably the tricky thing would be to rotate the small image along the path so the orientation is always kept in sync with the line direction, but it shouldn’t be too hard to code.

Hopefully someone will modify the original code to have this, or maybe i will if i need it.

Thanks for sharing it!

This topic was automatically closed after 90 days. New replies are no longer allowed.