Nov 20, 2022

# Solution 1 :

If you are looking for the reason why the steps are not resetting after the interval runs, it is because you need to reset the margins back to the starting point.

Add this to the start of callMe()

``````  \$(".leftfoot").css('margin-top', '250px');
\$(".rightfoot").css('margin-top', '300px');
``````

Update

I made a few changes to the way the steps work in the JavaScript. This should make the steps work smoother and you will not have so many timeouts to work with, just the interval. You can adjust the totalSteps, stepDistancePX, and stepStartPX to make the steps travel a further distance or take bigger or smaller steps.

``````var steps = {
stepLengthMS : 500,
stepDelayMS : 200,
totalSteps : 6,
stepDistancePX : 200,
stepStartPX : 300,
currentStep : 0
};

step();
setInterval(step, steps.stepLengthMS + steps.stepDelayMS);

function step() {
if (steps.currentStep == 0) {
\$(".rightfoot").hide();
\$(".leftfoot").hide();
} else {
var isRightFoot = (steps.currentStep % 2) == 1;
var topPX = steps.stepStartPX - parseInt((steps.stepDistancePX / (steps.totalSteps - 1)) * steps.currentStep);

if (isRightFoot) {
\$(".rightfoot").css('margin-top', topPX+'px');
} else {
\$(".leftfoot").css('margin-top', topPX+'px');
}
}

steps.currentStep++;
if (steps.currentStep > steps.totalSteps) {
steps.currentStep = 1;
}
}
``````

The CSS and HTML is the same.

# Problem :

I’m using jQuery to create animated footprints as you can see in this Codepen.

My goal is to achieve repeatedly footsteps animation, but once the `CallMe()` function repeat, the footsteps confused themselves.

I’ve used `setInterval()` to loop the animation, based on time I’ve calculated, but the code output is fails to execute properly.

``````\$(document).ready(function() {
callMe();
setInterval(callMe, 2700);
});
function callMe() {
//step 1
//step 2
setTimeout(function() {
\$(".leftfoot").css('margin-top', '200px');
}, 700);
setTimeout(function() {
\$(".rightfoot").css('margin-top', '250px');
}, 700);
//step 3
setTimeout(function() {
\$(".leftfoot").css('margin-top', '150px');
}, 1500);
setTimeout(function() {
\$(".rightfoot").css('margin-top', '200px');
}, 1500);
}``````
``````body {
}

.leftfoot {
background-image: url("https://cdn.onlinewebfonts.com/svg/img_432519.png");
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center;
width: 30px;
height: 60px;
display: inline-block;
margin-top: 250px;
position: absolute;
}

.rightfoot {
margin-top: 300px;
background-image: url("https://www.shareicon.net/data/128x128/2016/06/18/596019_right_512x512.png");
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center;
width: 60px;
height: 60px;
margin-left: 30px;
display: inline-block;
position: absolute;
}``````
``````<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<center>
<div class="leftfoot"></div>
<div class="rightfoot"></div>
</center>
</body>``````

Is there more effective way to loop the footsteps?

### Comment posted by Korgrue

Personally, I would use an animation library like GSAP so that you can time all your concurrent animations properly.

### Comment posted by Libra

The example you linked to is doing the same thing you are describing, seems to be an issue with this logic anyways

### Comment posted by Yotam Dahan

@Laif Yes, but once repeated it’s not the same like the first run.

### Comment posted by Libra

@YotamDahan Not sure what the difference is but it looks broken to me on any run

### Comment posted by jwatts1980

Are you trying to fix the issue with the steps not resetting or are you looking for a more effective way to do it? I see the issue with the steps not resetting.

### Comment posted by Yotam Dahan

Thank you, great logical thinking! hope to get there one day.