Rotation Animation Off-Center

URL: https://roadrunner-echidna-9e76.squarespace.com/

PW: ephemora2k22

Location of image in question is the red logo in the footer.

I'm trying to create an animated logo in my footer. I have two parts to the logo:

• The background consists of a red circle with our brand initial in it; this should remain static.
• The foreground has some text in a circle and a transparent background; this should rotate 360 degrees.

I've attached a GIF showing what the final result should look like.

I've run into the problem of applying multiple transforms to one element: I'm not able to both position the foreground image AND give it a keyframe rotation animation, because I can't apply two transform properties (transform:translate and transform:rotate) at the same time. So, my solution is to use a spacer block instead of code to position the foreground image, and only apply transform:translate to the background image, which is set to position:absolute.

While I'm not too worried (yet, knock on wood) about positioning the background image to always be centered behind the foreground image, where I'm having trouble is in the rotation animation. My foreground image is a perfect square, and the text is perfectly centered within it. However, if you view the animation as it currently is, you'll see that the foreground seems to be rotating around a point subtly off of center. I have no clue where to start with this. If inspected, I'm seeing some inline code stating that the "data-image-focal-point" is set to 0.5,0.5 instead of 0,0 (see screenshot). Could this have some effect? I have no idea how to affect code written inline like that.

CSS as it currently exists:

//background and note i have not set these transforms yet and they are mostly just placeholders
#block-yui_3_17_2_1_1666705251314_15319 {
  position: absolute;
  @media screen and (min-width:1200px) {
    width: 13.5vw;
    transform: translate(0vw, -24vh);
  }
  @media screen and (min-width:768px) and (max-width:1199px) {
    width: 14vw;
    transform: translate(-1vw, -18vh);
  }
  @media screen and (max-width:767px) {
    width: 40vw;
    transform: translate(-1vw, -18vh);
  }
}
//foreground
@keyframes turn {
  100% {
    transform: rotate(360deg);
    transform-origin: center center;
  }
}
#block-yui_3_17_2_1_1612994196729_21815 {
  width: 180px;
  height: 180px;
  z-index: 10;
  animation: turn 20s linear infinite;
}

On 10/25/2022 at 9:33 PM, knockout said:

URL: https://roadrunner-echidna-9e76.squarespace.com/

PW: ephemora2k22

Location of image in question is the red logo in the footer.

I'm trying to create an animated logo in my footer. I have two parts to the logo:

• The background consists of a red circle with our brand initial in it; this should remain static.
• The foreground has some text in a circle and a transparent background; this should rotate 360 degrees.

I've attached a GIF showing what the final result should look like.

I've run into the problem of applying multiple transforms to one element: I'm not able to both position the foreground image AND give it a keyframe rotation animation, because I can't apply two transform properties (transform:translate and transform:rotate) at the same time. So, my solution is to use a spacer block instead of code to position the foreground image, and only apply transform:translate to the background image, which is set to position:absolute.

While I'm not too worried (yet, knock on wood) about positioning the background image to always be centered behind the foreground image, where I'm having trouble is in the rotation animation. My foreground image is a perfect square, and the text is perfectly centered within it. However, if you view the animation as it currently is, you'll see that the foreground seems to be rotating around a point subtly off of center. I have no clue where to start with this. If inspected, I'm seeing some inline code stating that the "data-image-focal-point" is set to 0.5,0.5 instead of 0,0 (see screenshot). Could this have some effect? I have no idea how to affect code written inline like that.

CSS as it currently exists:

//background and note i have not set these transforms yet and they are mostly just placeholders
#block-yui_3_17_2_1_1666705251314_15319 {
  position: absolute;
  @media screen and (min-width:1200px) {
    width: 13.5vw;
    transform: translate(0vw, -24vh);
  }
  @media screen and (min-width:768px) and (max-width:1199px) {
    width: 14vw;
    transform: translate(-1vw, -18vh);
  }
  @media screen and (max-width:767px) {
    width: 40vw;
    transform: translate(-1vw, -18vh);
  }
}
//foreground
@keyframes turn {
  100% {
    transform: rotate(360deg);
    transform-origin: center center;
  }
}
#block-yui_3_17_2_1_1612994196729_21815 {
  width: 180px;
  height: 180px;
  z-index: 10;
  animation: turn 20s linear infinite;
}

 

If you have already the GIF file, I wonder why you don't upload it directly on your site

On 10/27/2022 at 2:23 PM, bangank36 said:

If you have already the GIF file, I wonder why you don't upload it directly on your site

Because it's a circle, and the edges have a jagged white outline, visible against our blue footer background.