Center NodeBuds logo animation on mobile

[26samaahmed]

Fix #985

Screen.Recording.2024-04-09.at.11.19.59.PM.mov

[netlify]

✅ Deploy Preview for acmcsuf ready!

Name	Link
🔨 Latest commit	66160ff
🔍 Latest deploy log	https://app.netlify.com/sites/acmcsuf/deploys/661c3fc8ad5fb10008c0d538
😎 Deploy Preview	https://deploy-preview-1060--acmcsuf.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[JustinStitt]

Hi, I do not notice the same issue reported in #985 for mobile -- for me, the logo is pretty darn well centered on mobile.

With that being said, I think you're on the right track with your change; as far as making this animation look better.

Could we try reducing the side-to-side movement of this animation and have it spend more time in the center?

Here's an example (sorry the gif doesn't loop perfectly):

This was created with:

  .nodebuds-animation img {
    ...
    animation-timing-function: cubic-bezier(0, 0, 0, 0);
    ...
  }

  @keyframes slide {
    0% {
      left: -60px;
    }

    33% {
      left: -5px;
    }

    50% {
      left: 0;
    }

    66% {
      left: 5px;
    }

    100% {
      left: 60px;
    }
  }

[26samaahmed]

Hii, I updated the animation as suggested by reducing the side to side movement. Thank you for the suggestion, it looks better now.

Screen.Recording.2024-04-12.at.8.08.59.PM.mov

[karnikaavelumani]

This looks really clean! Nice work Sama ❤️

[karnikaavelumani]

Make sure to update the branch!