JSFoo 2017

JSFoo is a conference about JavaScript and everything related.

Animating Dragons with JavaScript

Submitted by Prashant (@prashantsani) on Wednesday, 14 June 2017

videocam
Preview video

Technical level

Beginner

Section

Full Talk

Status

Submitted

Vote on this proposal

Login to vote

Total votes:  +5

Abstract

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.

Outline

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!)

Requirements

Prerequisites:

  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.

Links

Slides

https://www.slideshare.net/secret/6WpYfdQZONWycJ

Preview video

https://youtu.be/7NfPdUpPAAc

Comments

  • 1
    Sandhya Ramesh (@sandhyaramesh) Reviewer a year ago

    Hello! Thank you for submitting to JSFoo. In order to evaluate your proposal, we need your slide deck and a two minute self recorded preview video of you walking us through the talk. Please edit your proposal and add them at the earliest. Thanks.

  • 1
    Prashant (@prashantsani) Proposer a year ago

    can I do this tomorrow? (Friday)? as I am already working on couple of slides.

    • 1
      Sandhya Ramesh (@sandhyaramesh) Reviewer a year ago

      Any updates on this, Prashant?

  • 1
    Prashant (@prashantsani) Proposer a year ago

    Hey @sandhya, Will update this over weekend. Almost finalised my slides and video. Thanks.

    • 1
      Sandhya Ramesh (@sandhyaramesh) Reviewer a year ago

      Sure. Please ensure that both the slides and video are submitted.

Login with Twitter or Google to leave a comment