Matthias Weber

Update: I almost got what I want after experimenting a bit: https://codepen.io/kvonspiczak/pen/oROPov 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.

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); // } // } });