Forum Discussion
GSAP Timeline synchronization with Storyline Seekbar
Hello everyone, I'm surprised that no one has asked this question yet, at least I couldn't find an answer. It's about GSAP animations with timelines and their synchronization with the Storyline 360 Player Seekbar. For example, I have a slide that is about 2 minutes long. There are several GSAP animations within these 2 minutes. If the user wants to go back to minute 1 and searches via the Seekbar, this destroys the entire GSAP timeline or the sequence of the animation. Is this normal or am I too stupid to implement it?
I really tried and tested a lot, but I didn't achieve a really satisfactory result. As my final solution, I connected the GSAP timeline, which runs in the background parallel to the Storyline Seekbar, to the latter. This also works very well. When I scrub through the Seekbar, both the GSAP animations and the normal storyline animations are synchronized. The only thing that is a little annoying is the fact that by connecting the GSAP timeline and the Storyline Seekbar, GSAP includes the length of the respective slide in the calculation of timings. I can't explain it any other way, because all animations are just super slow and appear completely delayed.
I have created a small workaround that allows me to get the correct timing again with a multiplier, but that can't be the solution, can it? I hope that one of the GSAP experts can say something more about this.
Many thanks in advance for your help.
CP
- GastHKlearningCommunity Member
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."
- CPDeveloperCommunity Member
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.