Jump to content

Rotation Animation Off-Center

Recommended Posts

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

 

Ephemora-Icon.gif

Screen Shot 2022-10-25 at 3.29.32 PM.png

Edited by knockout
Link to comment
  • Replies 2
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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

 

Ephemora-Icon.gif

Screen Shot 2022-10-25 at 3.29.32 PM.png

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

Edited by bangank36

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 2 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.