I'm creating a website with one of these large scroll page with animations appearing while scrolling. Currently there is 5 edge animate composition on the page and the scroll stuff is working. Each composition has 50 to 100 layers.
The first attempt was simply to use the stage "stop" method to define the animation time on the scroll event. This worked nicely on the tests but when my colleague gave me the final compositions there was ~10 symbols (each justified). With the simple stage.stop(time) method the symbols where not playing so I added something like this:
This script simply loops each symbols, and call the stop method on them as needed. Eventually this works, but it also showed one problem; the stop method is too slow.
With chrome I've found that the stop method caused the frames to be calculated in ~230ms and the play method was below ~32ms (most are even less than 16ms).
So I'm finally investigating a way to use the play method. For scrolling down it's as simple as calling stage.play(), but for scroll up it's more problematic. The stage.playReverse method doesn't update the symbols. I will certainly try to do something like listening to stage update event, find if the stage is playing in reverse, see if a symbol should start and call playReverse on the symbol when appropriate.
If someone has a better idea let me know. Maybe there is something I can do to make the stop method more performant, or something to add in edge to make the symbols automatically playReverse when needed.
Here is the workaround I've used. It's certainly not perfect but works for my use case.
The script automatically call playReverse on each symbols when needed: