Jump to content
Search Community

show hide using scale keeps display:block

Tibor Katelbach 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


first of all , I'd like to say thanks for this humungous lib, I love it !! 


I'm building a show hide filter using Tween with scale animations

on a list of div block 


function filterType(type,color){
/*$(".people ").hide();
TweenLite.to(".people ", 1, {scaleY:0});
TweenLite.to("."+type, 1, {scaleY:1,backgroundColor:color});

but each hidden block keeps it's space 

because the block remains 

what would be the right way to do this ?




Link to comment
Share on other sites

Hello and Welcome to the GreenSock Forums..


Im not sure i understand your question..


are you saying that when you scale to zero the element still has the display:block property.. if thats the case..


scale doesn't change the display property, even though the element is scaled down, it does not mean the display property will be affected.

If you want the element to have display:none than you will have to either tween the display property, or after the element has scaled down.. set the display property with the onComplete callback of the tween


you can try this:

// scaling from center origin
function filterType(type,color){
     TweenLite.to(".people ", 1, {css:{transformOrigin:"50% 50% 0", scale:0});
     TweenLite.to("."+type, 1, {css:{{transformOrigin:"50% 50% 0", scale:1,backgroundColor:color}});

// add a fade out and in when tweening autoAlpha (opacity and visibility)
function filterType(type,color){
     TweenLite.to(".people ", 1, {css:{autoAlpha:0, transformOrigin:"50% 50% 0", scale:0});
     TweenLite.to("."+type, 1, {css:{{autoAlpha:1, transformOrigin:"50% 50% 0", scale:1, backgroundColor:color}});

// tweening display property with scale
function filterType(type,color){
    TweenLite.to(".people ", 1, {css:{display:"none", scale:0});
    TweenLite.to("."+type, 1, {css:{{display:"block", scale:1, backgroundColor:color}});

// tweening display property in callback
function filterType(type,color){
    TweenLite.to(".people ", 1, {css:{scale:0},
                TweenLite.set("."+type, {display:"none"});
    TweenLite.to("."+type, 1, {css:{{scale:1, display:"block", backgroundColor:color}});

depending on how your elements are set up.. it would be best to have your elements absolutely positioned when applying transforms. Also instead of using the display property, why not use GSAP autoAlpha property.. which i think is much better than tweening the display property


also some other questions i had:

  • Are you trying to scale the elements from their center origin?
  • What are the initial state of the elements when the page loads?
  • Are you only trying to transform scale the elements form one direction?
  • is there any type of delay between hiding and showing the elements?

if you could provide a codepen or jsfiddle example for us, we could better help you.. :)

Link to comment
Share on other sites

CSS transforms do not affect document layout, so scaling an object to 0 or 100 will not affect its size or position in the page. You will need to tween height/width to 0 if you want the object to 'shrink', although its contents will not scale. If you are ok with just tweening the scale and then removing the object, you can also 'tween' the display property:

TweenLite.to(".people ", 1, { display: 'none', scaleY: 0 });
TweenLite.to("."+type, 1, { display: 'block', scaleY: 1, backgroundColor: color });
Link to comment
Share on other sites

ok.. i noticed you didnt answer any of the questions above.. but anyway.. the following tweens the display property


See the Pen qzoLn by jonathan (@jonathan) on CodePen


its best to bind your events externally instead of binding your events inline on the tag..


the codepen includes jQuery.. and i am using data attributes on the tag. Once the anchor tag is clicked the event triggers and it grabs the data attribute values to pass to the function


also your .grid class had visibility hidden, so i commented it out... also you will notice how i set the initial display state with the GSAP set() method


also you will notice that  i also set the initial transform property in the css


is this what you mean?

Link to comment
Share on other sites

Hi Jonothan 

That's the closest I can get for sure Thanks 

The source of my real problem is in fact in that grid 

I was trying to mix 2 libs 


and tweens

and as I discovered in the grid system when hidding an element there's no repositioning 

so That was the cause 

it had nothing to do with the Tweens , So I'm still stuck :(

on the other hand I learn a bit more thanks to your samples


Link to comment
Share on other sites

there was also this.. but i just commented out the position absolute on the .grid > div and added float:left ...


See the Pen BkbKq by jonathan (@jonathan) on CodePen


but the grid system is still off when bringing in hidden items with already visible items


so i added a onComplete on the tween that hides the items and then triggers a callback when complete and then tweens the items in




I also made it so when the page loads, it triggers the first anchor tag "All" .. so all items will animate in when page first loads


the GSAP docs have a lot of great  info:




does that help at all?

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