Coraline/ Other Mother – Walking Animation

Some time ago I watched a movie Coraline (2009) and today I’ll show the animation with one of the main characters – Other Mother.

If you haven’t seen the movie I can truly recommend you to watch it.

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

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 in Adobe Animate CC) and follow the steps below:

1. Add HTML
2. Add CSS
3. 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="container">
<div class="othermother"></div>
<div class="door">
<div class="keyhole"></div>
  </div>
<button id = "go"> Walk </button>
<button id = "left"> Left </button> 
<button id = "right"> Right </button> 
  <p>Push the buttons to move the Other Mother.</p>
  </div>

Step2.

Add CSS

Set the colour, and position of the background, and the container:

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

.container {
  position: relative;
}

Style the door:

.door {
  position: absolute;
  width: 75px;
  height: 90px;
  background-color: #7E390B;
  top:23px;
  border: 5px solid #AEB77D;
  box-shadow:inset -10px 10px 0 rgba(0,0,0,0.07);
  z-index:-100;
}

.door:after {
  content:"";
  border-radius:50% 50% 0 0;
  position:absolute;
  width:300px;
  height:300px;
  background-color: rgba(0,0,0,0.07);
  z-index:-5;
  top:-100px;
  left:-55px;
}

.door:before {
  content:"";
  position: absolute;
  border-bottom: 105px solid rgba(0,0,0,0.09);
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  height: 0;
  width: 86px;
  top:95px;
  left:-30px;
  
}


.keyhole {
  position:absolute; 
  width:25px;
  height:25px;
  border-radius:50%; 
  background-color: #AEB77D;
  box-shadow:inset 3px -3px 0 rgba(0,0,0,0.07);
  top:35px;
  left:5px;
}
.keyhole:after {
  content:"";
  position: absolute;
  background-color: black;
  width:10px;
  height:10px;
  border-radius:50%;
  top:5px;
  left:7px;
}
.keyhole:before {
  content:"";
  position:absolute; 
  border-bottom: 15px solid black;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  height: 0;
  width: 2px;
  top:7px;
  left:6px;
}

Add the Other Mother:

.othermother {
  z-index:100;
  top:-35px;
  position: absolute;
  height: 224px;
  width: 130px; 
  background-image:url(
"https://lenadesign.org/wp-content/uploads/2020/05/1.png?w=1024"); 
  
}

button{
  margin-top: 200px; 
  background-color: #3498DB;
  display: inline-block;
  border: none;
  color: white;
  text-align: center;
  font-size: 16px;
  border-radius:20px;
  
}

.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); 
  }; 
}); 

To see the live output of the animation vist lenastanley.com.

Enjoy coding!