Jump to content
Search Community

Parent Container Adjusting to the Hight of Contained Elements - Possible Setup.

iDad5 test
Moderator Tag

Recommended Posts

Inspired by the 'Examples for Inspiration' I'd thought I'll offer a little discovery I made last week - maybe most of you already know and use it, or don't for knowing a better solution, but I thought I'd share even if I risk exposing myself as very old-school.

I don't know how often in the past I had a setup with a parent-container that should have multiple children inside of which only one should be visible at one time. Like an image-slider or messages / testimonials that should  change - being animated in and out with GSAP naturally. 

If you want to avoid layout-shifts you usually want to make sure that the container is high (or wide) enough to hold the largest child-elment.
I usually was making the parent's position relative and the kids absolute.
As a consequence the child-elements are taken out of the document flow, and the parent has no (flow) content to determine it's height. So I had to loop over the children measuring them, and set the height of the container to that of the highest child.
(I have to make sure to watch and adjust if the content changes dynamically of course...) 
There are other ways to achieve that, but most of which I came up  with, needed more complex HTML-structures, hidden overflow, dealing with scrollbars etc.

The (to me) new idea I had was setting the parents CSS:

display: grid;
grid-template-areas: 'main';

and all the children:

grid-area:main;

the container adjusts it's size to hold all elements, and they are simply stacked on top of each other.

I haven't done a lot of complex animations in such a setup yet, but what I have done so far worked as expected.

 

Really simple, but in my experience basic setup considerations like that can sometimes greatly help reduce complexity and free up time and energy for nicer ideas.

I would love to hear from you, if you think that's a good idea or a bad one, or if you all have been using that method for ages...

Edit: I added  CodePen. I used scale down, as the moving or scaling of items outside the container will affect the container - you can avoid this / deal with in several ways, depending on your use-case, but I wanted to keep the demo simple and  I also think, that the method is best suited for simple use-cases.

 

See the Pen GRxMpGX by mdrei (@mdrei) on CodePen

Edited by iDad5
Added CodePen
  • Like 1
Link to comment
Share on other sites

I occasionally reach for grid when I need multiple things (usually text) centered on top of each other. A byproduct of the approach below is that the child containers are all the same size.

 

this approach was borrowed from stephen shaw (shshaw) and encompasses everything I know about grid.

 

See the Pen JjYJpgw by snorkltv (@snorkltv) on CodePen

 

Your suggestion seems similarly useful, however it would really help to see a very simple demo.

 

Setting up a functioning css layout is probably the hardest part of using GSAP, so I imagine this could help quite a few people.

Sharing helpful tips is encouraged here and a nice way to engage with the community. 

 

 

  • Like 3
Link to comment
Share on other sites

Thanks Carl, actually your demo is exactly what i meant, the only thing you do is setting a fixed height to the content items, which is exactly what I didn't want/have in my use cases - and why I find it so useful. I'll add a demo to my initial posting asap.

  • Like 1
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...