CODEWITHSUNDEEP
javascriptreactjsframer-motion
pho_pho
pho_pho

Reputation: 734

Framer Motion - Drag in one direction only (eg only down)

I have a couple of simple components created using styled-components. One is a container, the other is a circle.

I am using Framer Motion to animate the dragging of the circle in the container.

Is there any way that I can limit the drag on the circle so that it can only be dragged downwards (in the same way that a lever, when at the top, can only be dragged down)? Ideally, i would like for it to be possible to only drag the circle down, then when released, the circle returns to the zero position. The idea was to replicate the motion of a lever on the side of a slot machine.

const component = ({ ...props }) => {

  return (
    <Container props={props}>
      <Circle
        drag={true}
        drag="y"
        dragConstraints={{ top: 0, bottom: 0 }}
        whileHover={{ scale: 1.1 }}
        whileTap={{ scale: 1.2, cursor: "grabbing" }}
        dragElastic={0.3}
        dragTransition={{ bounceStiffness: 10000, bounceDamping: 10 }}
      />
    </Container>
  );
};

const Circle = styled(motion.div)`
  height: 100px;
  width: 100px;
  border-style: solid;
  border-width: 5px;
  border-radius: 50%;
  border-color: black;
  cursor: grab;
`;
const Container = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 450px;
`;

Upvotes: 0

Views: 3633

Answers (1)

pho_pho
pho_pho

Reputation: 734

The answer lies in this pull request: https://github.com/framer/motion/pull/984

You can pass dragElastic an object and set the value to 0 on the side that you don't want the user to be able to drag towards:

dragElastic = {{top: 0, bottom: 0.3}}

Upvotes: 4

Related Questions