# SVG UI - Back and forth animation

**URL:** <https://discourse.nodered.org/t/svg-ui-back-and-forth-animation/79707>\
**Category:** Dashboard\
**Created:** [10 July 2023 18:44 UTC](https://discourse.nodered.org/t/svg-ui-back-and-forth-animation/79707 "2023-07-10T18:44:39Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![thalesmaoa](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/thalesmaoa/32/17067_2.png) [@thalesmaoa](https://discourse.nodered.org/u/thalesmaoa)\
**Post date:** [10 July 2023 18:44 UTC](https://discourse.nodered.org/t/svg-ui-back-and-forth-animation/79707/1 "2023-07-10T18:44:39Z")

</div>

This a simple question, but I can't understand an easy way to fix it.  
SVG allows the animation to be built in back and forth. But using SVG UI, there seems to be only one direction animation possibility.

Here is an example of pure svg animation:

> <https://stackoverflow.com/questions/41814711/svg-animate-in-reverse-once-complete>

But from SVG UI, it only allows two values:  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/a/2aed80e0c635c8668b03f9e36c7cdc75876ade66.png)

---

<div class="post-metadata">

**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:** [10 July 2023 21:23 UTC](https://discourse.nodered.org/t/svg-ui-back-and-forth-animation/79707/2 "2023-07-10T21:23:28Z")

</div>

@thalesmaoa,  
Yes you are correct that this is currently not possible with the ui node. But your stackoverflow discussion shows also another workaround for this problem, i.e. by chaining two animations. As soon as the first animation ends, another animation is started that reverts the first animation.

You can find a tutorial in the [wiki](https://github.com/bartbutenaers/node-red-contrib-ui-svg/wiki/Chaining-animations) about how to chain animations.  
Bart

---

<div class="post-metadata">

**Author:** ![thalesmaoa](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/thalesmaoa/32/17067_2.png) [@thalesmaoa](https://discourse.nodered.org/u/thalesmaoa)\
**Post date:** [12 July 2023 12:32 UTC](https://discourse.nodered.org/t/svg-ui-back-and-forth-animation/79707/3 "2023-07-12T12:32:37Z")

</div>

Hi @BartButenaers , I've followed your example, but I can't make it repeat. It seems to work only for one repetition. Is that correct?

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [11 August 2023 12:32 UTC](https://discourse.nodered.org/t/svg-ui-back-and-forth-animation/79707/4 "2023-08-11T12:32:47Z")

</div>

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