Jump to content
Search Community

Banners: best way to handle hiding/showing elements

flash08 test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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?

 

 

Link to comment
Share on other sites

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/

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...