I have an SVG that is basically a pie chart shape, with 20 slices. I would like to transition the color of the slices, but with each slice slightly delayed from the previous (sort of like a clock counting down or up). I've tried jquery and plain javascript, as well as css transitions with no luck. I've tried velocity as well, but all the slices still transition at the same time.
Here is my code:
var color1 = "#FF0000";
var slices = $("#s4-pie").find("path");
for (i = 0; i < slices.length; i++) {
var delay = (1000 * i);
$(slices[i]).velocity({ fill: color1, delay: delay, duration: 1000, loop: 1});
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.4.1/velocity.min.js"></script>
<div>
<svg id="s4-pie" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><defs id="defs"/><rect x="0" y="0" width="200" height="200" stroke="none" stroke-width="0" fill="#424242"/><g><path d="M100,100L100,10A90,90,0,0,1,123.29371405922686,13.066675633983849L100,100A0,0,0,0,0,100,100" stroke="#424242" stroke-width="1" fill="#633ab5"/></g><g><path d="M100,100L123.29371405922686,13.066675633983849A90,90,0,0,1,145,22.05771365940052L100,100A0,0,0,0,0,100,100" stroke="#424242" stroke-width="1" fill="#422480"/></g><g><path d="M100,100L145,22.05771365940052A90,90,0,0,1,163.63961030678928,36.36038969321073L100,100A0,0,0,0,0,100,100" stroke="#424242" stroke-width="1" fill="#24124a"/></g><g><path d="M100,100L163.63961030678928,36.36038969321073A90,90,0,0,1,177.94228634059948,55.00000000000001L100,100A0,0,0,0,0,100,100" stroke="#424242" stroke-width="1" fill="#15092e"/></g><g><path d="M100,100L177.94228634059948,55.00000000000001A90,90,0,0,1,186.93332436601617,76.70628594077314L100,100A0,0,0,0,0,100,100" stroke="#424242" stroke-width="1" fill="#633ab5"/></g><g><path d="M100,100L186.93332436601617,76.70628594077314A90,90,0,0,1,190,100L100,100A0,0,0,0,0,100,100" stroke="#424242" stroke-width="1" fill="#422480"/></g><g><path d="M100,100L190,100A90,90,0,0,1,186.93332436601617,123.29371405922686L100,100A0,0,0,0,0,100,100" stroke="#424242" stroke-width="1" fill="#24124a"/></g><g><path d="M100,100L186.93332436601617,123.29371405922686A90,90,0,0,1,177.94228634059948,145.00000000000003L100,100A0,0,0,0,0,100,100" stroke="#424242" stroke-width="1" fill="#15092e"/></g><g><path d="M100,100L177.94228634059948,145A90,90,0,0,1,163.63961030678928,163.63961030678928L100,100A0,0,0,0,0,100,100" stroke="#424242" stroke-width="1" fill="#422480"/></g><g><path d="M100,100L163.63961030678928,163.63961030678928A90,90,0,0,1,145,177.94228634059948L100,100A0,0,0,0,0,100,100" stroke="#424242" stroke-width="1" fill="#24124a"/></g><g><path d="M100,100L145,177.94228634059948A90,90,0,0,1,123.29371405922686,186.93332436601617L100,100A0,0,0,0,0,100,100" stroke="#424242" stroke-width="1" fill="#15092e"/></g><g><path d="M100,100L76.70628594077314,13.066675633983849A90,90,0,0,1,100,10L100,100A0,0,0,0,0,100,100" stroke="#424242" stroke-width="1" fill="#633ab5"/></g><g><path d="M100,100L54.99999999999996,22.057713659400534A90,90,0,0,1,76.70628594077314,13.066675633983849L100,100A0,0,0,0,0,100,100" stroke="#424242" stroke-width="1" fill="#15092e"/></g><g><path d="M100,100L36.360389693210706,36.36038969321073A90,90,0,0,1,54.99999999999996,22.057713659400534L100,100A0,0,0,0,0,100,100" stroke="#424242" stroke-width="1" fill="#24124a"/></g><g><path d="M100,100L22.05771365940052,54.99999999999999A90,90,0,0,1,36.360389693210706,36.36038969321073L100,100A0,0,0,0,0,100,100" stroke="#424242" stroke-width="1" fill="#422480"/></g><g><path d="M100,100L13.066675633983849,76.70628594077317A90,90,0,0,1,22.05771365940052,54.99999999999999L100,100A0,0,0,0,0,100,100" stroke="#424242" stroke-width="1" fill="#633ab5"/></g><g><path d="M100,100L10,100.00000000000001A90,90,0,0,1,13.066675633983849,76.70628594077317L100,100A0,0,0,0,0,100,100" stroke="#424242" stroke-width="1" fill="#15092e"/></g><g><path d="M100,100L13.066675633983863,123.29371405922689A90,90,0,0,1,10,100.00000000000001L100,100A0,0,0,0,0,100,100" stroke="#424242" stroke-width="1" fill="#24124a"/></g><g><path d="M100,100L22.05771365940052,145A90,90,0,0,1,13.066675633983863,123.29371405922689L100,100A0,0,0,0,0,100,100" stroke="#424242" stroke-width="1" fill="#422480"/></g><g><path d="M100,100L36.36038969321073,163.63961030678928A90,90,0,0,1,22.05771365940052,145L100,100A0,0,0,0,0,100,100" stroke="#424242" stroke-width="1" fill="#633ab5"/></g><g><path d="M100,100L55.00000000000002,177.94228634059948A90,90,0,0,1,36.36038969321073,163.63961030678928L100,100A0,0,0,0,0,100,100" stroke="#424242" stroke-width="1" fill="#15092e"/></g><g><path d="M100,100L76.70628594077313,186.93332436601617A90,90,0,0,1,55.00000000000005,177.9422863405995L100,100A0,0,0,0,0,100,100" stroke="#424242" stroke-width="1" fill="#24124a"/></g>
<g><path d="M100,100L100,190A90,90,0,0,1,76.70628594077313,186.93332436601617L100,100A0,0,0,0,0,100,100" stroke="#424242" stroke-width="1" fill="#422480"/></g><g><path d="M100,100L123.29371405922686,186.93332436601617A90,90,0,0,1,100,190L100,100A0,0,0,0,0,100,100" stroke="#424242" stroke-width="1" fill="#633ab5"/></g><g/></svg>
</div>How do you apply a delay to each element to be animated?
You seem to be calling velocity with the wrong syntax, it takes 2 arguments, the second contains things such as delay e.g.