JSFoo 2017

JSFoo is a conference about JavaScript and everything related.



Animating Dragons with JavaScript

Submitted Jun 15, 2017

User experience(UX) has become an important aspect of our Apps and websites. As JavaScript developers, we can do our bit in enhancing UX of our interfaces by using rich, contextual animations. With a creative approach and a witty sense of humour, I am proposing a talk with an intention to enrich audience’s animation and creative skills.

My recent work on my portfolio website has been featured and showcased on Greensock Gallery and some of the notable design galleries. One of the best ways to spread my learnings on Greensock is through this conference talk. The primary audience for this talk would be JavaScript developers who are planning to utilise the creativity of Greensock, SVG and JavaScript.


Talk Outline

  1. SVG Noob to Ninja in 5 mins
  2. GSAP - Introduction and Basics, TweenMax, TimelineMax, API - 20 mins
  3. SVG.JS, ScrollMagic & Animating a SVG Dragon with GSAP- 15mins
  4. Using Vue.JS to customise our Dragon - 5 mins
  5. Questions, Suggestions, links.

Bonus Content:

  1. Animation Debugging (DevTools), Measuring performance using RAIL and Optimising Rendering Performance.
  2. Lots of movie references, A surprise for Harry Potter Fans :)

I will be working with a designer to create an Original Vector SVG Dragon, which will be used for the talk.

What’s so special about this talk?

This talk would not be a showcase of what I have done in JS, but rather focus on stories, inspirations and more importantly the “HOW” something can be done using Greensock.

There are very few talks and limited youtube videos which use the power of cognitive science to quickly lay down the fundamentals of GSAP. Rather than focussing on abstract things and use cases like FooBAR, this talk would focus more on real life web design challenges and scenarios without making the talk too dry for the audience.

(Video Introduction Coming soon!)



  1. Basic JavaScript knowledge: variables, functions, loops, callbacks, etc
  2. An Open Mind.

Speaker bio

Prashant Sani is a freelance front-end developer with an experience of over 5 years. He primarily works on utilising the power of HTML, CSS, SVG and JavaScript to create responsive and interactive website experiences.





{{ gettext('Login to leave a comment') }}

{{ gettext('Post a comment…') }}
{{ gettext('New comment') }}
{{ formTitle }}

{{ errorMsg }}

{{ gettext('No comments posted yet') }}