Show HN: all-SVG websites with complex animation

Re:Show HN: all-SVG websites with complex animation by AndrewSwift on Tuesday November 08, 2022 @08:45AM (#33518849)

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

[ Parent | on HN ]

Re:Show HN: all-SVG websites with complex animation by thebeastie on Tuesday November 08, 2022 @04:06PM (#33524302)

Does it support lighting effects?

[ Parent | on HN ]

Re:Show HN: all-SVG websites with complex animation by AndrewSwift on Wednesday November 09, 2022 @02:19AM (#33528383)

It does not. Right now, Svija only supports effects that can be created within Adobe Illustrator.

From what I have seen, these kinds of effects are easy to reproduce with regular Illustrator effects. It might be interesting in more advanced animation to change the lighting with other movement.

[ Parent | on HN ]

Re:Show HN: all-SVG websites with complex animation by webmobdev on Tuesday November 08, 2022 @04:14PM (#33524383)

It's fantastic! Just wish it could be used with open source editors like Inkscape or Krita, instead of AI.

[ Parent | on HN ]

Re:Show HN: all-SVG websites with complex animation by AndrewSwift on Wednesday November 09, 2022 @02:15AM (#33528359)

We would love that. The problem is that only Illustrator leaves text as text and images as images — all the others except Inkscape convert text and images into data that's no longer searchable.

With Inkscape, the issue is that AFAIK it's not fully scriptable, making it complicated to use with Svija, and there is not a big user base (I've tried unsuccessfully to get real numbers, so I'm judging by participation in SVG forums, things like that).

[ Parent | on HN ]