Forum Discussion
GSAP Timeline synchronization with Storyline Seekbar
It's actually not that complicated. That's why I wonder why the SL developers haven't implemented this feature long ago.
Since I don't have full insight into the source code of SL, I decided to use the available, or obviously responsible, player features.
To have a better visual feedback, I visualized the GSAP timeline on my slide. This way I could see if the handle follows the handle of the SL Seekbar when I move it.
The SL Seekbar handle can be controlled by “progressBarFill”. Now I only had to connect the progress of the GSAP timeline with the SL Seekbar handle, including the play/pause button.
In addition, the “MutationObserver” monitors all changes that happen on the slide.
Besides that, I calculate the relative positions in the container so that the elements are positioned correctly across all devices. (This also works with dynamic font size calculation if you have javascript-based font animations, e.g. staggering letters etc.)
I only did all this because there are sometimes clients who don't want videos in their courses. Of course, it's much easier to realize all the GSAP effects if you use After Effects, for example, and then integrate the video into SL. But as I said, some clients want to be flexible.
Mainly for the reason that they can later change or adapt something in the project themselves. What they usually forget is that, especially with complex or longer GSAP timelines and multiple objects, they have an insane amount of source code that they have to edit.
Sure, it would be nice to have this feature built into SL by default, but I think there are much more important things that should be prioritized instead. For example, simple scaling with percentages. (an object increases or decreases in size by x%). At the moment there is only 0 to 100 or 100 to 0. Or have I missed something? Another important feature would be the automatic display of incorrect answers in the multiple choice quiz.
At the moment you have to create multiple queries using triggers. It gets really bad when more than one answer is correct and you have to build triggers for all possible options that exist.
However, I think these little things would be more important than synchronizing the GSAP timeline and SL Seekbar.
Use GSAP for scaling by % ;-)
Sure, you can do that. But then you have the problem again that you can't scrub through the Seekbar. Unless you connect GSAP timeline and SL Seekbar, as I have described. All that effort for scaling an object? There has to be a simpler solution. Most of the courses I create have slides that are 2 to 3 minutes long. Within this time, there is scaling, objects moving from A to B, rotations etc. at certain points. These are actually very simple animations that unfortunately cannot be implemented with the existing SL tools.
Probably the new Javascript API that is in Beta is a fix for that. You can use both GSAP and WAAPI animations with it. As WAAPI is fully integrated in Storyline i do suspect/hope it will be in sync with the Seekbar. If you are in the Beta you can try.