JSFoo 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.

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

• How I made an Interactive, Scroll-Animations website load in less than 3 seconds! (Blogpost/Video) https://prashantsani.com/spider/2017/02/09/portfolio-website-2017-behind-the-scenes/
• Greensock Showcase: https://greensock.com/examples-showcases
• Mindsparkle Showcase: http://mindsparklemag.com/website/prashants-portfolio/
• Measure Performance with the RAIL Model: https://developers.google.com/web/fundamentals/performance/rail

Slides

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