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');
$('.rightfoot').fadeIn('fast');
$('.rightfoot').delay(steps.stepLengthMS).fadeOut('fast');
} else {
$(".leftfoot").css('margin-top', topPX+'px');
$('.leftfoot').fadeIn('fast');
$('.leftfoot').delay(steps.stepLengthMS).fadeOut('fast');
}
}
steps.currentStep++;
if (steps.currentStep > steps.totalSteps) {
steps.currentStep = 1;
}
}
The CSS and HTML is the same.
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
$('.leftfoot').fadeIn('fast');
$('.leftfoot').delay(500).fadeOut('fast');
$('.rightfoot').fadeIn('fast');
$('.rightfoot').delay(500).fadeOut('fast');
//step 2
setTimeout(function() {
$(".leftfoot").css('margin-top', '200px');
$('.leftfoot').fadeIn('fast');
$('.leftfoot').delay(500).fadeOut('fast');
}, 700);
setTimeout(function() {
$(".rightfoot").css('margin-top', '250px');
$('.rightfoot').fadeIn('fast');
$('.rightfoot').delay(500).fadeOut('fast');
}, 700);
//step 3
setTimeout(function() {
$(".leftfoot").css('margin-top', '150px');
$('.leftfoot').fadeIn('fast');
$('.leftfoot').delay(500).fadeOut('fast');
}, 1500);
setTimeout(function() {
$(".rightfoot").css('margin-top', '200px');
$('.rightfoot').fadeIn('fast');
$('.rightfoot').delay(500).fadeOut('fast');
}, 1500);
}
body {
background-image: url("http://www.thevideogenius.com/wordpress/wp-content/uploads/2011/10/Chalkboard-Website-Background-measure-3.png");
}
.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?
Personally, I would use an animation library like GSAP so that you can time all your concurrent animations properly.
The example you linked to is doing the same thing you are describing, seems to be an issue with this logic anyways
@Laif Yes, but once repeated it’s not the same like the first run.
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.
Thank you, great logical thinking! hope to get there one day.
