Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Where are all the animated SVGs?

getmotion.io

Post reply on HN
Print view View original

51–60 of 200 posts

Re: Where are all the animated SVGs?

#51

Post by type_enthusiast »

jazzyjackson wrote: post #47

Back in 2013 the game magazine Polygon created really stunning illuminations in their Playstation 4 and Xbox One reviews. It's what got my interested in the more advanced uses of SVG and CSS -- it uses a clever trick where it uses the bezier curves as paths that are then filled in by offsetting the stroke fill... here it is. stroke-dasharray: 422px, 422px; stroke-dashoffset: 0px; fill: rgba(255, 255, 255, 0.333); htt…

Used this same trick (but with SMIL) for an automotive client back ca. 2004. They wanted their electrical systems' documentation diagrams to be in SVG, with signals being animated in a similar fashion. At the time the only viewer that supported it was Adobe's ActiveX plugin! (Not claiming credit for the trick; AFAIR I found it on a web forum somewhere... wish I remember who invented it)

Re: Where are all the animated SVGs?

#52

Post by pbhjpbhj »

downerending wrote: post #18
carlg wrote: post #2

I, for one, don't want this. At all. Taking a look at my screen right now, there are probably close to a hundred or so icons in various applications visible on my desktop. If all these icons were wiggling and dancing, distracting me in my peripheral vision, it would be infuriating. I already had to disable animation in Slack due to the constant barrage of animated emojis. Let's not just do this because we can.

We could compromise and just allow blinking text. /s

[marquee] only allowing blink would supress my creativity [/marquee]!

Re: Where are all the animated SVGs?

#54

Post by neuromute »

Jerry2 wrote: post #50

The lack of open-source animation tools is really concerning to me. I've been looking for a way to animate some text and graphics for a series of training presentations that I was making and I couldn't find anything suitable. Open source tools are either geared towards animation of cartoons or they're so rudimentary that they're not really valuable to invest the time into. Anyone have any recommendations for animatio…

Three animation tools (not strictly SVG-related) that spring to mind:

Pencil 2D

Synfig Studio

OpenToonz (used by Studio Ghibli, no less!)

If you want 3D, then Blender is a fantastic open source tool.

Re: Where are all the animated SVGs?

#55

Post by dankohn1 »

CNCF now administers one of the larger collection of SVG logos at https://l.cncf.io. We've also rolled out other landscapes like for motion picture animation https://l.aswf.io and AI https://l.lfai.foundation.

In the process, we've built a tool to autocrop and optimize SVGs so that they are as small as possible and work correctly in Illustrator and all other readers. The tool is open source and available at https://autocrop.cncf.io.

Re: Where are all the animated SVGs?

#56

Post by Mirioron »

willis936 wrote: post #41
carlg wrote: post #2

I, for one, don't want this. At all. Taking a look at my screen right now, there are probably close to a hundred or so icons in various applications visible on my desktop. If all these icons were wiggling and dancing, distracting me in my peripheral vision, it would be infuriating. I already had to disable animation in Slack due to the constant barrage of animated emojis. Let's not just do this because we can.

The killer app for animated svgs is not icons. It's graphics that are meant to be given attention to convey something important. We do that with raster graphics and it works okay, but low resolution rasters of yesteryear look bad.

And "low resolution" SVGs will look bad in the future too. It won't be as graphically apparent, but they will look barren and odd, because there's no detail as they were designed with a lower resolution in mind.

Re: Where are all the animated SVGs?

#57

Post by gugagore »

I can probably clarify my ignorance on wikipedia, but I am interested in the hackernews personality, and hope that I'll learn more about it here.

Does all of this apply to HTML5 animations, too? Are there tools that are HTML5-animations/SVG agnostic? They seem like they could be closely related, or easily confused.

Re: Where are all the animated SVGs?

#58

Post by willis936 »

Mirioron wrote: post #56
willis936 wrote: post #41

Earlier quoted context omitted.

The killer app for animated svgs is not icons. It's graphics that are meant to be given attention to convey something important. We do that with raster graphics and it works okay, but low resolution rasters of yesteryear look bad.

And "low resolution" SVGs will look bad in the future too. It won't be as graphically apparent, but they will look barren and odd, because there's no detail as they were designed with a lower resolution in mind.

The detail level is a design choice. Even though you could have immensely intricate SVGs, you expect some graphics to take up a small portion of your view. Unfortunately the screens are the only things getting better over time, not the eyes.

Re: Where are all the animated SVGs?

#60

Post by crazygringo »

Please keep the animated SVG's away!

Motion is extremely effective at drawing the eye's attention, and so should never be used unless that's the goal.

In fact I can't think of a single good design reason to ever animate an icon except for loading/progress icons, which already are ubiquitous and generally don't need any dedicated animation tools since they're so simple and reusable.

You don't ever want normal interface/page icons to be animated constantly, because it's always distracting and never good.

What about intermittently, like hover states? Still no, because a hover state exists to give confirmation that you've mousedowned on a clickable area -- so the hover needs to be an area-wide confirmation (like changing the button color). Animating an icon instead is too confusing, and animating it on top of a color change is too redundant and noisy.

So I just don't see any use case at all.

(Extra note #1: motion itself can be helpful in UX -- e.g. an icon expanding in size to a card, a card sliding off, etc. -- but none of that involves animated icons.)

(Extra note #2: except for gaming interfaces which are all about sensory excess -- shadows! sounds! animated icons! pop-out effects! -- but those tend to be based on other technology workflows anyways.)

Post reply on HN