Close Contact Form

Got a project in mind?

Let's talk.

    Here at Cefar we take your privacy seriously and will only use your information to contact you.

    Read more

    However, from time to time we would like to contact you with details of services we provide and/or information which we believe may be of interest to you. If you consent to us contacting you for this purpose please tick this box:

    How Animations Bring Stories to Life?

    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. 

    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.

    Kobe Bryant Storyboard

     

    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 get 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 animation, 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.