Lightsaber animation effects with ZSine library and CSS


Lightsaber animation effects with ZSine library and CSS Tutorial by Mirko Zovko | 21. Jun. 2020.

Not sure about you, but for me the most interesting part of Star Wars is lightsaber. I really like lightsaber animation effects, power, colors, crystal..,everything about it. Technology to create real one is not there yet, and according to what I read it will never be there, at least not in the form we think, because you can’t contain the light in that way..but we don’t know what the future holds. We can just wait and see.

I definitely can’t make it real but I can try to create the best lightsaber animation using javascript and css. In one of my old article I explain how to create lightsaber animation using only css. You can take a look and play with it on JSFiddle.

Lightsaber animation

New lightsaber animation that I created now is on a totally different level. I was playing with sinus animations and created small script ZSine for creating sinus animation, with different kinds of parameters and ability to add multiple sines on the same animation. It's the first version (0.0.1) and there is still lots of stuff to do there so I’ll explain it better in another article when I do some more modifications on it and make it much better. But if you want to modify it by yourself you can get it here, or if you have some suggestions for me feel free to send me.

While working on ZSine I got the idea that I can try to use it for lightsaber animation effects and the results were awesome. I played with parameters and got really interesting lightsaber animations with different kinds of effects. So I created two pages for you to show you all of this.

On this page you can see my favorite lightsaber animations that I created. There are different kinds of effects: smoke, flame, electric, energy.

Lightsaber animation

I also created one more page where you can create your own effect and play with it. For this first version I didn't have time to spend on it very long so there could be some bugs, just so you know :) , but next version will be much better.

Lightsaber animation builder

On the right side you can change wave parameters, add multiple waves, change light color, and also you can chose one of the predefined effect so you can see how does it look for some of the different effect. I also created option for you to export settings of your effects, so if you create some interesting lightsaber animation effects feel free to send me and in next update I'll maybe include it in the demo.

I hope you like this articles and this effects. New version will also come soon, with different kind of effects and not only for lightsaber.