# Perspective - SVG, CSS Javascript, 3rd party for animating movment from tags **URL:** \ **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:** 7\ **Page:** 1
**Author:** ![Sundeep\_Patpatia](https://avatars.discourse-cdn.com/v4/letter/s/839c29/32.png) [@Sundeep\_Patpatia](https://forum.inductiveautomation.com/u/Sundeep_Patpatia)\ **Post date:** [December 21, 2023, 1:21pm UTC](https://forum.inductiveautomation.com/t/perspective-svg-css-javascript-3rd-party-for-animating-movment-from-tags/83422/1 "2023-12-21T13:21:42Z")
Greetings everyone. I am new to Ignition. I have been working with HMI system for 10 years but mostly with Cimplicity. Which comes to my question or need some guidance. In Cimplicity one could draw and create anything with a box and circle, group them and you could animate movement in X Y direction would some clicks. In Ignition on the other hand i am having some issues of finding the "best" way to make a picture or a drawing move across the screen according to a tag/signals from OPC UA. Lets say i want to make a circle move from point A to point B from a tag/signal from the OPC UA. Just need some help where to start, i am fairly new to JavaScript, JSON, SVG and CSS, i know some basic Python. ---
**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\ **Post date:** [December 21, 2023, 1:59pm UTC](https://forum.inductiveautomation.com/t/perspective-svg-css-javascript-3rd-party-for-animating-movment-from-tags/83422/2 "2023-12-21T13:59:45Z")
A Cimplicity client is a local application. An Ignition Perspective client is a browser. They are so fundamentally different that you will need to pretend your Cimplicity experience doesn't exist. > [@Sundeep\_Patpatia](#): > > i am fairly new to JavaScript, JSON, SVG and CSS That's fine. Part of Perspective's design philosophy is to minimize the need to understand web technologies. Minimize, not eliminate. Ignition's free online training is the best place to start. > [@Sundeep\_Patpatia](#): > > i know some basic Python Be prepared for a shock. First, Ignition uses Jython, not Python, which is the language but not the extended ecosystem. And its syntax is v2.7, not v3.x. But it enables direct use of _ **Java's** _ standard library and any loaded extensions, which is a really big deal for Ignition. If you prefer to work with something conceptually closer to Cimplicity, consider using Ignition Vision. Its clients, like Cimplicity, are a local application, and Java Swing, the foundation for Vision the way MS Forms is the foundation for Cimplicity, supports similar design patterns and UI tricks. Of course, this option only matters if your situation permits you to use Vision. In some ways, it is now the "red-headed stepchild" of the Ignition world. Anyways, start with Inductive University. ---
**Author:** ![Sundeep\_Patpatia](https://avatars.discourse-cdn.com/v4/letter/s/839c29/32.png) [@Sundeep\_Patpatia](https://forum.inductiveautomation.com/u/Sundeep_Patpatia)\ **Post date:** [December 21, 2023, 2:14pm UTC](https://forum.inductiveautomation.com/t/perspective-svg-css-javascript-3rd-party-for-animating-movment-from-tags/83422/3 "2023-12-21T14:14:27Z")
First of all, thank you for the quick response. Regarding Ignition universities i have done all the courses and even got my cup:)! My experience with Cimplcity was just an information to maybe give some hints of my experience with working with SCADA/HMI systems. The company i am working with are going for Perspective so i have to work in that and not Vision. All i need to know is what i need to learn and use to move an image from one point of the screen to another. For example the movement of a roughneck. And show how far it has moved from a range of 0 meters to 20 meters. Reading all about SVG ,CSS and using JavaScript have confused me somewhat:) I didnt find anything on the forum for what i am looking for. ---
**Author:** ![jlandwerlen](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jlandwerlen](https://forum.inductiveautomation.com/u/jlandwerlen)\ **Post date:** [December 21, 2023, 2:55pm UTC](https://forum.inductiveautomation.com/t/perspective-svg-css-javascript-3rd-party-for-animating-movment-from-tags/83422/4 "2023-12-21T14:55:23Z")
Perhaps this thread will get you started: > [@Animation of a photo](https://forum.inductiveautomation.com/t/animation-of-a-photo/76511): > > Hello, how can I move an image in the x, y or angle position in perspective , so if the tag value is true, the image moves with a specific number of steps and speed with specifying the starting and ending points There are several other examples already on this forum. ---
**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\ **Post date:** [December 21, 2023, 3:06pm UTC](https://forum.inductiveautomation.com/t/perspective-svg-css-javascript-3rd-party-for-animating-movment-from-tags/83422/5 "2023-12-21T15:06:12Z")
Consider starting from the View Canvas component. ---
**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")
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. ---
**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:24am UTC](https://forum.inductiveautomation.com/t/perspective-svg-css-javascript-3rd-party-for-animating-movment-from-tags/83422/7 "2023-12-22T00:24:24Z")
A picture of the style property, in case that helps. Make sure the indentation matches, so `transition` is inside `style`. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/d/4d081a3047b65e07b04153ad7553ee35b70f8788.png)