Forum Discussion
GSAP Timeline synchronization with Storyline Seekbar
Hi, yes fortunately I was able to solve the problem. It was actually relatively simple. The GSAP timeline with your animations must be the same length as the timeline in your slide.
Even if you only have two or three short GSAP animations in it, you have to specify the exact start time, duration and end in the source code.
This is important because otherwise you won't be able to scrub through the SL Seekbar, for example.
However, I think that you are dealing with a different problem. It's difficult to say without having seen the project or the corresponding slide.
If you can at least provide the slide that is problematic, I would be happy to take a look at it.
Really cool you managed to get GSAP timeline(s) synced with Storyline's. Might be great to showcase or explain it for others. As the new advanced Javascript uses WAAPI but also integrates GSAP better, it might be great if Articulate's engineers could add your solution by default in the Storyline timeline ... ZevanRosser some idea to implement ?
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.
