Door Rotating Animations help

Third party integrations Floorplan
1

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

2

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.

3

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.

4

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)

5

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 :frowning:

6

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;
}
}

1 Like
7

Thanks

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

8

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

9

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;
}
2 Likes
10

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

11

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

12

Perfect this fixed my issues thank you kindly

1 Like
13

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

  1. The fan gets moved to either the top left corner or the bottom right corner depending on what browser I use

  2. The fan icon turns gigantic when i turn it on and stays that size even after being turned off.

Any ideas?

14

Thanks a lot!! I was very helpfulā€¦