Search the Community
Showing results for tags 'stagger fade-ins'.
Found 1 result
-
This is what I would like to happen: 1) Loop through a 2 dimensional array, each array contains a story segment: approx. 9 sentences/lines per segment. 2) Loop through the segment, display 3 lines of the segment. Each line is staggered for a fadeIn display 3) After the fade-in, Delay for short reading period before fading out the display. Sounds easy enough, but I never got it right. I tried doing this using jQuery and setIntervals, then switched to setTimeouts, before giving it a go with GSAP. I'm lacking knowledge when it comes to looping with timers and the end result is I only see few sentences from my multi-dimensional array. Sorry, ES5 is all I know, but it feels like I'm missing a closure or something in this codepen Here's what the html, and the javascript looks like: HTML: <body> <section class="hero"></section> <section class="tribute"> <div class="tribute-line1"></div> <div class="tribute-line2"></div> <div class="tribute-line3"></div> </section> </body> Javascript: $(function() { var tribStory = [ [ "Line 1-1", "Line 1-2", "", "Line 1-4", "Line 1-5", "", "Line 1-7", "Line 1-8", "Line 1-9" ], [ "Line 2-1", "Line 2-2", "", "Line 2-4", "Line 2-5", "", "Line 2-7", "Line 2-8", "Line 2-9" ] ]; // end array var tl = new TimelineLite(); var $line1 = $(".tribute-line1"); var $line2 = $(".tribute-line2"); var $line3 = $(".tribute-line3"); var $currFade; var delay = 1000; var i = 0; var storyLen = tribStory.length; function displayTribute( tribute, j ) { console.log( tribute[j], tribute[j+1], tribute[j+2]); $line1.text( tribute[j] ); $line2.text( tribute[j+1] ); $line3.text( tribute[j+2] ); tl.staggerTo( [$line1, $line2, $line3], 3, { opacity: 1 }, 0.5 ) .delay(2).to( [$line1, $line2, $line3], 1, { opacity: 0 } ); } var tribAnim = function() { if ( i < storyLen ) { var tribArray = tribStory[i]; var tribArrLen = tribArray.length; for ( j = 0; j < tribArrLen; j+=3 ) { (function( tribArray, j){ displayTribute( tribArray, j ); }(tribArray,j)); } i++; } if ( i < storyLen ) tribAnim(); }; tribAnim(); });
