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

Question

I'm building a Shopify for my dog leash products. I had a cool idea to have an animated disappearing paw print path show up on random parts of the screen going in different directions, while avoiding any text. The animation would appear for a certain amount of time, for a certain frequency, and a certain number of simultaneous instances. Is there any suggestions or code to implement this animation with this type of behavior to the store's code? I don't have too much experience with website code, but I'm savvy enough to figure it out with some guidance and instruction.
Any help is greatly appreciated!
The most research I did was figuring out how to add an animation on scroll library but I'm not sure if that's in the right direction.

Answer 1

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>
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;
}
}
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/ngets/pen/qMXgrq
https://codepen.io/kylojen/pen/VxXXNm
https://codepen.io/trungk18/pen/BLYNmM