SVG:
Sample 1: Create 100 SVG labels, put them in a group, and apply a translate transform to the group in each frame
Sample 2: Same as sample 1, except that no group is created, and a translate transform is applied to each label. IE slows down by 2x.
Sample 3: Creates 100 SVG labels and gives an independent initial motion (x,y) to each of the label
Sample 4:Creates a group containing 100 SVG labels and applies a zoom animation to the group
Sample 5:Same as sample 4 except that each label is individually animated with same transform. IE slows down by 2x
Sample 6: Infinite Scroll. This was really difficult to get it right, and still has some bugs in it.
Sample 7: Similar to Sample 6 but uses a different and better algorithm. The idea behind the algorithm is explained here. Alas, I realized there is a bug in this sample also. See if you can spot it using this hint
Canvas:
Sample 7:Similar to Sample 7 of SVG. The FPS will be independent of the number of labels drawn, because we use drawImage in each animation frame which takes constant time.
Follow this link to access the samples as stand alone html pages