Coraline/ Other Mother - Walking Animation

In this animation, we can move the Other Mother to the right, or to the left side using the control buttons.

Demo:

*to see the animation on the website click here.

What do you need to do?

You need to have a walking cycle image in .png format (for the training purposes you can use mine which I drew) and follow the steps below:

Add HTML
Add CSS
Add JavaScript/jQuery

Before you start – remember to add jQuery in your head section. You can read – how to add jQuery to HTML here.

Step1.

Add HTML

Draw the container, door, other Mother and the buttons.

<div class="other-mother">
  <div class="othermother"></div>
  <div class="shadow"></div>
  <div class="door"></div>
  <div class="knob"></div>
<button id ="go"> Walk </button>
<button id ="left"> Left </button> 
<button id ="right"> Right </button> 
</div>

Step2.

Add CSS

Set the colour the position of the background and elements:

body {
  background-color: #333;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;  
  overflow: hidden;
}

.other-mother {
  position: relative;
  top:-100px;
}

Style the door:

.shadow {
  position: relative;
  background-color: #eae2b7;
  width: 120px;
  height:170px;
  perspective: 100px;
}

.shadow:before {
  content:"";
  position: absolute;
  width: 370px;
  height:500px;
  background-color: #eae2b7;
  transform: rotateX(90deg) skew(55deg);
  top:115px;
  left:230px;
}

.shadow:after {
  content:"";
  position: absolute;
  background-color: #403d39;
  top:-20px;
  left:-20px;
  width: 90px;
  height: 210px;
  transform: rotateY(-30deg);
}

.door {
  position: absolute;
  width:0;
  height:0;
  border-left: 67px solid transparent;
  border-top:40px solid #eae2b7;
  top:0;
  left:0;
}

.door:before {
  content:"";
  position: absolute;
  width:200px;
  height:50px;
  background-color: #333;
  left:-100px;
  top:-90px;
}

.door:after {
  position: absolute;
  content:"";
  width:5px;
  height:181px;
  background-color: #292724;
  left:-3px;
  top:-1px;
}

.knob {
  position: absolute;
  background-color: #292724;
  width: 20px;
  height:7px;
  border-radius:10px;
  left:38px;
  top:125px;
  transform: rotate(30deg);
  box-shadow:1px 3px rgba(0,0,0,0.1);
}

.knob:before {
  content:"";
  position: absolute;
  height:5px;
  width:79px;
  background-color: #292724;
  top:-85px;
  left:-96px;
}

Add the Other Mother:

.othermother {
  z-index:100;
  top:45px;
  left:0;
  position: absolute;
  height: 224px;
  width: 130px; 
  background-image:url(
"https://lenadesignorg.files.wordpress.com/2020/05/1.png?w=1024"); 
}

Style the buttons:

button {
  text-align: center;
  background-color: #e5e5e5;
  border-radius:10px;
  font-size: 16px;
  color: #333;
  border: none;
  width:70px;
  transition: .2s;
  display: block;
  margin-left:200px;
  margin-top:-50px;
}

button:hover {
  background-color: #ef233c;
}

.left{
  transform: scaleX(-1); 
}

Step3.

Add JavaScript/jQuery

$(document).ready(function(){
  var leftButton = $("#left"); 
  var rightButton = $("#right"); 
  var goButton = $("#go"); 
  var walking = false; 
  var stepNum = 5; 
  var stepTimeout; 
  var divWindow = $(".othermother"); 
  var divPosition = 0; 
  var direction = 1; 
  var speed = 10; 
   
  goButton.click(function(){
    walking = (!walking) ? true : false; 
    if(walking){
      goButton.html("Stop"); 
      step();  
    } 
    else{
      goButton.html("Walk"); 
      clearTimeout(stepTimeout); 
    }
  });
  
  leftButton.click(function(){
    divWindow.addClass("left"); 
    direction = -1; 
  }); 
  
  rightButton.click(function(){
    divWindow.removeClass("left"); 
    direction = 1; 
  }); 
  
  function step(){
    divWindow.css("background-position", (-130 * stepNum) + "px"); 
    divPosition = divPosition + (direction * speed);
    divWindow.css("left", divPosition + "px"); 
    stepNum = (stepNum + 1) % 8; 
    stepTimeout = setTimeout(step, 750/speed); 
  }; 
});

Enjoy coding!

Share this: