# Icon Transition Animation

**URL:** <https://forum.inductiveautomation.com/t/icon-transition-animation/64398>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [September 22, 2022, 9:57pm UTC](https://forum.inductiveautomation.com/t/icon-transition-animation/64398 "2022-09-22T21:57:49Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![kgamble](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/kgamble/32/8019_2.png) [@kgamble](https://forum.inductiveautomation.com/u/kgamble)\
**Post date:** [September 22, 2022, 9:57pm UTC](https://forum.inductiveautomation.com/t/icon-transition-animation/64398/1 "2022-09-22T21:57:49Z")

</div>

I am looking to recreate this Icon animation, I have figured out other animations and transitions in CSS.

![Screen Recording 2022-09-22 at 2.39.23 PM](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/2/42b70d745bd6bd0215120c9b40cda9a94f18d510.gif)

I have tried adding a `transition: 1s linear` on the buttons `props.image.icon.style` but it doesn’t seem to capture it.

Any ideas?

---

<div class="post-metadata">

**Author:** ![YF129701](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/yf129701/32/60498_2.png) [@YF129701](https://forum.inductiveautomation.com/u/YF129701)\
**Post date:** [September 22, 2022, 10:39pm UTC](https://forum.inductiveautomation.com/t/icon-transition-animation/64398/2 "2022-09-22T22:39:18Z")

</div>

I can’t speak to your specific issue with this animation, but what I usually find is the problem when CSS styles don’t apply is that they’re applied at the wrong level (or on the incorrect HTML element, if you look at the markup). I’m assuming you have a state it will transition to already defined (on hover or whatever pseudo-class you’re using).

---

<div class="post-metadata">

**Author:** ![djs](https://avatars.discourse-cdn.com/v4/letter/d/e47774/32.png) [@djs](https://forum.inductiveautomation.com/u/djs)\
**Post date:** [September 23, 2022, 2:55pm UTC](https://forum.inductiveautomation.com/t/icon-transition-animation/64398/3 "2022-09-23T14:55:18Z")

</div>

I’m not a CSS expert, but perhaps its because the path is not a _style_?

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/3/934cbaa85d7243a50649b6037c334e0cc6cb4201.png)

You might have to have 2 icons layered on top of each other to make this work…

---

<div class="post-metadata">

**Author:** ![nicoli.liedtke](https://avatars.discourse-cdn.com/v4/letter/n/ee59a6/32.png) [@nicoli.liedtke](https://forum.inductiveautomation.com/u/nicoli.liedtke)\
**Post date:** [September 30, 2022, 4:51am UTC](https://forum.inductiveautomation.com/t/icon-transition-animation/64398/4 "2022-09-30T04:51:32Z")

</div>

I'm trying to improve my CSS and leveraging it in Ignition and saw this as a challenge since I'm not very experienced with css in general.

You can give `rect` instances in an embedded SVG a css class that animates it. In my implementation each `rect` has a 'fold' and an 'unfold' class that animates the rectangle to the folded or unfolded position. Then in ignition I added bindings so that when you click the SVG it alternates the css class attached to each `rect` between the 'fold' and 'unfold' version. Here's an example of the fold and unfold class for the middle `rect`

```auto
.psc-menu-middle-fold {
	animation-name: menu-middle-fold;
	animation-duration: 0.6s;
	transform-origin: center;
	animation-fill-mode: forwards;
	
}

.psc-menu-middle-unfold {
	animation-name: menu-middle-unfold;
	animation-duration: 0.6s;
	transform-origin: center;
	animation-fill-mode: forwards;	
}

```

And example keyframes

```auto
@keyframes menu-middle-fold {
  0% {
    transform: translateY(0);
  }

  50%{
    transform: translateY(-42.5px);
  }
  100% {
	transform: translateY(0px) rotate(-45deg) scale(1.25,1);
  }
}

@keyframes menu-middle-unfold {
  0% {
	transform: translateY(0px) rotate(-45deg) scale(1.25,1);
  }
  50% {
    transform: translateY(-42.5px) scale(1,1);
  }

  100% {
    transform: translateY(0);
  }
}

```

The differences between the fold and unfold version is just that they have their keyframes reversed. I tried simply changing the direction of the animation but this doesn't re-run the animation and it seems the animation-name needs to change in order to rerun the animation.

I'm pretty sure this could all be rewritten to use nth-child selectors instead of the separate classes, but have not tried that yet.

![animatedMenuIconLooped](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/d/1d714baae924baa98036741c386fee994d0ae35d.gif)

Here's a text file with my css.  
[menuSvgAnimations.txt](https://forum.inductiveautomation.com/uploads/short-url/yJ9WIQS7XvA2TkMZxWj8ni4Sy3V.txt) (2.2 KB)

---

<div class="post-metadata">

**Author:** ![kgamble](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/kgamble/32/8019_2.png) [@kgamble](https://forum.inductiveautomation.com/u/kgamble)\
**Post date:** [September 30, 2022, 4:57am UTC](https://forum.inductiveautomation.com/t/icon-transition-animation/64398/5 "2022-09-30T04:57:07Z")

</div>

> [@nicoli.liedtke](#):
>
> You can give `rect` instances in an embedded SVG a css class that animates it.

I didn’t really think about adding my own SVG in place for this, I was imagining with the built in icon but there is no reason I couldn’t just throw together my own? Ends up rendering to the webpage the same anyway.

---

<div class="post-metadata">

**Author:** ![kgamble](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/kgamble/32/8019_2.png) [@kgamble](https://forum.inductiveautomation.com/u/kgamble)\
**Post date:** [September 30, 2022, 4:00pm UTC](https://forum.inductiveautomation.com/t/icon-transition-animation/64398/6 "2022-09-30T16:00:54Z")

</div>

Sweet, it works!

Any idea why it triggers the animation automatically when the view opens or you go between preview and not-preview?

Here is my view (css is a direct copy):  
[X\_Export.zip](https://forum.inductiveautomation.com/uploads/short-url/dahBvYxuTpA3eZyuauBpxZ1pb7w.zip) (2.1 KB)

---

<div class="post-metadata">

**Author:** ![nicoli.liedtke](https://avatars.discourse-cdn.com/v4/letter/n/ee59a6/32.png) [@nicoli.liedtke](https://forum.inductiveautomation.com/u/nicoli.liedtke)\
**Post date:** [September 30, 2022, 7:32pm UTC](https://forum.inductiveautomation.com/t/icon-transition-animation/64398/7 "2022-09-30T19:32:21Z")

</div>

Yeah it's just running through the animation since that is what it's being told to do. My 'fold' class has the animation starting unfolded and finishes folded.

The easiest solution might be to have the component startup script force an `animationName = 'none'` in the style of the component from the designer. Then delete that style after it's been clicked the first time. Not sure exactly how it might work, but I may be able to try to get that working in my off time.