Animation » Example Animations » 11. Drag: Constraints

11. Drag: Constraints

Add dragConstraints to limit how far you can drag a layer.

Code component

export default function CC_11_Drag_Constraints(props) {
    return (
        <div>
            <motion.div
                style={{
                    width: 150,
                    height: 150,
                    borderRadius: 30,
                    backgroundColor: "#fff",
                    cursor: "grab",
                }}
                drag
                dragConstraints={{
                    top: -125,
                    right: 125,
                    bottom: 125,
                    left: -125,
                }}
                dragTransition={{ bounceStiffness: 600, bounceDamping: 20 }}
                dragElastic={0.5}
                whileTap={{ cursor: "grabbing" }}
            />
        </div>
    )
}

Code override

export function Drag_Constraints(Component): ComponentType {
    return (props) => {
        return (
            <Component
                {...props}
                drag
                dragConstraints={{
                    top: -125,
                    right: 125,
                    bottom: 125,
                    left: -125,
                }}
                dragTransition={{ bounceStiffness: 600, bounceDamping: 20 }}
                dragElastic={0.5}
            />
        )
    }
}


Join the Framer book mailing list    ( ± 6 emails/year )

GDPR

We use Mailchimp as our marketing platform. By clicking below to subscribe, you acknowledge that your information will be transferred to Mailchimp for processing per their Privacy Policy and Terms.



Leave a Reply