Typewriter effect (yoyo + repeat, dynamic amount of paragraphs)

[Matthias Weber]

Hello everyone,

 

beginner here, trying to code a typewriter animation which should work with a dynamic amount of paragraphs.

All paragraphs should be written with the typewriter effect like in the linked codepen example. The first paragraph will always stay on page, when the animation for the first one is finished,  I want to start a loop for all remaining paragraphs and show the next paragraph underneath it (one paragraph at a time). Only difference compared to the first paragraph is that it should play in reverse direction (yoyo effect) once it played normally. 

 

So basically:

 

1st paragraph played

2nd paragraph played both in normal and reverse direction

 

after 2nd paragraph finished playing reverse direction, the 3rd should follow with the exact same logic.

So you would end up always seeing paragraph 1 fully displayed, then the 2nd, when 2nd is finished -> 3rd etc. Until you reach the end. At the end you should see the 1st paragraph and the last of the list.

I found various examples for the typewriter animation, thats not the problem. My problem is combining the typewriters for each paragraph & making sure that the timing is correct (wait for previous animation to finish).

What I tried was initializing a `TimelineMax` and adding `TweenMax.staggerFrom()` calls to it for each paragraph but I coudn't get it right.

here is what I tried:
 

$('.magazin-hero').each(function() {


  var $hero = $('.magazin-hero__text');
  var delayBetweenYoYo = 0.5;
  var tl;
  var $paragraphs;
  if (typeof $hero !== 'undefined') {
    $paragraphs = $hero.find('p');


    if (typeof $paragraphs !== 'undefined' && $paragraphs.length > 0) {
        tl = new TimelineMax();
        tl.staggerFrom(
          getParagraphChars(0),
          0.01,
          { opacity: 0, ease: Power1.easeIn },
          0.08
        );
        // for (var i = 1; i < $paragraphs.length; i++) {
          // console.log(i);
          tl.add(
            TweenMax.staggerFrom(
              getParagraphChars(1),
              0.01,
              {
                opacity: 0,
                ease: Power1.easeIn,
                yoyo: true,
              },
              0.08
            )
          );
        // }
    }
  }

  function getParagraphChars(idx) {
    var $paragraph = $paragraphs.get(idx);
    if (typeof $paragraph !== 'undefined') {
      var tempText = new SplitText($paragraph, { type: "words, chars" });

      return tempText.chars;
    }
  }

  // function animateParagraph(idx) {
  //   console.log('animateParagraph : ' +idx);
  //   if (idx <= $paragraphs.length) {
  //     var $currentParagraph = $paragraphs.get(idx),
  //       paragraphTimeline = new TimelineMax({ repeat: 1, yoyo: true, onComplete: animateParagraph, onCompleteParams: [idx + 1] }),
  //       paragraphText = new SplitText($currentParagraph, { type: 'words, chars' }),
  //       paragraphChars = paragraphText.chars;
  //     paragraphTimeline.staggerFrom(paragraphChars, 0.01, {
  //       opacity: 0, ease: Power1.easeIn,
  //     }, 0.08).to({}, delayBetweenYoYo, {});
  //   }
  // }
  // function nextParagraphs() {
  //   if (typeof $paragraphs !== 'undefined' && $paragraphs.length > 0) {
  //     console.log('nextParagraphs');
  //     animateParagraph(1);
  //   }
  // }


});

 

 

See the Pen yNegPm by derwinsadiwa (@derwinsadiwa) on CodePen

Edited June 5, 2019 by Matthias Weber
remove screenshots (code is in post already)

[Matthias Weber]

Update: I almost got what I want after experimenting a bit: 

See the Pen oROPov by kvonspiczak (@kvonspiczak) on CodePen

https://ihatetomatoes.net/greensock-timelinelite-tutorial helped me understand it better and on the cheatsheet I saw an example regarding nested timelines. Then I figured that that's what I need.

[GreenSock]

Great, so are you all set @Matthias Weber? Is there anything else you still need help with?