Use animation to smoothly display hidden button when hitting bottom of scroll

Question

I have a fixed button as I scroll down a component, however, a second button is to appear below it when I reach the bottom of the webpage.

I have a working component, but it is wonky when I hit the bottom of the scroll. A scroll animation once the bottom of the page is reached maybe?

My current working component (scroll down the div to see the second button appear):

 const App = () => {
  const scrollListener = React.useRef();
  const [showSecondButton, setShowSecondButton] = React.useState(false);

  const onScroll = () => {
    if (scrollListener.current) {
      const { scrollTop, scrollHeight, clientHeight } = scrollListener.current;
      if (scrollTop + clientHeight >= scrollHeight * 0.85) {
        if (!showSecondButton) {
          setShowSecondButton(true);
        }
      } else {
        if (showSecondButton) {
          setShowSecondButton(false);
        }
      }
    }
  };

  return (
    <div>
      <div className="main" onScroll={() => onScroll()} ref={scrollListener}>
        <h1>My Page</h1>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
        mollit anim id est laborum Sed ut perspiciatis unde omnis iste natus
        error sit voluptatem accusantium doloremque laudantium, totam rem
        aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto
        beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
        voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni
        dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam
        est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
        sed quia non numquam eius modi tempora incidunt ut labore et dolore
        magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis
        nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut
        aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit
        qui in ea voluptate velit esse quam nihil molestiae consequatur, vel
        illum qui dolorem eum fugiat quo voluptas nulla pariatur?
      </div>
      <div
        className="my-absolute-btn"
        style={{ bottom: showSecondButton ? "40px" : "2px" }}
      >
        <div>
          <button style={{ backgroundColor: "red" }}>My absolute button</button>
        </div>
        {showSecondButton ? (
          <div>
            <button style={{ backgroundColor: "blue", marginTop: "50px" }}>
              Hidden second button
            </button>
          </div>
        ) : null}
      </div>
    </div>
  );
};

ReactDOM.render(
    <App />,
    document.getElementById('app')
);

.main {
  position: relative;
  width: 300px;
  height: 300px;
  overflow-y: scroll;
  border: 1px solid red;
}
.my-absolute-btn {
  position: absolute;
  /* bottom: 50px; */
  right: 0;
  left: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>
<div id="app"></div>

The main issue with my current solution is how my button just "jumps" at some point and the other comes out of nowhere. I would like that the second button "push" the first one up when I hit that certain point in the scroll.

You may find this helpful: https://stackoverflow.com/questions/123999/how-can-i-tell-if-a-dom-element-is-visible-in-the-current-viewport/55181673#55181673 — Randy Casburn, Dec 09 '20 at 01:36
Not really. The issue isn't figuring out when a button should be visible, but how to ease in the button when I want to make it visible. Instead of the "jump" I currently have. — theJuls, Dec 09 '20 at 01:38
When using ternary operator to show/hide elements those elements is actually inaccessible, much like using display:none in css. The problem is that, when it is "hidden" it cannot be animated that's why the button just "jumps". — diane, Dec 09 '20 at 04:03
@diane it is just hidden because I don't know any better really. What should be the button's initial state so that I can animate it gracefully into the screen? — theJuls, Dec 09 '20 at 16:00

score 0 · Answer 1 · answered Dec 09 '20 at 04:48

You need to add transition property in .my-absolute-btn css class

.main {
  position: relative;
  width: 300px;
  height: 300px;
  overflow-y: scroll;
  border: 1px solid red;
}
.my-absolute-btn {
  position: absolute;
  right: 0;
  left: 0;
  transition: ease-in-out 0.5s;   /* add this line */
}

score 0 · Answer 2 · answered Dec 10 '20 at 02:57

use a class to show or hide the hidden button and then add @sanket's answer to make the absolute button appear smoothly.

  <div className={showSecondButton ? "show" : "hide"}>
    <button style={{ backgroundColor: "blue", marginTop: "50px" }}>
      Hidden second button
    </button>
  </div>

and then you can try this to animate the hidden button, change the values depending on what you like

.show,
.hide {
   position: fixed;
   transition: bottom 0.5s ease-in-out; //to create smooth transition when entering and exiting
 }

/*initial state, position the button offscreen*/
.hide {
  bottom: -500px;
}

/*position button back on screen*/
.show {
   bottom: 0;
}

you can also try other ways to hide elements using css and animate it

Use animation to smoothly display hidden button when hitting bottom of scroll

2 Answers2