Only move the visible part of the document

[Patrick Artof]

Hi, my question might sound weird but here we go. I was trying to re-create the menu seen on Melriver (I'm using React by the way).

So i've created my menu, put it in place (fixed position, put it behind my container so it's hidden), i've created a state ("isOpened or not") and when i click on my burger icon this state changes, triggering my animation (openMenu() or closeMenu() depending on the state) . When i click on the button to open my menu, i go from display: none to display: block and move my entire app component down like this .

tl
  .to("nav", 0, {
    css: { display: "block" }
  })
  .to("body", 0, { css: { overflow: "hidden" } })
  .to(".App", 1, {
      y: width <= 654 ? "70vh" : window.innerHeight / 2,
      ease: "expo.inOut"
  })
  // Then other animations

It works wonderfully. But here goes the problem : if my page is more than 100VH, then the animation work but i can't see the menu, since the body is pushed only 70VH.

 

I was wondering if there is a workaround for moving the visible part of the website like seen on Melriver? Or a clue on how they achieved this?

[Patrick Artof]

Yeah actually it was not the smartest question ever, i figured it out! I've just set a fixed height to the menu of 70vh and animated it's height when the menu opens in the same time my app container is moving down. It does the trick of the illusion i was looking for! 

[ZachSaucier]

I'm glad you figured it out  

 

Just a couple of notes:

• You probably don't need to be using the css: {} property - you can just put those properties in the regular tween vars for DOM elements.
• It's generally best to put timeline code outside of the event callbacks and just use control methods inside of the control methods. This isn't always possible, but it's best for performance and can help things be cleaner. For more on that, read my article on animating efficiently.