# Zoom Container : zoom is centered on the element (perspective) **URL:** \ **Category:** Ignition\ **Tags:** perspective\ **Created:** [October 4, 2024, 9:06am UTC](https://forum.inductiveautomation.com/t/zoom-container-zoom-is-centered-on-the-element-perspective/96812 "2024-10-04T09:06:00Z")\ **Posts on this page:** 11\ **Page:** 1
**Author:** ![Ha99](https://avatars.discourse-cdn.com/v4/letter/h/7feea3/32.png) [@Ha99](https://forum.inductiveautomation.com/u/Ha99)\ **Post date:** [October 4, 2024, 9:06am UTC](https://forum.inductiveautomation.com/t/zoom-container-zoom-is-centered-on-the-element-perspective/96812/1 "2024-10-04T09:06:00Z")
Hi, In an embedded view I have an element1 that I call from a zoom view. for zoom I use CSS scale properties and transform x,y the question is how to know if the zoom is centered on the element to display it or not if for example I have a zoom of 160% I have access to the following property: pageXY, screenXY, scale, element1 XY, horizontal and vertical offset X/Y when zoomed ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/4/047b777b3a3dfbb7e27c4a0d2fade242ad93247b.png) ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [October 4, 2024, 11:13am UTC](https://forum.inductiveautomation.com/t/zoom-container-zoom-is-centered-on-the-element-perspective/96812/2 "2024-10-04T11:13:10Z")
plz label this post as perspective 🙂 What is your goal for the zoom? Could you show an example and usecase? Are you trying to pan and zoom on a whole view with mouse events? (terrible performance if you do this in jython) Or only on some specific targets after a button press? (why not just create a popup) ---
**Author:** ![Ha99](https://avatars.discourse-cdn.com/v4/letter/h/7feea3/32.png) [@Ha99](https://forum.inductiveautomation.com/u/Ha99)\ **Post date:** [October 4, 2024, 11:23am UTC](https://forum.inductiveautomation.com/t/zoom-container-zoom-is-centered-on-the-element-perspective/96812/3 "2024-10-04T11:23:59Z")
I have an embedded view with several zones, and I want when I zoom into zone 1 for example to display the elements of this zone ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/5/752a679e6c0f7364bb2778ea4de91d5f08854c17.png) ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [October 4, 2024, 11:25am UTC](https://forum.inductiveautomation.com/t/zoom-container-zoom-is-centered-on-the-element-perspective/96812/4 "2024-10-04T11:25:47Z")
> [@Ha99](#): > > when I zoom You do this by clicking on Z1 ? You should just open a new page with only Z1 in it ---
**Author:** ![Ha99](https://avatars.discourse-cdn.com/v4/letter/h/7feea3/32.png) [@Ha99](https://forum.inductiveautomation.com/u/Ha99)\ **Post date:** [October 4, 2024, 11:27am UTC](https://forum.inductiveautomation.com/t/zoom-container-zoom-is-centered-on-the-element-perspective/96812/5 "2024-10-04T11:27:54Z")
I can display elements for example if the scale is 2 but, except that this implies that all the elements of all the zones will be visible. Not with the click on zone 1, but rather with the wheel and play with the scale and xy of the page ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [October 4, 2024, 11:29am UTC](https://forum.inductiveautomation.com/t/zoom-container-zoom-is-centered-on-the-element-perspective/96812/6 "2024-10-04T11:29:28Z")
Your browser has a build in zoom function (ctrl+ wheel) , does this not do what you want? ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/f/bf9b4293d4334a5f490a2e402d417723506e74ea.png) ---
**Author:** ![Ha99](https://avatars.discourse-cdn.com/v4/letter/h/7feea3/32.png) [@Ha99](https://forum.inductiveautomation.com/u/Ha99)\ **Post date:** [October 4, 2024, 11:30am UTC](https://forum.inductiveautomation.com/t/zoom-container-zoom-is-centered-on-the-element-perspective/96812/7 "2024-10-04T11:30:46Z")
no I don't use that, I added css for the zoom only on the embedded view ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [October 4, 2024, 11:34am UTC](https://forum.inductiveautomation.com/t/zoom-container-zoom-is-centered-on-the-element-perspective/96812/8 "2024-10-04T11:34:09Z")
Trying to recreate a smooth frontend animation/zoom/panning in perspective with jython scripts is not good. the performance is going to be terrible because every move event has to go back and forth to the gateway, since very script runs on the gateway. Just adding a single fixed style `zoom:200%` is fine if that is what you want, but the centering and stuff should be done manualy with the scroll bars. Or you could try to trigger a compenent.focus() event, that usualy does bring you near it. ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [October 4, 2024, 11:40am UTC](https://forum.inductiveautomation.com/t/zoom-container-zoom-is-centered-on-the-element-perspective/96812/9 "2024-10-04T11:40:03Z")
It can only be done smoothly with JS, or by creating a custom perspective module. Someone made one that might be interesting for you. > [@Pan Zoom Container](https://forum.inductiveautomation.com/t/pan-zoom-container/75093): > > BIJC is pleased to announce its latest module, a Pan Zoom container for Perspective. There have been a number of outstanding examples of Pan Zoom using an XY container but these are very specific and generally require advanced scripting and CSS skills. BIJC container simplifies this process and allows the XY container to be responsive. In its simplest deployment, a developed XY container can be placed inside BIJCs Pan Zoom container and it will automatically fit to any screen size. If the deve… ---
**Author:** ![Ha99](https://avatars.discourse-cdn.com/v4/letter/h/7feea3/32.png) [@Ha99](https://forum.inductiveautomation.com/u/Ha99)\ **Post date:** [October 4, 2024, 11:55am UTC](https://forum.inductiveautomation.com/t/zoom-container-zoom-is-centered-on-the-element-perspective/96812/10 "2024-10-04T11:55:10Z")
in all cases it's just css I don't do anything in jython, thank you for your help ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [October 4, 2024, 11:59am UTC](https://forum.inductiveautomation.com/t/zoom-container-zoom-is-centered-on-the-element-perspective/96812/11 "2024-10-04T11:59:11Z")
No no no **you are** changing CSS with jython/expressions. (almost) Everything done in perspective goes through the gateway. This is not performant enough for any sort of frontend animations/zoom/motions. Use it sparingly! Do not change the css zoom (or any css) in **small** increments every time the user scrolls or moves his mouse.