Seeking assistance on integrating category icons with animations using snap.svg in a Wordpress page.
- I have inserted a div containing an svg within the loop that generates the page (index.php). The divs display correctly with the appropriate size of the svg, but they appear blank.
- The svg has a class targeted by the js file.
- The js file is functioning correctly independently, however, the animation only displays in the first div of that class and replicates based on the number of posts within that category present on the page.
I attempted to use "each()" function at the start of the js script, but it does not position the animations correctly. I also experimented with adding double "each()" for svg location and including the snap object in the svg itself without success.
I tried assigning unique ids to each svg using the post-id, but couldn't figure out how to pass the id from the loop to the js file due to my limited php and js skills.
If you have a solution to this issue, please provide your insights. Thank you!
// Below is a snippet of the js code (trimmed for brevity):
jQuery(document).ready(function(){
jQuery(".d-icon").each(function() {
var dicon = Snap(".d-icon");
var dfirepath = dicon.path("M250 377 C"+ ......+ z").attr({ id: "dfirepath", class: "dfire", fill: "none", });
function animpath(){ dfirepath.animate({ 'd':"M250 377 C"+(Math.floor(Math.random() * 20 + 271))+ .....+ z" }, 200, mina.linear);};
function setIntervalX(callback, delay, repetitions, complete) { var x = 0; var intervalID = window.setInterval(function () { callback(); if (++x === repetitions) { window.clearInterval(intervalID); complete();} }, delay); }
var dman = dicon.path("m136 ..... 0z").attr({ id: "dman", class:"dman", fill: "#222", transform: "r70", });
var dslip = dicon.path("m307 ..... 0z").attr({ id: "dslip", class:"dslip", fill: "#196ff1", transform:"s0 0"});
var dani1 = function() { dslip.animate({ transform: "s1 1"}, 500, dani2); }
var dani2 = function() { dman.animate({ transform: 'r0 ' + dman.getBBox().cx + ' ' + dman.getBBox(0).cy, opacity:"1" }, 500, dani3 ); }
var dani3 = function() { dslip.animate({ transform: "s0 0"}, 300); dman.animate({ transform: "s0 0"}, 300, dani4); }
var dani4 = function() { dfirepath.animate({fill: "#d62a2a"}, 30, dani5); }
var dani5 = function() { setIntervalX(animpath, 200, 10, dani6); }
var dani6 = function() { dfirepath.animate({fill: "#fff"}, 30); dman.animate({ transform: "s1 1"}, 100); }
dani1(); }); });