# Perspective - keep style animation from firing on page load

**URL:** <https://forum.inductiveautomation.com/t/perspective-keep-style-animation-from-firing-on-page-load/76949>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [July 26, 2023, 2:30pm UTC](https://forum.inductiveautomation.com/t/perspective-keep-style-animation-from-firing-on-page-load/76949 "2023-07-26T14:30:15Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![michael.howe](https://avatars.discourse-cdn.com/v4/letter/m/3ab097/32.png) [@michael.howe](https://forum.inductiveautomation.com/u/michael.howe)\
**Post date:** [July 26, 2023, 2:30pm UTC](https://forum.inductiveautomation.com/t/perspective-keep-style-animation-from-firing-on-page-load/76949/1 "2023-07-26T14:30:15Z")

</div>

I'm working on a page with multiple SVG graphics, some of which are going to change location based on tag data from a PLC. To smooth out the relocations I've used the style property "transition : all .3 linear". It works well, looks great, but the problem is it fires every time the page loads and whatever has an x/y position binding crawls all the way across the screen from position (0,0) in a third of a second. Is there a way to keep that animation from showing? Or at least make sure the graphic is in the right position on page load?

---

<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:** [July 27, 2023, 6:40am UTC](https://forum.inductiveautomation.com/t/perspective-keep-style-animation-from-firing-on-page-load/76949/2 "2023-07-27T06:40:23Z")

</div>

not quite. Maybe only apply the transition style after the first position has been initialised

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [July 27, 2023, 7:04am UTC](https://forum.inductiveautomation.com/t/perspective-keep-style-animation-from-firing-on-page-load/76949/3 "2023-07-27T07:04:13Z")

</div>

You could try creating a binding on that style property and return the transition settings or 'none' or `null` or whatever would turn it off in the relevant circumstances.

---

<div class="post-metadata">

**Author:** ![michael.howe](https://avatars.discourse-cdn.com/v4/letter/m/3ab097/32.png) [@michael.howe](https://forum.inductiveautomation.com/u/michael.howe)\
**Post date:** [July 27, 2023, 12:08pm UTC](https://forum.inductiveautomation.com/t/perspective-keep-style-animation-from-firing-on-page-load/76949/4 "2023-07-27T12:08:51Z")

</div>

That's essentially what I ended up doing. My navigation works by changing the link of an embedded view on the main page, so I added a parameter to all the pages to toggle on/off the content of a transition binding and scripted the path property to set that parameter false for half a second every time it changes. Works well, but seems a little less elegant than if there was a way to do that inside the style itself.

---

<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:** [July 27, 2023, 1:37pm UTC](https://forum.inductiveautomation.com/t/perspective-keep-style-animation-from-firing-on-page-load/76949/5 "2023-07-27T13:37:16Z")

</div>

css does not do a transiiton on the first initial value, but because you are using bindings the first value is coming in slightly delayed. causing the issue.