Hello, Green Sock forum. I am having a few struggles which largely revolve around how to call and interact with time lines, which are nested inside a function. I have put together a very bare bones demo up on Codepen, which covers this.
The expected functionality is:
Click “click to run box”:
1: showContent function is called, which contains and runs the tlContent timeline.
2: onStart calls swapText function, which replaces large text with that contained in the data-text of the clicked nav link.
3: onComplete calls swapText function, which evaluates if tlContent is active, and determining it is not, replaces large text with that contained in the “stopped" variable.
Click “click to reverse tween”
1: tlContent time line is reversed.
2: swapText function is immediately called (something akin to an onReverseStart) before any part of the timeline visibly begins to reverse.
3: swapText function is called via onReverseComplete and should display again, the “stopped" variable.
So it’s basically a collection of difficulties I’m having, which are largely centred around how to call time lines which by necessity of needing to pass data stored in the clicked element, I’m wrapping inside a function. If there’s a better way to do this then I’m all ears.
In addition to this, I have researched the various forum posts which discuss the (completely understandable) lack of a native OnReverseStart call, with some suggesting that the callback can be replicated via the onRepeat call, but as an onRepeat call requires a repeat rate to be set, I couldn’t get the desired functionality in this example. Although I’ll confess to being a bit fuzzy on the specifics of the implementations suggested.
As ever, a hearty thank you to anyone who offers their time and insight to help me out.