Jump to content

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

Banners: best way to handle hiding/showing elements

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 {






.box {




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


.box {


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 {






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



Link to post
Share on other sites



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



.someElements {

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: 



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 post
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.