angecles

Thank you PointC, Carl, and Blake for all of the valuable info, links and timely response! Sounds like Pixi.js and GSAP is the way to go... one-two punch I should be able to use Pixi.js to get the items on to the canvas and then use GSAP's power/simplicity for the animation. One thing I know I also need to investigate/play with is if I can use a single GSAP Timeline (Max/Lite) to animate all of the tweens or if I need to use one Timeline per tween (as done in the codepen). Thanks, again!

Hi All.. I am new to GSAP and investigating whether GSAP is the right tool/platform for a PoC I am building (vs. using Anime.js, Pixi.js, D3.js, other). Here is the use case: Initialize a rectangular canvas with a variable but large number of tweens (i.e. 30,000). All of the tweens begin on the left edge of the canvas and are distributed vertically from top to bottom, evenly. GSAP will animate the tweens along a fixed path from the left edge of the canvas to the right edge. The path contains multiple fixed segments (i.e. 9 segments) that each of the tweens will follow. Each of the tweens will have different durations for each of those segments before finishing at the right edge of the canvas. The tweens can certainly be very small and the canvas can grow tall enough to accommodate all of the 30K tweens (top to bottom) You can assuming the data for each tween is available (can be all hardcoded for now but will eventually be retrieved via Web Service API) I created the following codepen (http://codepen.io/angecles/pen/apopOm) which shows the concept in action with just 10 tweens. Any support from this group would be appreciated!