Banners: best way to handle hiding/showing elements

[flash08 0 Likes (Newbie)]

I've been working on learning GSAP in anticipation of doing some banners.

 

The basic idea is to hide all text boxes, then sequentially Tween their opacity and position with some Easing effects. Here's a small example:

 

<div style="width:750px; height:90px">

<div class="box" id="first"><p>some text here</p> </div>

<div class="box" id="second"><p>some text here</p> </div>

<div class="box" id="third"><p>some text here</p> </div>

 

The CSS2 method of hiding elements was either:

 

.box {

display:none:

}

 

or

 

.box {

visibility:hidden;

}

 

For CSS3 (and GSAP), I've found that I have to use (the second line being for IE8 browsers):

 

.box {

opacity:0;

filter: Alpha(opacity=0);

}

 

And then just tween away to make them visible. But it occurs to me that there must be a "standard" way of hiding text box elements in order to animate them into position from their initial  -invisible - starting positions.

 

Would the best method be to just set overflow to hidden, and then position the "idle" boxes outside of the containing div, i.e. :

 

.box {

overflow:hidden;

position:absolute;

top:-200px;

}

 

In short, how are elements initially positioned "off the stage" so that they can be Tweened into position and displayed?

 

 

[Carl 9,755 Likes (Superhero)]

Hi,

 

It would help if you could follow the directions here: http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/so that we could see what your code is doing and also easily edit it. You will get much better and quicker help.

 

I would suggest for the elements you want to hide until it is time to reveal them to set their visibility to hidden in the css

 

css:

.someElements {
  visibility:hidden;
}

When it is time to show these elements you can either

 

1: Tween from an autoAlpha of 0 for a nice fade in effect with a positional tween (x)

TweenLite.from(".someElements", 1, {autoAlpha:0, x:-200});

2: Set the autoAlpha:1 and then tween from some other positional value

TweenLite.set(".someElements", {autoAlpha:1})
TweenLite.from(".someElements", 1, {x:-200});

For a nice staggered effect I would recommend staggered tweens: 

http://greensock.com/stagger

 

here is a demo using staggerFrom() and autoAlpha: http://codepen.io/GreenSock/pen/azImA?editors=001

 

autoAlpha basically toggles the visibility property for you while tweening opacity.

read about autoAlpha in the CSSPlugin docs: http://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSPlugin/