Jump to content
GreenSock

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

Search the Community

Showing results for tags 'stagger fade-ins'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge

Categories

  • FAQ Landing Page

Categories

  • Examples
  • Showcase

Categories

  • Products
  • Plugins

Categories

  • Learning Center
  • Blog

Categories

  • ScrollTrigger Demos

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Personal Website


Twitter


CodePen


Company Website


Location


Interests

Found 1 result

  1. 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(); });
×