Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Matthias Weber

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

Recommended Posts

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 by Matthias Weber
remove screenshots (code is in post already)
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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

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.
×