I like your HTML suggestions. I finally did it this way.
<div class="homeintro">
<header id="intro1">
<h1>1st intro bit of text</h1>
</header>
<article>
<h1 id="intro2">2nd intro bit of text</h1>
<p id="intro3">Change a character in each of the IDs above to see the text show on the screen. This is the third intro bit of text which is a paragraph that has many more words than a headline element, making it more substantial of a block level element affecting height when in reference to displaying or not displaying it along with #intro2,
as in display: block and display: none. With this javascript we have a swapping of "block" and "none" with the selector "display." Without this display rule swapping all block level elements remain as visbility:hidden/visible, effectively causing
the page or page section to jump as elements are visible or hidden. Swapping by display:block/none allows for a constant page section height as each block level element contributes to the height of the section. Overall, this only works if both
header elements wind up being the same height due to their number of characters.</p>
</article>
</div>
jQuery(document).ready(function($){
window.onload = function()
{
//when js kicks in show
TweenLite.set(".homeintro, .arrow", {visibility:"visible"})
var tl = new TimelineLite()
.set("#intro1", {display:"block"})
//bring in first item and then have it disappear
tl.from("#intro1", 1, {delay:0.8, scale:0.5, autoAlpha:0, repeat:1, repeatDelay:3, yoyo:true})
//swap one for the other to avoid page jump
.set("#intro1", {display:"none"})
.set("#intro2", {display:"block"})
//stagger in next 3 and have them remain
.staggerFrom("#intro2, #intro3, .arrow", 1, {delay:0.5, scale:0.5, autoAlpha:0}, 3)
}
});
See pen:
