SVG + JS + UX => Functional Animation

It's no longer "Animation on the web" ... the trend is "Animation of the Web." Whether expanding page elements to show more detail, using layers to make a complex topic simple, viewing real-time metrics and BI graphics, or page elements that keep users oriented to a site's Information Architecture and flow, vector images are not just for fancy icons and scalable logos anymore. This talk explores the six tools for bringing movement to your layouts in a way that supports your brand, enhances user comfort and improves their experience, while reducing footprint and enhancing overall performance. Guidelines will be shared for selecting the optimum tools for a particular task, including when in the context of popular DOM manipulation frameworks like VUE and REACT. Demos will range from simple native CSS transforms and using the emerging Web Animation API, to illustrating complex ideas using BI tools like D3 and Chartist. Following the survey of technologies, we will have a deep dive into example implementations for an actual client project as a case study to contrast the animation techniques and highlight the few cross-browser and cross-platform implementation issues you need to avoid in your projects. We will end with exploring Greensock's SVGMorph and SVGDraw plugins. There is a reason GSAP has quickly become the go-to tool for fast, browser-stable production solutions. [449]

Comments

Comments are closed.