# Perspective - SVG, CSS Javascript, 3rd party for animating movment from tags

**URL:** <https://forum.inductiveautomation.com/t/perspective-svg-css-javascript-3rd-party-for-animating-movment-from-tags/83422>\
**Category:** Ignition\
**Tags:** ignition81, scripting, perspective\
**Created:** [December 21, 2023, 1:21pm UTC](https://forum.inductiveautomation.com/t/perspective-svg-css-javascript-3rd-party-for-animating-movment-from-tags/83422 "2023-12-21T13:21:42Z")\
**Posts on this page:** 1\
**Showing post:** 6

<div class="post-metadata">

**Author:** ![Kevin.McClusky](https://avatars.discourse-cdn.com/v4/letter/k/47e85d/32.png) [@Kevin.McClusky](https://forum.inductiveautomation.com/u/Kevin.McClusky)\
**Post date:** [December 22, 2023, 12:21am UTC](https://forum.inductiveautomation.com/t/perspective-svg-css-javascript-3rd-party-for-animating-movment-from-tags/83422/6 "2023-12-22T00:21:51Z")

</div>

So, just in case you're looking for the "easiest" way to do this, it's just by setting the `x` and `y` properties of a component. Simple Ignition bindings can connect to these properties. No scripting needed.

This would be for if you're doing a coordinate container specifically. These are closest to your traditional HMI, and would normally be for a P&ID style representation. See the one at our demo project here: [Perspective](https://demo.ia.io/data/perspective/client/OnlineDemo/feature/realtime/hmi)

If you're doing mobile responsive design with flex layouts, you don't get the x and y properties, but you can always drop a coordinate container inside one of your flex layouts and then drop components / graphics in there.

The suggestion of adding animations can be neat here too, instead of a circle just popping from one position to another, it will make it smoothly flow. This linked post above has a good example. [Animation of a photo](https://forum.inductiveautomation.com/t/animation-of-a-photo/76511) . If you do that, just go to the component you're animating, go to style, click to create a new property and name it `transform`, and then put the `top 2s ease-in-out, left 2s ease-in-out, transform 2s ease-in-out` as the value for that property. Then, anytime the x and y changes, it makes the component smoothly move instead of snapping to the new location.

If you want to go a little fancier, the View Canvas component that was mentioned in this thread could be worth exploring too.

And if you're importing an SVG and choose "Embed Image", you'll get all the coordinate properties right in the property tree for every element inside the SVG, which you can also do standard bindings to.

---

_[View the full topic](https://forum.inductiveautomation.com/t/perspective-svg-css-javascript-3rd-party-for-animating-movment-from-tags/83422)._
