# No Animation Knowledge!

**URL:** <https://forum.inductiveautomation.com/t/no-animation-knowledge/53636>\
**Category:** Ignition\
**Created:** [December 1, 2021, 5:45pm UTC](https://forum.inductiveautomation.com/t/no-animation-knowledge/53636 "2021-12-01T17:45:15Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![ryanastiefes](https://avatars.discourse-cdn.com/v4/letter/r/47e85d/32.png) [@ryanastiefes](https://forum.inductiveautomation.com/u/ryanastiefes)\
**Post date:** [December 1, 2021, 5:45pm UTC](https://forum.inductiveautomation.com/t/no-animation-knowledge/53636/1 "2021-12-01T17:45:15Z")

</div>

Platform = 7.8.0

Hopefully someone can steer me in the right direction.

![KLOG Pic](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/6/e6bda82607bfeb6a9d51593e1757144ad90b5437.png)

I have two levels on each side of the filter. The filter is the white bar that divides the two levels. The filter will pivot on the lower right hand side of the level indicators in a 90 degree swing “so 0 to 90 degrees”, it’s sitting at 45 degrees now. I have two level indicators sitting on top of each other which would portray the levels on each side of the filter. I have drawn up what I want the image to look like when the filter at 45 degrees and the left level is lower than the right level.  
My problem is only portraying the level on it’s given side of the filter while blocking out the other side.  
I’ve tried layering the two level indicator, I’ve tried drawing a rectangle and dynamically moving the Y and Height coordinates but nothing works good enough for a representable image.  
Hopefully someone has done something like this and can navigate me into the correct direction

---

<div class="post-metadata">

**Author:** ![witman](https://avatars.discourse-cdn.com/v4/letter/w/d2c977/32.png) [@witman](https://forum.inductiveautomation.com/u/witman)\
**Post date:** [December 1, 2021, 6:19pm UTC](https://forum.inductiveautomation.com/t/no-animation-knowledge/53636/2 "2021-12-01T18:19:55Z")

</div>

I'd use the paintable canvas for this, drawing each half and clipping the part that would overlap the other half. This thread should give you a starting point to work from:

> [@Animate Fill Level On Irregular Shaped Component](https://forum.inductiveautomation.com/t/animate-fill-level-on-irregular-shaped-component/15740/2):
>
> The quick and dirty solution would be to place background-colored, borderless empty objects in front of the level indicator to obscure it where the irregular steps are. The precision solution would be to draw exactly what you need with the paintable canvas.

---

<div class="post-metadata">

**Author:** ![ryanastiefes](https://avatars.discourse-cdn.com/v4/letter/r/47e85d/32.png) [@ryanastiefes](https://forum.inductiveautomation.com/u/ryanastiefes)\
**Post date:** [December 1, 2021, 8:56pm UTC](https://forum.inductiveautomation.com/t/no-animation-knowledge/53636/3 "2021-12-01T20:56:28Z")

</div>

Thanks for the info. I’m heading the paintable canvas way