Trying to animate a div from the top of the page or relative to another div

[Riccardo1091]

Hi, I'm trying to animate the blue div from the orange div position to the final position (to the end of the page basically).
Is there a way to make the animation relative to the page so I can use the "h" variable or at least relative to another div, the red one and not relative to itself?
Hope I made myself clear. Thank you.

 

In other words I want the red and the blue div to touch each other, then the blue goes down revealing orange and yellow divs.

 

See the Pen poLGxwE by Mahanon (@Mahanon) on CodePen

[Cassie]

If the divs are always going to be the same height then you can just use yPercent

See the Pen VwXgqzW?editors=0010 by GreenSock (@GreenSock) on CodePen

If not, could you give a little more context! Thanks

[Riccardo1091]

6 minutes ago, Cassie said:

If the divs are always going to be the same height then you can just use yPercent
 

 

If not, could you give a little more context! Thanks

 

 

Unfortunately not, the orange and yellow divs will have different content, I just need an initial animation like a "reveal", two horizontal curtains (red and blue) that open and show orange and yellow. In this animation the only element moving is blue.

 

Basically what u did is good but the other divs will not be the same height as the blue. 

 

EDIT:

Wait a moment, I could calculate the height of the other divs relative to the windows and achieve the result, maybe.....

[Cassie]

Sure thing - as you say, you'd have to calculate the height of the other divs.

See the Pen yLKZGpm?editors=0010 by GreenSock (@GreenSock) on CodePen

[Riccardo1091]

3 minutes ago, Cassie said:

Sure thing - as you say, you'd have to calculate the height of the other divs.
 

 

Oh wow, I was going to calculate every div height with js but this is more clever, thank you so much

[Cassie]

This is just calculating the divs height with JS too, sounds like the same solution to me.

 

Glad I could help though!