Hi there,
I have trouble with sequencing function calls in a timeline.
This is the order in which I need things to happen:
1. Create a label
2. Pause timeline at the label
3. at click of a button, resume playing the timeline
4. Call a function
I tried this:
var tl_Timeline = new gsap.timeline();
tl_Timeline
.add("label1")
.addPause("label1")
// when user clicks a button that continues playing the timeline:
.call(function() { doStuffWhenTimelineContinues() });
Now, the function is called at the same time the timeline pauses.
And I need it to be called later, after the timeline resumes playing.
To accomplish this, I added a dummy animation with an extremely short duration, like this:
var tl_Timeline = new gsap.timeline();
tl_Timeline
.add("label1")
.addPause("label1")
// when user clicks a button that continues playing the timeline:
// play dummy animation:
.to(document.createElement("div"), { alpha: 0, duration: 0.0001 })
// call function
.call(function() { doStuffWhenTimelineContinues() });
This works. The function is called after the timeline resumes playing. Yay!
But surely there’s got to be a better, less hacky, way of doing this?
Thanks for any thought on this!