animation - shopify dawn theme, animate disappearing paw prints to appear in background?

Solution:

It's not simple like you think. You can't just copy some code and it will work. It is tricky and requires customization based on which theme you are using and how it's structured.

But if you know a little bit of CSS and JS i think you can get away with it by modifying the code below:

The HTML:

<svg id="svg-sprite">
    <symbol id="paw" viewBox="0 0 249 209.32">
        <ellipse cx="27.917" cy="106.333" stroke-width="0" rx="27.917" ry="35.833"/>
        <ellipse cx="84.75" cy="47.749" stroke-width="0" rx="34.75" ry="47.751"/>
        <ellipse cx="162" cy="47.749" stroke-width="0" rx="34.75" ry="47.751"/>
        <ellipse cx="221.083" cy="106.333" stroke-width="0" rx="27.917" ry="35.833"/>
        <path stroke-width="0" d="M43.98 165.39s9.76-63.072 76.838-64.574c0 0 71.082-6.758 83.096 70.33 0 0 2.586 19.855-12.54 31.855 0 0-15.75 17.75-43.75-6.25 0 0-7.124-8.374-24.624-7.874 0 0-12.75-.125-21.5 6.625 0 0-16.375 18.376-37.75 12.75 0 0-28.29-7.72-19.77-42.86z"/>
    </symbol>
</svg>

<div class="ajax-loader">
    <div class="paw"><svg class="icon"><use xlink:href="#paw" /></svg></div>
    <div class="paw"><svg class="icon"><use xlink:href="#paw" /></svg></div>
    <div class="paw"><svg class="icon"><use xlink:href="#paw" /></svg></div>
    <div class="paw"><svg class="icon"><use xlink:href="#paw" /></svg></div>
    <div class="paw"><svg class="icon"><use xlink:href="#paw" /></svg></div>
    <div class="paw"><svg class="icon"><use xlink:href="#paw" /></svg></div>
</div>
Copy code

The CSS:

.ajax-loader{
    position: absolute;
    top: 25%;
    left: 50%;
    transform-origin: 50% 50%;
    transform: rotate(90deg) translate(-50%, 0%);
    font-size: 50px;
    width: 1em;
    height: 3em;
    color: #d31145;

    .paw{
        width: 1em;
        height: 1em;
        animation: 2050ms pawAnimation ease-in-out infinite;
        opacity: 0;
        
        svg{
            width: 100%;
            height: 100%;
        }
        
        .icon{
            fill: currentColor;
        }

        &:nth-child(odd){
            transform: rotate(-10deg);
        }

        &:nth-child(even){
            transform: rotate(10deg) translate(125%, 0);
        }

        @for $i from 1 through 6{
            &:nth-child(#{$i}){
                animation-delay: #{ (($i * -1)+6)*0.25 }s;
            }
        }

        .no-cssanimations &{
            opacity: 1;
        }
    }
}

@keyframes pawAnimation {
    0%{
        opacity: 1;
    }
    50%{
        opacity: 0;
    }
    100%{
        opacity: 0;
    }
}
Copy code

This code is one of the 4 examples i found online, i hope they can help you:

https://codepen.io/motionimaging/pen/MKrQXa (https://codepen.io/motionimaging/pen/MKrQXa)

https://codepen.io/ngets/pen/qMXgrq (https://codepen.io/ngets/pen/qMXgrq)

https://codepen.io/kylojen/pen/VxXXNm (https://codepen.io/kylojen/pen/VxXXNm)

https://codepen.io/trungk18/pen/BLYNmM (https://codepen.io/trungk18/pen/BLYNmM)

Didn't find the answer?

Our community is visited by hundreds of Shopify development professionals every day. Ask your question and get a quick answer for free.