# Perspective Styles Dynamic CSS Props/Variables

**URL:** <https://forum.inductiveautomation.com/t/perspective-styles-dynamic-css-props-variables/97750>\
**Category:** Ignition\
**Tags:** ignition81, perspective\
**Created:** [October 24, 2024, 7:48pm UTC](https://forum.inductiveautomation.com/t/perspective-styles-dynamic-css-props-variables/97750 "2024-10-24T19:48:14Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![jlandwerlen](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jlandwerlen](https://forum.inductiveautomation.com/u/jlandwerlen)\
**Post date:** [October 24, 2024, 7:48pm UTC](https://forum.inductiveautomation.com/t/perspective-styles-dynamic-css-props-variables/97750/1 "2024-10-24T19:48:14Z")

</div>

If I have a style class like this in the stylesheet:

```python
.psc-flow-arrow-down {
  animation: flow-arrow-down-animation 1s infinite;
}

@keyframes flow-arrow-down-animation {
  
  0% {
    transform: translateY(0px);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  100% {
    transform: translateY(75px);
    opacity: 0;
  }
}

```

Are there any options for using this class on a component and dynamically changing props like the translateY?

---

<div class="post-metadata">

**Author:** ![flexware](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/flexware/32/66243_2.png) [@flexware](https://forum.inductiveautomation.com/u/flexware)\
**Post date:** [October 24, 2024, 9:54pm UTC](https://forum.inductiveautomation.com/t/perspective-styles-dynamic-css-props-variables/97750/2 "2024-10-24T21:54:11Z")

</div>

Dynamic in what way? Like changing the `75px` to, say, `85px`? In CSS, you can create a variable and then use it in the `translateX/Y` function, but I'm not sure how you'll write to it from the session.

What you could do, depending on how many different options you have to `translateX/Y`, is to just define the style class based on the different translate amounts... This is obviously suboptimal, but the first that came to mind, say, if you had 5 - 10 different options.

Something like

```CSS
.psc-flow-arrow-down-1 {
  animation: flow-arrow-down-animation-1 1s infinite;
}

@keyframes flow-arrow-down-animation-1 {
  0% {
    transform: translateY(0px);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  100% {
    transform: translateY(75px);
    opacity: 0;
  }
}

.psc-flow-arrow-down-2 {
  animation: flow-arrow-down-animation-2 1s infinite;
}

@keyframes flow-arrow-down-animation-2 {
  0% {
    transform: translateY(0px);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  100% {
    transform: translateY(105px);
    opacity: 0;
  }
}

```

This feels almost wrong to do this, but I don't know how else you can dictate the animation from the session without having to do a write to the filesystem to update the CSS variable or something complicated like that. It would be easier to do in native development.

[I'm operating under the assumption that you'll want to be able to dictate the animation from the session]

---

<div class="post-metadata">

**Author:** ![lrose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lrose/32/62724_2.png) [@lrose](https://forum.inductiveautomation.com/u/lrose)\
**Post date:** [October 24, 2024, 10:06pm UTC](https://forum.inductiveautomation.com/t/perspective-styles-dynamic-css-props-variables/97750/3 "2024-10-24T22:06:29Z")

</div>

You can create the animation properties directly on the object and use bindings to manipulate it.

Otherwise I don’t know of any way (outside of JS) to manipulate the styles dynamically, at runtime.

---

<div class="post-metadata">

**Author:** ![jlandwerlen](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jlandwerlen](https://forum.inductiveautomation.com/u/jlandwerlen)\
**Post date:** [October 24, 2024, 10:23pm UTC](https://forum.inductiveautomation.com/t/perspective-styles-dynamic-css-props-variables/97750/4 "2024-10-24T22:23:27Z")

</div>

How do you mimic keyframes with component props though? Maybe I'm overthinking this, but didn't know how to do that.

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [October 25, 2024, 7:16am UTC](https://forum.inductiveautomation.com/t/perspective-styles-dynamic-css-props-variables/97750/5 "2024-10-25T07:16:44Z")

</div>

You don't, but here what you could do:

define your variable in classes. Something like:

```css
.psc-size1 {
	--size: 75px;
}

.psc-size2 {
	--size: 85px;
}

.psc-size3 {
	--size: 95px;
}

```

then use this variable in your animation:

```css
.psc-some_class {
	animation: some_anim 1s infinite;
}

@keyframes some_anim {
	to {
		transform: translateY(var(--size));
	}
}

```

now you can give the `sizeX` class you want to your component, along with the animation class.

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [October 25, 2024, 8:07am UTC](https://forum.inductiveautomation.com/t/perspective-styles-dynamic-css-props-variables/97750/6 "2024-10-25T08:07:09Z")

</div>

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/5/550c7c44723b19489fb1a9fdc63cbcdc63c2abe1.jpeg)

This is the way, aslong you are not going to abuse it and change the classes every second on the fly on the same component

---

<div class="post-metadata">

**Author:** ![lrose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lrose/32/62724_2.png) [@lrose](https://forum.inductiveautomation.com/u/lrose)\
**Post date:** [October 25, 2024, 3:45pm UTC](https://forum.inductiveautomation.com/t/perspective-styles-dynamic-css-props-variables/97750/7 "2024-10-25T15:45:34Z")

</div>

Well, I guess I wasn't exactly clear, as I made an assumption that this is for an SVG.

If that is the case then you can do this in the props with an embedded SVG:  
 ![flowarrow](https://us1.discourse-cdn.com/inductiveautomation/original/3X/c/1/c1895964b22f7b63872216ad5ba1ce38ee10b6ea.gif)

If it isn't an SVG, then @pascal.fragnoud's approach is what I would use.

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [October 28, 2024, 3:08pm UTC](https://forum.inductiveautomation.com/t/perspective-styles-dynamic-css-props-variables/97750/8 "2024-10-28T15:08:54Z")

</div>

Depending on the need you could also use percentages and just put it on a wrapper container or something that you can resize to whatever size you want (be it 75px or 100 px or whatever)  
You might have to handle overflow too tho

```python
@keyframes flow-arrow-down-animation {
  
  0% {
    transform: translateY(0%);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  100% {
    transform: translateY(100%);
    opacity: 0;
  }
}

```