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.

Demo:

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!