“Plain and simple is great”, but may not really be applicable for web pages. In this digital era, with better internet and faster, better modern browsers, we can do better - build interactive and beautiful websites. Animations are one way of achieving it and this talk covers the 5 WH questions - What, Why, Where, When, and How of animations in React applications!

Animations elevate the overall experience of web pages injecting a sense of motion and generating a dynamic and flowing user experience. They can be a great addition but if not done properly, can lead to performance issues, ugly, and eventually degrade the complete experience.

This workshop will cover the following aspects:

1. How to identify the apt animation framework for your application.
2. The common “Oops and Aahhs!” (mistakes) while using animations.
3. How to optimize the project bundle size using the code splitting technique
4. How to decide where and where to add different kinds of animations - CSS-based or JS-based or leverage Lottie files.
5. The common types of animations - animating elements, on scroll animations, route animations, etc.
6. The Dos and Don’ts of adding animation to your website
7. The best practices for writing animations in your code

I will also be sharing my experience building apps with animations at Razorpay and share the learnings, pitfalls, and struggles :)