Slide Into it's parent?

[edbras]

Please some help on the following try out: 

See the Pen zGgcx by edbras (@edbras) on CodePen

I want to create a "slide in" effect, that is: a child that is added to it's parent div, and is shown through a slide in effect, pushing away the children around him during the tween.

 

So in my try out: I want to slide (down) in the box, such that it pushes away the green content below it during the tween, such that the green content is moving a long.

My current problem is that it's pushes the green content at the beginning of the tween, such that a gap is shown during the tween.

 

And how to perform this kind of slide in most efficient such that it performs well on mobile?

 

Note: I found a lot of slide show examples but couldn't really found a similar example with not using absolute positioning, and not knowing the dimensions before hand.

 

[jamiejefferson]

Had a quick go, maybe try this?

 

See the Pen AKzcL by jamiejefferson (@jamiejefferson) on CodePen

 

The main thing is to have the objects height go from 0 to whatever, since the top positioning just moves the position of the 'displayed' content, not the space it reserves in the document flow.

 

The 'top' tween is just if you'd prefer the content stuck to the bottom instead of the top of the wrapper. If you don't need it stuck to the bottom, you can skip the wrapper and just animate the height of the box.

[edbras]

Hi Jamie, Thanks for the quick help.

As you probably noticed I am not a codepen/Js guru yet ...

 

But: How efficient is this?

I noticed you use the top in your tween, and I understood it's better to use the x/y. I just did, and it works, but I am not sure what is better in this context?

Can it maybe be done in one tween?

Or is it better to change the margin in the tween?

[jamiejefferson]

I'm going to say it would have been efficient enough, but I updated the codepen to show a few different ways to achieve the effect (also showSlideDown2() is a smoother effect with one tween, than showSlideDown1() is with two tweens, so I'd probably disregard that one now).

 

To be honest I don't think there would be much, if any, performance differences in such a small effect. How you ultimately achieve it depends on which style of sliding/revealing you prefer really...

[edbras]

Wauuu great, thanks for all the help and code examples. I will study them

Thanks a lot...

[edbras]

I really like the second slide in that you created with the "bottom:0px", very nice and creative.

I played some time with it, and would expect that the second slide is slightly faster as it concerns only one tween. However, on my iphone 4s (IOS7) I can't see any difference. At least not in this simple example were only little happens.

I slightly prefer the second slide 

Thanks again for your input...