Door Rotating Animations help

lerroy_b · February 10, 2018, 1:17am

Hi all

I have been using a few door animations that I set-up a while back triggered from door sensors. They were working all OK
Just recently they have been flying off the screen and the anchor point seems to not be working, animation still triggers and color change works but not opening from top corner. I have recently upgraded floorplan / HASSio and moved some yaml files around to tidy up my structure, but not sure why its happening.

CSS

@keyframes rotate-90 {
	100% {
		transform: rotate(-90deg);
	}
}

@keyframes rotateReset-90 {
	0% {
		transform: rotate(-90deg);
	}
	100% {
		transform: none;
	}
}



/* Doors that open to the top left */
#binary_sensor\.door_sensor_1_sensor {
  transform-origin: top left;
}

.door_closed {
  fill: #00ccff !important;
  fill-opacity: 1;
  animation-duration: 2s;
  animation-name: rotateReset-90;
}

.door_open {
  fill: rgb(185, 142, 134) !important;
  fill-opacity: 1;
  animation-duration: 2s;
  animation-name: rotate-90;
  animation-fill-mode: forwards;
}

yaml

    #  DOORS  #
  - name: Doors
    entities:
      - binary_sensor.door_sensor_1_sensor
    states:
      - state: 'off'
        class: 'door_closed'
      - state: 'on'
        class: 'door_open'

thanks

Zepixir · February 10, 2018, 3:35pm

I was just about to make excactly the same topic, since I have the same problem.
I am pretty sure the problem is because google chrome recently changed to version 64.
But I have no idea how to fix the problem.

JTPublic · February 11, 2018, 1:53am

I have tried the transform: rotate also but found it temperamental, still have not figured out if it’s the svg object size/shape/position or the whole svg.
You may have to play with “transform-origin” to get a fix on the hinge side of the door.

lerroy_b · February 11, 2018, 2:41am

Hi, you could be right, I did try it in fully kiosk browser, firefox and edge all with the same results though (although edge shows no animation)

lerroy_b · February 11, 2018, 2:43am

Thanks

I’m no expert in CSS animations or yaml really I have just started with Hass/io so not sure where to go with the transform origin, i tried top right etc…

I went back to an older backup of my SVG, still same issue.
I also created a entirely new one with just a door the same results

JTPublic · February 11, 2018, 4:28am

Never really got the rotate to work consistently myself, lol.
Would have been something like:

@keyframes rotateReset-90 {
0% {
transform-origin: 50% 50%;
transform: rotate(-90deg);
}
100% {
transform: none;
}
}

lerroy_b · February 11, 2018, 4:48am

Thanks

It was working perfectly and very consistent with the code I had, I gave yours a try though, but no luck

Zepixir · February 11, 2018, 1:48pm

Need to be the chrome update. Tried now with chrome on an old laptop, Version 58 of chrome, the animation works perfectly there.

wuench · February 11, 2018, 2:48pm

My animations are still working in Chrome 64. Not sure if it will help you guys, but I had some issues with my ceiling fan rotation spinning off the screen on android chrome. I recently added the ‘transform-box:filil-box;’ change to fix:

@-webkit-keyframes rotation {
from {
    -webkit-transform: rotate(0deg);
}
to {
    -webkit-transform: rotate(359deg);
 }
}

.fan-off {
  fill: #E6E6E6 !important; }


.fan-on {
  fill: #5273a8 !important;
  transform-origin:  center;
  transform-box: fill-box;
  -webkit-animation: rotation 2s infinite linear;
}

Zepixir · February 11, 2018, 4:54pm

Thank you! Adding the line transform-box: fill-box; fixes the problem

JTPublic · February 11, 2018, 7:23pm

Excellent!!
Fixed mine in the panel also.
But, is it just me, that does not work in the card.

lerroy_b · February 12, 2018, 3:06am

Perfect this fixed my issues thank you kindly

3vasi0n · December 1, 2018, 6:37am

So the transform-box: fill-box helped with my fan moving all around the screen but i’m still having two issues.

The fan gets moved to either the top left corner or the bottom right corner depending on what browser I use
The fan icon turns gigantic when i turn it on and stays that size even after being turned off.

Any ideas?

Tipi · January 27, 2019, 7:53pm

Thanks a lot!! I was very helpful…

Mythril · October 5, 2024, 9:12pm

I know it’s a very late reply, but I was having the same issue just now and found this thread. In any case I eventually found a solution, so I thought I might as well add it here in case someone else finds this thread later.

In my case it was because Adobe Illustrator had used a transform to position the PNG instead of using the XML tag’s X and Y attributes. So when the CSS modified the transform options, that also affected the positioning…

I inserted the PNG using Inkscape instead, which used proper X and Y attributes instead of a transform, but while I was doing that I accidentally changed the SVG file enough that my floorplan setup stopped working properly.

In the end I edited the SVG file manually and copied the fixed tag from the Inkscape copy. You may even be able to just manually replace the transform attribute with X and Y attributes.

Example:

Broken animation:
<image
    style="overflow:visible;"
    width="16"
    height="16"
    id="image.fan"
    xlink:href="data:image/png;base64,[REMOVED FOR BREVITY]"
    transform="matrix(0.75 0 0 0.75 120 76.0833)">
</image>

Fixed animation:
<image
   width="12.529571"
   height="12.529571" 
   xlink:href="data:image/png;base64,[REMOVED FOR BREVITY]"
   id="image.fan"
   x="119.88966"
   y="76.04734" />

Edit: I found out that Inkscape messed up my SVG file, updated the text.