How to make a Prey on Animation

Lab | October 22, 2016 | 3 Comments



First of all, We need to know the full stage size and half stage size for the canvas drawing. So _sw, _sh is the stage size variable, and _cx, _cy is the half stage size variable. >> is a bitshift operator, x >> 1 is the same as Math.floor(x/2), but faster.


To draw the mouth animation, I’m using quadraticCurveTo for the mouth shape. During the animation, Y points (start, end, and control points) change, and we can make the mouth close/open animation using the points. For easy control of the animation, I made _guide object variable and added a tween to it. So _guide changes from 0 to 1, 0 is open mouse state, 1 is close mouse state.
Each Y points change from _open position to _close position, so using getCurrent function to get the right value. X = getCurrent(A, 10, 200); means, When A is changed 0 to 1, X changes from 10 to 200. You can set a tween to _points variable directly, in this case, I just wanted to control the animation both on Tween and mouse/finger move.
This is the code that set a tween to _points variable directly.


Draw a triangle for the tooth shape, and add grey color shadow area (1/4 width) to enhance the detail.


To draw teeth, we need to know each position of tooth on the curved line. You can get the position using the getPointOnQuad function, set the last p parameter from 0 to 1, 0 is the first point, 1 is the last point, so 0.5 is the middle point.
One important thing of the teeth drawing, the total number should be even. We are going to draw both upper and lower teeth, and the upper teeth mesh with lower teeth.
The drawing starts from 1, not 0, and draw upper and lower by turns. See the below image for better understanding.
Draw upper teeth with y1 and c1 variables when i is an odd number, draw lower teeth with y2 and c2 variables when i is an even number.
i / _teethTotal is used to get the tooth position on the curved line.
Drawing 2d objects on Canvas shows quite good performance, you don’t even need to use WebGL. This animation works well both on desktop and mobile devices. You can download all source code at my git.
This article is a part of my new book – Code Animation : Build Animated Websites with HTML, CSS, and JavaScript. I’m writing the book these days, I hope it will be published soon.


  • TweenLite by GreenSock – for Open and Close animation
  • js-signals by Miller Medeiros – for the controller events dispatch


Copyright (c) 2016 Jongmin Kim
Licensed under the MIT license.


  • +MON


Bhakti  October 26, 2016 at 4:45 AM

Great writing, can’t wait to read your new book. Hope it will be available in english :)

luoyu  October 26, 2016 at 5:10 PM

always wondering how could u make such amazing animation, this artical helps a lot, thanks!

Anzi  November 1, 2016 at 7:33 AM

This article is really helpful to me. Thank you so much!

Leave a Reply