Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
tganyan

Chaining functions into a timeline

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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! 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×