Chaining functions into a timeline

[tganyan]

I'm trying to basically add functions to a timeline and get them to play one after the other. I feel like I've done this before but I can't seem to get it to work this time. I don't have an active codepen for this at the moment, apologies for that, but I think the issue is fairly straightforward so a codepen may not be necessary in this case (if it's called for in the replies I'll throw one together).

Code adding function to timeline:

tl.add('frame-1');
tl.add(frameTimeline('f1'), 'frame-1');

if (feed.F2_Headline_1) {
  tl.add('frame-2', 'frame-1+=3');
  tl.add(frameTimeline('f2'), 'frame-2');
}

frameTimeline function code: 

function frameTimeline(frame) {
  const frameTimeline = new TimelineMax({paused: false, repeat: 0});

  buildFrame(frame);

  return frameTimeline;
}

buildFrame function code:

function buildFrame(frame) {
  let splitText1 = '';
  let splitText2 = '';
  let staggerDuration1 = 0;
  let staggerDuration2 = 0;
  let lineDuration = 0;

  headline.innerHTML = frameHeadline.replace(/\n/g, '<br>');
  subhead.innerHTML = frameSubhead.replace(/\n/g, '<br>');

  splitText1 = new SplitText(headline, {type: 'lines', wordsClass: 'word', linesClass: 'line line-++', position: 'relative'});
  splitText2 = new SplitText(subhead, {type: 'lines', wordsClass: 'word', linesClass: 'line line-++', position: 'relative'});

  lineDuration = 3 / (splitText1.lines.length + splitText2.lines.length);
  staggerDuration1 = lineDuration * splitText1.lines.length;
  staggerDuration2 = lineDuration * splitText2.lines.length;

  tl.staggerFromTo(splitText2.lines.reverse(), staggerDuration2, {autoAlpha: 0}, {autoAlpha: 1}, lineDuration);
  tl.staggerFromTo(splitText1.lines.reverse(), staggerDuration1, {autoAlpha: 0}, {autoAlpha: 1}, lineDuration);
}

I left out a huge switch statement that's in the buildFrame function because that function is working as expected and I felt it would blow up the post unnecessarily. The basic point should be pretty well illustrated by the first two code snippets in which I am trying to run the frameTimeline function once for the start of the timeline (frame-1 position) and then if there's a second headline in the feed I'm working in run the function again but for frame 2 after frame 1 is done. The current behavior is that the timeline just waits and then runs frame 2 without ever showing frame 1 (although the function does run when debugging with breakpoints).

Again, if a codepen example is helpful here I'll add one, I just didn't because I wasn't convinced it was worth the effort given that the issue SEEMS pretty clear to me.

Thanks in advance for any help on this! 

[Visual-Q]

If you want to pass parameters with function you should probably use  .call

 

https://greensock.com/docs/TimelineLite/call()

 

NOTE! the proper syntax for parameters in the docs.

[PointC]

Be sure to check out this article too.

https://css-tricks.com/writing-smarter-animation-code/

 

Happy tweening.