Jump to content
GreenSock

Tibor Katelbach

show hide using scale keeps display:block

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

Hi 

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();
$("."+type).show();*/
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 ?

Regards

Tibor

 

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},
            onComplete:function{
                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

Thanks for the answers 

 

I tried all these solutions but unfortunetly they don't solve the issue

 

I tried to get my codepen to work but wasn't able 

but here's my code 

See the Pen dFDze by oceatoon (@oceatoon) on CodePen

 

maybe it will help us find a solution

Tibor 

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 

http://mcpants.github.io/jquery.shapeshift/

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

Cheers

Link to comment
Share on other sites

Have you looked into using a grid plugin like jQuery Isotope, which is a really cool grid plugin:

 

http://isotope.metafizzy.co/

 

Otherwise if your making your own.. you can try to first setup your grid with css and animate transforms using GSAP

Link to comment
Share on other sites

I saw isotop but thought it was a bit to much 

but you might be right , it mybe a better solution 

cheers 

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

 

http://api.greensock.com/js/com/greensock/core/Animation.html#eventCallback()

 

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:

 

http://api.greensock.com/js/

 

does that help at all?

Link to comment
Share on other sites

i updated my link so the elements animate out first and use the onComplete callback and then animate in

 

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

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