Close Contact Form

Got a project in mind?

Let's talk.

    How Animations Bring Stories to Life?

    Published

    24 February 2020

    Reading time

    3 Minutes

    Surinder Avatar

    Author

    Surinder

    There are many different ways to tell a story. Television and film are two such examples of mediums used to bring stories to life, and there’s no denying that one engaging method of storytelling is through the use of animations or animated short stories. 

    The story of Kobe

    When it comes to promoting a brand, product or service, communicating any message in general, or even just talking about something a person did in their life, storytelling is an engaging and effective way to do that.

    A storyboard of pencil sketches of Kobe Bryant with handwritten notes.

     

    Kobe Bryant’s “Dear Basketball”

    Back in 2017, former American professional basketball player Kobe Bryant collaborated with the famed former Disney animator and illustrator, Glen Keane, to create a five-minute animated short film called Dear Basketball. The animation centres around a letter that Bryant had written to The Players’ Tribune in November 2015 that announced his retirement from basketball.

    Released in April 2017, Dear Basketball shared the same title as Bryant’s retirement letter and went on to win a coveted Academy Award in 2018 as well as other awards. During a talk at the Tribeca Film Festival in 2017, Bryant explained that he wanted to create an animation to help inspire children and young athletes. He went on to explain that inspiring young minds through animations helps stories “sink in more” than with words alone.

    “Dear Basketball.”
    Video Source: Dear Basketball (Facebook Watch).

     

    The animated short story got narrated by Bryant himself and tells the tale of a child whose world revolved around his love for basketball, and how he dreamt of one day becoming a pro-basketballer. During his animated short story, Bryant also talks about what drove him to success and why he decided it was time to call it a day on his 20-year professional basketball tenure.

    Bryant’s animation combines several techniques that he experimented with, such as animating sweat. In that example, he overlaid drawings with separate sheets of soft-layered graphite. He then used photographs from his smartphone, turning them into negatives and back again, giving the effect of sweat running down his face. He then used an eraser to create highlights and reveal the images underneath.

    A story is only ever as good as the way it gets executed. It doesn’t matter which message must be communicated. Animation is an excellent storytelling medium that marketers can embrace. 

    However, even though the Kobe Bryant story was created with an older stop motion type of animation, we are now experiencing the digital era, with new animation techniques like SVG animation, which brings new methods of storytelling to life.

     

    Animation techniques in web design

    In the digital era, there are a few different ways of animating content on web pages. For instance, CSS techniques can animate actions when hovering or clicking through content. Video animation is another example, using illustrations and animating them through various methods, such as how Kobe Bryant did with his Dear Basketball short animated story.

    Another interesting animation technique in web design is through the use of SVG (Scalable Vector Graphics) content. There are many ways to create SVG animations, depending on how complex these animations will be, you have the option of using simple CSS3 code to a variety of JavaScript plugins such as GSAP to bring any vector to life with a mixture of code and design. If you are building UI with animation, SVG and GSAP is one of the best ways to experience storytelling and design in the form of animation.

    The beauty of using SVG content instead of JPEG images, for instance, is that SVG graphics can get scaled to any size and still look crisp and sharp. It, therefore, comes as no surprise that such techniques in the post-Flash era of website animation help to engage website visitors. 

    Contact usWhite link arrow