Task:  Choose a scene from a fairy tale or a movie and re-create it as an interactive animation. You should have a JavaScript function triggered by an user interaction (ex: “click”) and make it visible/obvious to the viewer as to what he/she needs to do in order to interact with it.


The scene I decided on doing:

I took a scene from one of my favorite movies (“Ramona and Beezus”) where little Ramona (9 years old) is auditioning for a part in a Peanut Butter Commercial but fails terribly.

How it works:

Ramona comes into the stage wearing a tiara made out of burrs and is pretty confused when it comes with what she needs to do when the jury tells her to “Twirl”. Click on her when she becomes transparent in order to help her figure it out and continue her audition and fail terribly! .


For coding this animation I have used functions that were triggered one after another once the audio from one function would finish playing. There were about 1-2 functions that were triggered by the finished animation from the function before and one triggered by “click”.

Most of the functions were based on changing the <div>s’ proprieties (in most cases the background-image of it, which sometimes was an actual CSS animation).

As for the design part, I used elements in background (+the main character) made by myself (except the picture with the studio in the back which I have got from Google and Photoshop-ed it) in Illustrator.

I used one main background picture:


And a separate <div> for the giant sandwich which plays the role of a background element until the end of the scene when Ramona falls into it and it closes, having an image of Ramona laying in it as part of the same <div> while Ramona’s separate <div> becomes invisible, giving the viewer the impression that one “character” eats the other one.


Therefore, at the end of the animation the sandwich actually becomes a character.

sandwichclosespritesheet(sandwich closing over Ramona Sprite Sheet)


In the end the only character’s <div> visible will be the sandwich’s – which contains the image of Ramona.

This is a separate <div> background-image as the sandwich stays closed when it’s animation has finished running once.

Ramona’s sprite sheets:





And static image:


What I could have done better:

I wanted to add an another <div> over the scene with the jury in the foreground:


But I could not do it because by being over Ramona’s <div> it made it impossible to click on it so the user could interact with her! – This is a disadvantage because the jury’s voices in the animation come out of nowhere and makes the viewer confused as to what is actually happening.

The voices are actually cut from a movie scene that is quite a little bit longer than the animation I made so the voices are cut and the disruption in sound is a little bit unpleasant for the ear.

The moment when Ramona should be clicked in order to continue the animation it is not that obvious that she needs help to continue (other than the part when she becomes transparent) – a more confused look on her face, arrows or question marks over her head maybe could have been helpful on that matter.

Link:  http://www.toonstalesandtools.com/interactiveanimation/interactiveanimation.html