Show HN: All-SVG websites with complex animation

188 points

4 years ago

I created a system for building SVG-only websites called Svija. But, though the content was nice, the sites felt too static — a bit flat and lifeless. Even a basic HTML website has mouseover effects, but SVG doesn't have them for free the way HTML does.

I wanted to find an easy way to recreate mouseover functionality in SVG. For my first try, I labeled objects in Adobe Illustrator:

  • linkSomeName: an invisible link <rect> (over the link text)
  • mouseoverSomeName: a <g> mouseover decoration (usually bold or colored text, or an underline), initially hidden

The two objects are connected by "SomeName", and a javascript event listener attached to the link object would change the mouseover object's CSS display from "none" to "block".

Once I had used it for a bit, I thought that it might be nicer if the effects faded in and out. So, I tried animating the transitions with GSAP. It immediately became clear that there was enormous potential to manage complex animations visually, and I worked over the summer to create Svija Vibe.

It's all based on linking Adobe Illustrator object names to the GSAP script. Most basic transformations already work well but there's a lot I'll be able to do to make it even simpler to use.

I'm really excited about it! I've only just started but I have a million ideas about how to make it more capable — the big one being the ability to chain animations together.

There's a support document at https://tech.svija.love/how/animation that gives more detail about exactly what can be done.

Svija Vibe is free. It works with Svija, which is also free, but you do need to create an account to use it (Maconly, at least for the next three months).

https://news.ycombinator.com/item?id=29430368 · previous HN about Svija 2022-12-03

https://news.ycombinator.com/item?id=30454324 · previous HN about animation 2022-02-24

https://greensock.com · GSAP

121 comments