Animated icons BETA, looking for animators and testers

Share your Projects! Dashboards & Frontend
1

Hi all,

I’ve finally brought one of my pet projects to life, animated icons.
With studio-icons you can select animated icons from the default icon picker!

I’m looking for animators to help with the project

There are two icon sets: ‘studio-icon-state’ - ‘sis:’ icons:
studio-icons-sis
The state icon will animate when the state is set to ‘on’, or when you hover. The color adapts to the default state colors.

You can also select from the ‘studio-icon-loop’ - ‘sil:’ icon-set.
studio-icons-sil
You can display an icon as a continuous loop.

If you would like to try it out:

Cheers,
– Ingrid

14 Likes
2

Cool initiative! Is it also an option to not change the color on state change but only animate?

Thus eg. a TV icon in standard color (off) and animating when (on,)?

3

Hi,
Because it is not a custom card, but overwrites the default icon, it does not have its own configuration.
I am working on a card, it will be included in beta2.

By default a state icon will inherit its colour from the parent element. If the card you are editing offers an option “use state colours” set that to false. If this option is not present you can use card-mod to overwrite the default behaviour.

Thanks for the question, I will include all the style options in the next beta.

4

I’ve given this a try and seems to work ok.

I can only get it animate on the entities card and if you add the state_color: true option it works but it is inverted. Without it the colour doesn’t change on state change

It partly works with tile card (and mushroom cards), the icon appears but is not animated

5

Still looking for animators, hoping to release the first version end of January.

– Ingrid

6

Interesting. Will start testing!

7

Very nice initiative. Unfortunately, it doesn’t work. I tested the “sis:pot-steam-outline”. I can choose it from the picklist, but it does not animate in the entity-card:

type: entity
entity: sensor.kochfeld_operation_state

The states are “Run” and “Inactive” and I saw in your code, you check for “on” and “off”. However, if I change the status to “on”, also no animation.

8

Hi Andreas,

As you can see, this is a Beta version. I published this to show proof of concept and to find collaborators for the project.
Because now it looks like I have to animate 1000 icons solo, which will take a while.

But thanks for the test. In the next beta release, end of the month, I will include functionality for the entity card.

Kind regards,
– Ingrid

1 Like
9

Hi there Ingrid,

First of all, thank you for the great icons!

I’m quite new to home assistant but slowly getting the hang of it.

My question is will the addon automatically update when you release it? Or do we have to upload a new file?

Also I found these free Animated Icons online but I’m not sure if you can intergrate them: Animated Icons | 18,000 + Free Animated Icons for your projects

Thanks in advance!

Cheers,

Rutger

10

Hi Rutger,

Welcome to the community.

Home assistant does not have a default auto-update function. But when the custom component is out of beta, I will see if I can add it to HACS, the community store, and updates will be managed.

Thanks for brainstorming with me. I know the flat-icon archive. I do use this website for inspiration. But I specifically want to animate the mdi icons, as they are the default icon set.

Kind regards,
— Ingrid

11

Hi all,
I tried to find collaborators for this project, but alas, up to now, I have not found any.

It is just too much to do all by myself and adhere to a timeline. So I have abandoned the project for now, and just create animations when I use them for my own dashboards. Once I have around 100 I will publish a set.

Kind regards,
– Ingrid

6 Likes
12

Hello,

what was your workflow for creating these icons?

13

Hi Samuel,

Your question is quite broad? Do you mean how I created the animations?
I used After Effects. A short animation lasts for 2 seconds the long ones are 4 seconds, as I remember. I always start and end with the mdi vector.
Export as lottie json using the bodymovin plugin.

I hope I answered your question.

Kind regards,
- Ingrid

14

that seems more familiar than using lottie directly to animate.
We’re going to give it a try, if all goes well we might post some commits on git :slight_smile:

Any additional info on the workflow is appreciated!

Have a nice day,
Samuel

15

Hi Samuel,

Thank you for collaborating :clap:! I will try to find some time to update the git next week. I will add a folder development with some of my After Effects files and descriptions of the plugins I used. I hope that will help you along.

Kind regards,
- Ingrid

16
  1. Do you have an automated way to add it to the master list?
  2. Our icons are turning out black, not HA UI color.
  3. Icons have to be added directly to the card, and not imported from the device, is there a way to bypass this?

I posted a git fork with the non-working code, if all goes well we will start committing from there. GitHub - ziat007/studio-icons_beta: test fork

17

Hi Samuel,

I forgot, you have to set classes otherwise your animation is transparent.
Classes are: “inline”: to set fill, “outline”: set stroke color and background (used for overlays).

I created a new branch to check my theory. It works in my setup :slight_smile: . However, the animation is glitchy. Have a look at the limitations of bodymovin, merge paths, and how to set animating loops.

Good luck.

Kind regards,
- Ingrid

1 Like
18

Where do you set the classes? I see now, in AE the fill layer.
Will make sure not to use merge paths, groups, or effects and clean up AE files.

I have fixed and put the broken animations on git, but I am still experiencing animation lag.

I have updated the waves file, but it still has issues. It works perfectly on the Lottie website. I have also added the original AE source file.

Is there a way to change the AE resolution factor to something like 10x instead of quarter/third/half?

I have also added an automatic build and minify on the github repo.

Slowly trying to put together a sensible design language for the movement.

1 Like