Try to make a right expandable tab

[lambrosx77]

Hi,

Thank you for that amazing project.

I'm newbie and my first need is animating a tab on the right side:

• Collapsed, I want only the button visible;
• Expanded, I want my tab 50% of my width;
• From collapsed to expanded, I want a smooth and quick animation without any other effect.

I manage to animate it but behaviours are strange near endings positions.
With clamp to true and friction fixed to 1, I expected nice results but it seems to bounce.
I don't know why... Perhaps mixing units is bad. But how to proceed? Using ref and determining pixels sizes from window?

Shutter.js

import React from "react";
import styled from "styled-components";
import { animated, useSpring } from "@react-spring/web";

const SShutter = styled(animated.div)`
  display: flex;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
`;

const STag = styled.div`
  display: flex;

  button {
    background-color: lightseagreen;
  }
`;

const SContent = styled.div`
  background-color: lightgrey;
  height: 100%;
  flex-grow: 1;
`;

export default function Shutter({ children }) {
  const [isOpen, setIsOpen] = React.useState(false);

  const shutterSpring = useSpring({
    width: isOpen ? "50%" : "2.5rem",
    config: { clamp: true, friction: 1 }
  });

  const onClick = () => {
    setIsOpen((o) => !o);
  };

  return (
    <SShutter style={shutterSpring}>
      <STag>
        <button onClick={onClick}>Click</button>
      </STag>
      <SContent>{children}</SContent>
    </SShutter>
  );
}

App.js

import Shutter from "./Shutter";
import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <h1>Main content</h1>
      <span>My content!</span>
      <Shutter>
        <span>Shutter content</span>
      </Shutter>
    </div>
  );
}

Thank you for your help.

[lambrosx77]

Ok, I've got the solution so if it can help, here it is.

According to this nice tuto, we can't mix units so I had to convert all in pixels and use ref to keep it the right size resizing my window.

const vwToPx = value => `${(window.innerWidth * value) / 100}px`;
const remToPx = value => `${value * 16}px`;

export default function Shutter({ children }) {
    const shutterRef = React.useRef(null);
    const [isOpen, setIsOpen] = React.useState(false);

    const shutterSpring = useSpring({
        width: isOpen ? vwToPx(50) : remToPx(2.5),
        config: { clamp: true, friction: 1 },
        onRest: () => {
            if (isOpen && shutterRef.current) {
                shutterRef.current.style.width = "50vw";
            }
        }
    });

    const onClick = () => {
        setIsOpen(o => !o);
    };

    return (
        <SShutter ref={shutterRef} style={shutterSpring}>
            <STag>
                <button onClick={onClick}>Click</button>
            </STag>
            <SContent>
                {children}
            </SContent>
        </SShutter>
    );
}