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

71–80 of 200 posts

Re: Where are all the animated SVGs?

#71

Post by buovjaga »

neuromute wrote: post #54
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.

Synfig now includes a Lottie exporter: https://www.synfig.org/2019/12/27/whats-coming-to-synfig-1-4...

It is in the 1.3.12 release.

There is also this new tool called enve (Linux only): https://maurycyliebner.github.io/

Re: Where are all the animated SVGs?

#72

Post by werber »

Well done svg animation is really impressive (Sarah Drasners work comes to mind) but i have never felt a pressing need to add it to my professional tool set when considering the time commitment and the fact I’ve never been asked about it in a front end interview

Re: Where are all the animated SVGs?

#73

Post by fanf2 »

crazygringo wrote: post #60

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 interfac…

My most hated example of gratuitously distracting page decoration is the wriggling jizz scribbles on https://theoutline.com

The worst part is that you can’t get rid the incontinent piss dribbles by whacking the reader mode icon, because the shithead web developers load the whole magazine into one page so reader mode only shows the first article.

The developers of that site deserve to have their faces rubbed in my analogies, assuming that isn’t the kind of thing that gets them off.

Re: Where are all the animated SVGs?

#74

Post by Izkata »

Animats wrote: post #64
crazygringo wrote: post #60

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 interfac…

Please keep the animated SVG's away! Yes. Now, from the people who brought you the tag, continuous junky animations. You can also do spinning logos in WebGL, but you shouldn't. The only legit use for this is when you want clicking on a button to indicate that something happened. If you click on a "send" button, and an envelope zips across the screen and disappears, it's OK. If you click on the "Buy" button, it would…

> (Remember "material design?" Whatever happened to that?)

The new hotness is "neumorphism": https://uxdesign.cc/neumorphism-in-user-interfaces-b47cef3bf...

Re: Where are all the animated SVGs?

#75

Post by markdown »

gugagore wrote: post #48
markdown wrote: post #40

> This process reminds me of web design in the 2000s when Photoshop was king. ~~Cries in Adobe Fireworks~~ I always wondered why Adobe Fireworks, which was a hundred times better than PS for web design, never got traction. I mean this was the time of web 2.0 gradients and rounded corner gel buttons and people were making this stuff with freaking PS. Why? Adobe Fireworks could do vector graphics wonderfully.

What did the workflow of using photoshop even look like? I might be misinterpreting "web design". It means developing a design to be consumed by a computer, and also developing a design to be consumed by a web developer (like a mock-up design).

I have no idea how they did it. In Fireworks you could just slice up your design and export all the assets in one go, all at the desired quality settings. It even supported 32bit png files with alpha transparency. You could have multiple pages and each of those pages could have different states. You could have buttons all over your website that would change everywhere if you edited them in one place (symbols). It was just perfect for web dev.

Re: Where are all the animated SVGs?

#76

Post by jrumbut »

I have no idea how this article overlooked D3 which has excellent capabilities here.

You can then view your icon as data (no need to send the whole SVG if that doesn't make sense), use their affine transforms and force simulations and all that good stuff that is important to get exactly right.

Visualization people have done plenty of animated and interactive SVGs. I find performance issues past a certain size but ease of implementation is very good once you get the hang of it.

Re: Where are all the animated SVGs?

#77

Post by magic_beans »

crazygringo wrote: post #60

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 interfac…

I see a use case: ads.

I develop ads for a living. A tool like motion is a GODSEND in this industry.

Re: Where are all the animated SVGs?

#78

Post by PeterisP »

magic_beans wrote: post #77
crazygringo wrote: post #60

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 interfac…

I see a use case: ads. I develop ads for a living. A tool like motion is a GODSEND in this industry.

People who work on making ads more attention-grabbing are actively working on making the world worse.

Re: Where are all the animated SVGs?

#79

Post by magic_beans »

jarjoura wrote: post #19

> Creating animations is hard! This is one reason why many developers do not attempt it. You need to have a "design eye" or you need to study animation. People go to school for years to learn about animation and spend years refining their craft. This! On a project I was working on recently, animations cost around $10k per object. If we wanted to invest in a full experience it easily grew to a several million dollar e…

Whoa whoa whoa... I do web animations for a living. What industry/agency/brand do you work with? Are they looking to hire?
Post reply on HN