Hi @mikel and @PointC,
I appologize for the confussion and believe will have to do a better job explaining myself on the future queries ! The problem I was having related to restarting the animation after the SplitText had run once and not with playing the animation from a specific point forward. Thanksfully, I found a solution which was not as difficult as I once thought. Below is the rational for my solution.
1.- Whenever SplitText is applied, the text provided is converted into lines, words, and/or chars.
2.- The resulting elements are then animated according to the values provided by the tween.
3.- As a result, the position of each element (i.e. matrix3d) is altered and any subsequent animation (or restart) on the same elements will be offsetted.
4.- To remedy this, I initialized the position of each element by adding, within my Initialize() function, the following line, which ensures the lines, words, or chars will alway be animated from the same position (text2__hidden is the class given to each chars after SplitText).
tl.set('.text2__hidden', { transform:"matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)"});
5.- To clean-up after myself, I added an onComplete function to revert the text back to its original state and tweened its autoAlpha property to 0 (concurrent to the SplitText animation) to keep it hidden.
.to('.animation__text2', 2, { autoAlpha:0, }, "erase+=1.5")
I am uncertain as of to how "clean" the solution is but the animation now works like a charm. Thank you guys for all your input; it really made me think holistically about the problem and guided me to the answer.