Saurabh Nandwana

Thank you so much Zach :) I appreciate you paying your attention on this. The idea is to share one of the possible use cases for GSAP (and overall web-animations) with the community. Well, technically the same post can be broken down into several smaller technical know-how queries and we are actively exploring where GSAP could fit in the solution. I rather chose to put the "what and why" out there for the initial context. As far as the idea of a vector-based video is concerned, I completely understand your point, this is more of an RnD project. We believe given how matured h/w and modern browsers have become from the days of Flash, along with active communities/tools like GSAP and Pixi/Other HTML5 rendering engines, there is a decent potential for building a vector-based-video-codec today. For a further constructive discussion, I would love to hear @OSUblake's opinion on this and what according to him should be the right set of tools to build a performant rendering engine.

Greetings to all the community members! I'm new here, I am a developer trying to get deeper into web-animations. The goal is to recreate cartoon animation on web, specifically a vector graphics based video player, which should ideally work the same way (in terms of recreation of scenes, shapes and effects), be performant and resource efficient. I know that's too much to ask and it's ambitious. That's why we are looking to get some help from the community Our public demo: https://files.vectorly.io/demo/scene1/index.html Using SVGs for our version 1 | Issues: Neither performant nor efficient, loss of fps and high CPU usage The task is to - Recreate smooth animations Achieve a good fps ~60 Resource efficient : CPU usage in the range of 1-5% Transfer computationally expensive load to GPU (Given most modern browsers/devices support this) In terms of input data, we have bunch of shapes which are simply SVG path data consisting of "d" strings (control points), fill, stroke values and transforms (translation, scale, rotation, skew). We have explored several option thus far and SVG - Inability to perform with large number of objects at a frame level, given one frame can have a range of 100-5000 objects. We are working on bringing this number down but it has its own limitations so it can't go down beyond a certain level. Canvas. - Inability to perform well when drawing dynamic content over static content. Some sort of layering where shapes which doesn't change/move over a given timeframe are drawn on a canvas-layer and those dynamic shapes are drawn-erased-redrawn on higher (z-index) layers. GSAP - Have explored morphing shapes. To be explored more. WebGL - Mostly useful for 3d animations. We are still on 2d animations so probably not now. Since canvas 2d-context has fallback on this. PixiJS - Doesn't have good support for SVG or Graphics in general. The latest version v5 uses WebGL2 which itself is not yet supported widely. It would be really helpful if experts @OSUblake, @ZachSaucier, @GreenSock, @PointC from this amazing community let us learn from the years of learning that they have in this space. Thanks in advance! Saurabh, Vectorly