# An animated synopsis according to known states in the NR dashboard **URL:** \ **Category:** Dashboard\ **Created:** [20 August 2022 12:06 UTC](https://discourse.nodered.org/t/an-animated-synopsis-according-to-known-states-in-the-nr-dashboard/66698 "2022-08-20T12:06:24Z")\ **Posts on this page:** 6\ **Page:** 1

**Author:** ![Jean-Luc](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jean-luc/32/89996_2.png) [@Jean-Luc](https://discourse.nodered.org/u/Jean-Luc)\ **Post date:** [20 August 2022 12:06 UTC](https://discourse.nodered.org/t/an-animated-synopsis-according-to-known-states-in-the-nr-dashboard/66698/1 "2022-08-20T12:06:24Z")

I would like to develop an animation that would look like this. This is an example: ![](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/f/3fc0f8c1e27597dc77f7d38bb79945bca5cf435b.gif) I'm not sure where to start, not being a developer at all, I'm wondering if there is a tool like Node red that would allow me to achieve this goal. I already used the SVG node into NR to change the colors of a drawing according to defined thresholds. (Thanks to @BartButenaers ) Now when to make this kind of animation there is a gap. 🤨 **So my request is:** Do you have ideas, tracks to carry out an animation which is controlled by variables, conditions. Typically the direction of the current, to name but one, which goes left, right, up or down. Obviously this should be displayed in the dashboard I am well aware of my limited skills and this idea is perhaps too ambitious for a non-programmer. But I did manage to build a whole set with Node red, maybe there is such a tool to build an animation. Nothing ventured, nothing gained. Thanks to all the Node red community for your feedbacks. ---

**Author:** ![Andrei](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/andrei/32/10446_2.png) [@Andrei](https://discourse.nodered.org/u/Andrei)\ **Post date:** [20 August 2022 12:56 UTC](https://discourse.nodered.org/t/an-animated-synopsis-according-to-known-states-in-the-nr-dashboard/66698/2 "2022-08-20T12:56:11Z")

> [@Jean-Luc](#): > > there is a tool like Node red that would allow me to achieve this goal. Surely this animation was created with CSS which is a language for animation, effects, decoration, etc. (so it is a domain specific language). It is not difficult to learn however it takes time to reach a level where you would produce such nice effects. ---

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\ **Post date:** [20 August 2022 16:09 UTC](https://discourse.nodered.org/t/an-animated-synopsis-according-to-known-states-in-the-nr-dashboard/66698/3 "2022-08-20T16:09:50Z")

You can find some ideas [here](https://stackoverflow.com/questions/40437647/svg-animation-on-path-like-the-snail). Personally I would animate the `stroke-dashoffset` css property. Because the you apply a dashed style to your line, and then you animate the offset, which means the dashes will start moving along the line. By increasing or decreasing the offset, you can specify in which direction the dashes will have to move. You can also apply this to e.g. polylines, if you need angles like in your screenshot. Good luck! You will need it 😉 ---

**Author:** ![Jean-Luc](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jean-luc/32/89996_2.png) [@Jean-Luc](https://discourse.nodered.org/u/Jean-Luc)\ **Post date:** [20 August 2022 19:01 UTC](https://discourse.nodered.org/t/an-animated-synopsis-according-to-known-states-in-the-nr-dashboard/66698/4 "2022-08-20T19:01:32Z")

Thank you for taking the time to answer me. @Andrei So yes indeed, this animation comes from [there](https://developpaper.com/css-animation-works-with-svg-to-create-energy-flow-effect/) and this person is indeed using CSS. I think indeed that the effort is great to just make an animation 🤔 @BartButenaers Nice example of a dot following a line. So I'm thinking that there must be a tool that allows you to draw and then generate code. What seems complicated to me is to animate it according to the energy flows which can go in all directions according to the state of the consumers / producers. I will obviously dive into `stroke-dashoffset`, I understand the idea, however I think I'm starting from too far 🛰 I wonder if with the help of the `node-red-contrib-ui-media` I could not simply display pre-made Gif images in the screen according to the different possible states. There aren't many of them. It's not the most elegant thing to do, but it's quickly within my capabilities ---

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\ **Post date:** [20 August 2022 20:18 UTC](https://discourse.nodered.org/t/an-animated-synopsis-according-to-known-states-in-the-nr-dashboard/66698/5 "2022-08-20T20:18:46Z")

> [@Jean-Luc](#): > > I will obviously dive into `stroke-dashoffset`, I understand the idea, however I think I'm starting from too far Seems that they use (in your linked page) another css property `offset-distance`, which they change from 0% to 100%. There will be multiple ways to achieve this. I'm always having a hard time with css... ---

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\ **Post date:** [19 September 2022 20:19 UTC](https://discourse.nodered.org/t/an-animated-synopsis-according-to-known-states-in-the-nr-dashboard/66698/6 "2022-09-19T20:19:33Z")

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.