How to use the react-pose.path function in react-pose
To help you get started, we’ve selected a few react-pose examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
carlos-kelly / publications / src / components / ui / icons / logo-badge.tsx View on Github 
import React from "react";
import posed from "react-pose";
const SouthwestAnglePath = posed.path({
end: {
opacity: 1,
transform: "translate(0, 0)",
transition: { delay: 500, duration: 1000, ease: "anticipate" },
},
start: { opacity: 0, transform: "translate(10, -10)" },
});
const NortheastAnglePath = posed.path({
end: {
opacity: 1,
transform: "translate(0, 0)",
transition: { delay: 500, duration: 1000, ease: "anticipate" },
},
start: { opacity: 0, transform: "translate(-10, 10)" },
});import React from "react";
import posed from "react-pose";
const SouthwestAnglePath = posed.path({
end: {
opacity: 1,
transform: "translate(0, 0)",
transition: { delay: 500, duration: 1000, ease: "anticipate" },
},
start: { opacity: 0, transform: "translate(10, -10)" },
});
const NortheastAnglePath = posed.path({
end: {
opacity: 1,
transform: "translate(0, 0)",
transition: { delay: 500, duration: 1000, ease: "anticipate" },
},
start: { opacity: 0, transform: "translate(-10, 10)" },
});
const SlidingArmRect = posed.rect({
end: {
height: 62,
transition: { delay: 1100, type: "spring", stiffness: 70 },
},
start: { height: 0 },
});draggable: 'x',
dragEnd: {
transition: ({ from, to, velocity }) =>
velocity === 0
? spring({ from, to: 0, velocity, stiffness: 750, damping: 50 })
: spring({
from,
to: velocity < 0 ? -500 : 500,
velocity,
stiffness: 750,
damping: 50
})
}
});
const Tick = posed.path({
passive: {
pathLength: ['x', clamp(0, 100), true]
}
});
const xToProgress = pipe(interpolate([110, 20], [1, 0]), clamp(0, 1));
const IconContainer = posed.div({
passive: {
opacity: ['x', xToProgress, true],
scale: ['x', xToProgress, true]
}
});
const EmailContainer = posed.div({
exit: { scaleY: 0, transition: tween },react-pose
A declarative animation library for React
