Jump to content
Search Community

Sliding in (partially) hidden content with GS

cerulean 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'm new to JS/CSS (coming from AS3) -- I wonder if someone could help me figure out the following:

 

I'd like to have tabs at the bottom of a page which, when rolled over (or clicked) slide up. The tabs will contain images of 45px height. I'd like, say, the extended tab to be something like 100px in height.

 

I gather this has something to do with overflow, hidden, auto, etc --

 

I've seen solutions using jQuery slide, but I'm not sure how to do it with Greensock -- that is, I am well-versed in the GS engines, but putting it all together (CSS, DIVs, overflows, etc) is throwing me.

 

Any help much appreciated!

Link to comment
Share on other sites

Hi Cerulean,

 

I don't know exactly what kind of help you need, but I fully understand that the CSS/HTML part of this can be quite a bit frustrating coming from Flash.

 

Unfortunately there isn't a lot we can do to build out full examples as things like this can be very time consuming. For what you are describing there are probably 10 ways to do it and each way probably involves a few "tricks".

 

Here is a VERY basic example of an element that is partially hidden until clicked. Clicking again hides it. It should at least help you understand how overflow:hidden is applied to the parent div.

 

http://jsfiddle.net/geekambassador/aNmfJ/

 

What you might want to do is read some jQuery tutorials that are close to what you want and steal the basic HTML/CSS structure. You can then swap in TweenLite tweens for the jQuery animate() stuff.

 

I can tell you that your prior TweenLite experience in Flash is really going to come in handy. Getting started with Javascript for me was quite a challenge but I found that relying on TweenLite for animation really accelerated my learning. In very little time I was making things very similar to what I was used to do in Flash. I would strongly recommend brushing up on some jQuery as just a little of that will go a very long way.

  • Like 1
Link to comment
Share on other sites

Thanks. I *finally* figured it out -- the two tricks I found are, when sliding from the bottom, that the tabs should be absolutely positioned, that their height MUST be undefined but their top should be set, that they need to have overflow:hidden (to hide any content), and that as they slide in you tween the height to fit how much they've tweened in, thus:

 

function slideUp(event) {
// what div was clicked?
var myDiv = this;

var myDivAsJQuery = $(this);
// move it up, adjust height each update
 TweenMax.to(myDivAsJQuery,1,{css:{top:"-100"},ease:Quad.easeOut,onUpdate:fixHeight,onUpdateParams:["{self}"]});
}
function fixHeight(theTween) {
// what div is moving (div == "slider")
var slider = $(theTween.target);
// the height should be the current 'top'
var newHeight = -parseInt((slider.css('top')));
var newHeightString = newHeight + "px";
slider.css('height',newHeightString);
}

 

But it won't work in IE7! (Perhaps this relates to my other post -- this is the code that's failing!)

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