Forum Discussion
GSAP Timeline synchronization with Storyline Seekbar
hi CPDeveloper
Did you find a solution for your problem yet?
I am not using GSAP animations but I also have a problem with the timeline synchronization in Storyline. I have a Slide with: text-to-speech audio, items (e.g. images, text boxes) that fade in according to the audio and text that fades in paragraph by paragraph (I don't know how those functions are correctly called in English as I use Storyline in German..).
Most of the time, the timing works fine. But somtimes - seemingly without any pattern - the timings do not work. This means that the audio sometimes plays normally but the elements fade in way too late, or the audio sometimes is too late/too fast/too slow and the timings do not match anymore.
The problem only occured in Firefox so far, but not everyone who uses Firefox has this problem. The browsers are updated to the latest versions (134.0.2). It happens both in Review360 and as a SCORM-export embedded in Moodle.
I saw that Storyline fixed a problem with the seekbar in their latest update from January 21, but it still persists for me even after this update. "Fixed: Media content didn't play as expected when using the 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 % ;-)
