How would I create this animation?

ian14 · ‎05-18-2025

its on here https://frogskateboards.com/

a little lady bug comes across the left side of the screen on a loop does anyone know how I could do something like this?

swym · ‎05-30-2025

Hi @ian14!

The animation can be easily created by using simple HTML and some CSS. Here’s a step-by-step guide to do this:

1. Open the Code Editor for the theme where you would like to apply the modifications as directed in the screenshot below.

2. Let’s create a new snippet to add these modifications. We suggest using a snippet so you can easily remove/include it as needed. The screenshot below shows how to create a new snippet.

3. Now, inside this file, paste in the below code:

<svg width="40" height="40" viewBox="0 0 40 40" id="my-little-bug">
  <g class="spider-legs">
     <path d="M8,12 Q2,8 1,5"></path>
     <path d="M6,16 Q1,14 0,12"></path>
     <path d="M6,20 Q1,22 0,25"></path>
     <path d="M8,24 Q2,28 1,32"></path>
     <path d="M32,12 Q38,8 39,5"></path>
     <path d="M34,16 Q39,14 40,12"></path>
     <path d="M34,20 Q39,22 40,25"></path>
     <path d="M32,24 Q38,28 39,32"></path>
  </g>
  <circle class="spider-abdomen" cx="25" cy="18" r="8"></circle>
  <circle class="spider-body" cx="15" cy="18" r="6"></circle>
  <circle fill="#ff4444" cx="12" cy="15" r="1.5"></circle>
  <circle fill="#ff4444" cx="18" cy="15" r="1.5"></circle>
</svg>
<style>
  :root{
    --my-bug-animation-speed: 5s; //increase this value to make the animation longer
    --my-bug-animation-orbit: 100px; //increase this value to make the orbit tighter
  }
  svg#my-little-bug {
    position: absolute;
    z-index: 3;
    left: 0;
    top: 50vh;
    animation: rotateCircular var(--my-bug-animation-speed) linear infinite;
  }

  @keyframes rotateCircular {
    from {
        transform: translateX(-50%) rotate(0deg) translateX(var(--my-bug-animation-orbit));
    }
    to {
        transform: translateX(-50%) rotate(360deg) translateX(var(--my-bug-animation-orbit));
    }
 }
</style>

Note: The reference store you shared is using a GIF, which you can’t use directly on your store due to privacy reasons. If you’re looking to change the icon, you can simply replace the SVG we added with the one you’d like to display.

4. Finally, let's render this file inside your theme layout file. Screenshot below for reference. This would work best if you include it right after the opening <body> tag.

And we’re done! Now, try checking your store to verify the changes. It should look something like:

If my response helped you, please consider giving it a like (👍) and marking it as an accepted solution if it resolved your issue. Your feedback helps other community members with similar questions.

Thank you!

Regards,

Aaryan from Swym

- Appreciate the assistance. Show your approval with a Like! And when your question finds its answer, seal the deal by marking it as an Accepted Solution!
- Our Solutions: Wishlist Plus | Swym Back in Stock Alerts | Swym Gift Lists and Registries

How would I create this animation?

How would I create this animation?

Community Blog Articles