How can I make my logo spin?

[ferverco]

for reference: petalsandpeacocks.com

I already have the code thanks to google gemini.

// Get a reference to the logo element
const logo = document.getElementById("logo");

// Function to handle the scroll event and rotate the logo
function handleScroll() {
  // Get the current scroll position
  const scrollPosition = window.pageYOffset;

  // Get the total document height and viewport height
  const docHeight = document.documentElement.scrollHeight;
  const viewportHeight = window.innerHeight;

  // Calculate the rotation angle based on scroll position
  const rotationAngle = (scrollPosition / (docHeight - viewportHeight)) * 360;

  // Apply the rotation transformation to the logo
  logo.style.transform = `rotate(${rotationAngle}deg)`;
}

// Add a scroll event listener to the window
window.addEventListener("scroll", handleScroll);

This method involves editing your Shopify theme files directly. Here’s how to do it:

• Access Theme Code: Go to your Shopify admin panel, navigate to Online Store > Themes. Click Customize on your chosen theme.
• Locate Template: In the theme editor, click on Actions > Edit code. Locate the template file responsible for your website header section (usually header.liquid or a similar name).
• Add Script Tag: Find the closing tag in the template code. Just before this tag, paste the following code snippet:

<script>
  // Paste your JavaScript code for the spinning logo here
</script>

So now I just need to be able to give my logo element a unique ID but this is where I get stuck.

Any help is much appreciated

[EBOOST]

Hi @ferverco ,

May I suggest to update code these steps:

1. Go to Store Online-> theme → edit code

2. Sections/header.liquid

3. find “header__heading-logo motion-reduce”

4. Add “id: ‘logo’,” likes the screenshot below

If petalsandpeacocks.com is your store. You only need replace code

From

const logo = document.getElementById("logo");

To

const logo = document.getElementById("rotate3D");