Wanting to add some movement to our refreshed
vihanti.com website, I found
particles.js which I figured just
might do the trick. But I didn’t want it over the whole site–just in the
header banner. After tweaking the particles and downloading the json config, it
was actually pretty simple!
For vihanti.com, I really wanted some animations that
would capture our “Creativity Unleashed” slogan. After exploring
GSAP and
AniCollection and still not finding
anything, I finally designed my own animation around letter-spacing
and
opacity
. I think it turned out really cool!
For vihanti.com, we’re using
gulp as our build system instead of
hugo (which is what this site uses), because it allows us
to take advantage of the latest goodness available through npm. I really wanted
to use ES6 for this project, but I found it a little tricky to find the best way
to get minified JS with ES6. The important thing here is that we’re using
rollup to both process the
ES6 code and minify it using
terser. I tried using
babelify and
uglify, but I ran into trouble with…