Jump to content


Slide Into it's parent?

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

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.


Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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

  • Like 2
Link to comment
Share on other sites

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

Thanks a lot...

  • Like 1
Link to comment
Share on other sites

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

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.