framer-motion#useAnimation TypeScript Examples
The following examples show how to use
framer-motion#useAnimation.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: useInViewAnimate.ts From framer-motion-hooks with MIT License | 6 votes |
|
useInViewAnimate = (
{ initial, animate }: IStates,
options: IntersectionOptions = {}
) => {
const animation = useAnimation()
const [inViewRef, inView] = useInView(options)
useEffect(() => {
if (initial) animation.set(initial)
}, [])
useEffect(() => {
if (inView) {
animation.start(animate)
} else if (initial && options.triggerOnce === false) {
animation.start(initial)
}
}, [inView])
return { inViewRef, animation }
}
Example #2
| Source File: IconGrid.tsx From phosphor-home with MIT License | 5 votes |
|
IconGrid: React.FC<IconGridProps> = () => {
const weight = useRecoilValue(iconWeightAtom);
const size = useRecoilValue(iconSizeAtom);
const color = useRecoilValue(iconColorAtom);
const isDark = useRecoilValue(isDarkThemeSelector);
const spans = useGridSpans();
const filteredQueryResults = useRecoilValue(filteredQueryResultsSelector);
const originOffset = useRef({ top: 0, left: 0 });
const controls = useAnimation();
useEffect(() => {
controls.start("visible");
}, [controls, filteredQueryResults]);
if (!filteredQueryResults.length)
return (
<Notice>
<span>Try searching a category or keyword:</span>
<TagCloud name="empty-state" isDark={isDark} tags={defaultSearchTags} />
</Notice>
);
return (
<IconContext.Provider value={{ weight, size, color, mirrored: false }}>
<div
className="grid-container"
style={{ backgroundColor: isDark ? "#35313D" : "" }}
>
<i id="beacon" className="beacon" />
<motion.div
className="grid"
initial="hidden"
animate={controls}
variants={{}}
>
{filteredQueryResults.map((iconEntry, index) => (
<IconGridItem
key={index}
index={index}
spans={spans}
isDark={isDark}
entry={iconEntry}
originOffset={originOffset}
/>
))}
</motion.div>
</div>
</IconContext.Provider>
);
}
Example #3
| Source File: ActionCard.tsx From nosgestesclimat-site with MIT License | 4 votes |
|
Card = ({ children, style, onVote, id, ...props }) => {
// motion stuff
const cardElem = useRef(null)
const x = useMotionValue(0)
const controls = useAnimation()
const [constrained, setConstrained] = useState(true)
const [direction, setDirection] = useState()
const [velocity, setVelocity] = useState()
const getVote = (childNode, parentNode) => {
const childRect = childNode.getBoundingClientRect()
const parentRect = parentNode.getBoundingClientRect()
let result =
parentRect.left >= childRect.right
? false
: parentRect.right <= childRect.left
? true
: undefined
return result
}
// determine direction of swipe based on velocity
const getDirection = () => {
return velocity >= 1 ? 'right' : velocity <= -1 ? 'left' : undefined
}
const getTrajectory = () => {
setVelocity(x.getVelocity())
setDirection(getDirection())
}
const flyAway = (min) => {
const flyAwayDistance = (direction) => {
const parentWidth = cardElem.current.parentNode.getBoundingClientRect()
.width
const childWidth = cardElem.current.getBoundingClientRect().width
return direction === 'left'
? -parentWidth / 2 - childWidth / 2
: parentWidth / 2 + childWidth / 2
}
if (direction && Math.abs(velocity) > min) {
setConstrained(false)
controls.start({
x: flyAwayDistance(direction),
})
}
}
useEffect(() => {
const unsubscribeX = x.onChange(() => {
const childNode = cardElem.current
const parentNode = cardElem.current.parentNode
const result = getVote(childNode, parentNode)
result !== undefined && onVote(result)
})
return () => unsubscribeX()
})
const xInput = [-100, 0, 100]
const background = useTransform(x, xInput, [
'linear-gradient(180deg, #f2a4f4 0%, #f49494 100%)',
'linear-gradient(180deg, #fff 0%, #fff 100%)',
'linear-gradient(180deg, rgb(230, 255, 0) 0%, rgb(3, 209, 0) 100%)',
])
return (
<StyledCard
animate={controls}
dragConstraints={constrained && { left: 0, right: 0, top: 0, bottom: 0 }}
dragElastic={1}
ref={cardElem}
style={{ x }}
onDrag={getTrajectory}
myBackground={background}
onDragEnd={() => flyAway(500)}
whileTap={{ scale: 1.1 }}
{...props}
>
{children}
</StyledCard>
)
}
Example #4
| Source File: index.tsx From color-copy-paste with MIT License | 4 votes |
|
IndexPage = () => {
const controls = useAnimation()
const controlSlider = useAnimation()
const controlColor = useAnimation()
const [color, setColor] = React.useState("#DDDDDD")
const [colors, setColors] = React.useState([])
const canvasRef = React.useRef(null)
const sliderRef = React.useRef(null)
const renderCanvas = () => {
try {
const canvas = canvasRef.current
var context = canvas.getContext("2d")
canvas.width = 1080
canvas.height = 152
context.drawImage(sliderRef.current, 0, 0, 1080, 152)
} catch (e) {
console.log(e)
}
}
React.useEffect(() => {
controls.start({ x: 720 }, { damping: 300 })
controlSlider.start({ x: -800 }, { damping: 300 })
setTimeout(() => renderCanvas(), 500)
setTimeout(() => renderCanvas(), 1500)
}, [])
return (
<>
<SEO title="Color Copy Paste" />
<div
style={{
margin: `0 auto`,
maxWidth: 960,
padding: `0 1.0875rem 1.45rem`,
}}
>
<div className="header">
<div className="header-column">
<div className="header-wrap">
<img src={Logo} style={{ marginBottom: 16 }} />
<h1 style={{ display: "none" }}>Color Copy Paste</h1>
<a
className="github-button"
href="https://github.com/sonnylazuardi/color-copy-paste"
data-size="large"
data-show-count="true"
aria-label="Star sonnylazuardi/color-copy-paste on GitHub"
>
Star
</a>
</div>
</div>
<div className="header-column column-two">
<div className="header-wrap">
<div className="header-label">
Copy & paste colour directly from your camera to:
</div>
<a
href="https://www.figma.com/community/plugin/845733021314534317/Camera-Color-Copy-Paste"
className="button-web button-blue"
>
<img className="button-icon" src={IconFigma} />
Figma Plugin
</a>
<a
href="color-copy-paste.sketchplugin.zip"
className="button-web button-yellow"
>
<img className="button-icon" src={IconSketch} />
Sketch Plugin
</a>
<Link to="app" className="button-web button-yellow">
<img className="button-icon" src={IconBrowser} />
Web Browser
</Link>
</div>
</div>
</div>
<img
src={BgSlider}
ref={sliderRef}
style={{ width: 1080, height: 152, display: "none" }}
onLoad={() => renderCanvas()}
/>
<canvas ref={canvasRef} style={{ display: "none" }}></canvas>
<img src={BgStatic} className="content-static" />
<motion.div
className="content-default"
onMouseMove={e => {
function getElementOffset(element) {
var de = document.documentElement
var box = element.getBoundingClientRect()
var left = box.left + window.pageXOffset - de.clientLeft
return left
}
const relativeX = e.pageX - getElementOffset(e.target)
if (relativeX > 70 && relativeX < 790) {
controls.start(
{
x: relativeX,
},
{ damping: 300 }
)
controlSlider.start(
{
x: relativeX * -1 - 180,
},
{ damping: 300 }
)
const canvas = canvasRef.current
var context = canvas.getContext("2d")
var pixel = context.getImageData(relativeX + 224, 68, 1, 1).data
controlColor.start({
backgroundColor: `rgb(${pixel[0]},${pixel[1]},${pixel[2]})`,
})
setColor(rgbToHex(pixel[0], pixel[1], pixel[2]))
}
}}
onClick={() => {
setColors([...colors, color])
}}
>
<div style={{ height: 500, overflow: "hidden" }}>
<img src={BgDesk} style={{ width: "100%" }} draggable={false} />
</div>
<motion.div
drag="x"
dragConstraints={{
left: -100,
right: 200,
}}
animate={controls}
className="control-hand"
style={{
backgroundImage: `url(${Hand})`,
}}
>
<div className="phone-screen">
<motion.div
animate={controlSlider}
className="control-slider"
style={{
backgroundImage: `url(${BgSlider})`,
}}
/>
</div>
<div className="bubble">
<motion.div animate={controlColor} className="control-color" />
{color.toUpperCase()}
</div>
</motion.div>
<div className="pallete">
{colors.length > 0 ? (
<AnimatePresence>
<div className="grid-demo">
{colors.map((item: any, i: number) => {
return (
<motion.div
key={i}
className="color-demo"
initial={{ scale: 0 }}
animate={{ scale: 1 }}
exit={{ scale: 0 }}
style={{ backgroundColor: item }}
onClick={() => {
copyTextToClipboard(item)
}}
></motion.div>
)
})}
</div>
</AnimatePresence>
) : (
<div className="empty">
<img src={IconClick} style={{ marginBottom: 8 }} />
Click to capture colour
</div>
)}
</div>
</motion.div>
</div>
<div className="section">
<div
style={{
margin: `0 auto`,
maxWidth: 960,
padding: `0 1.0875rem 1.45rem`,
}}
>
<div className="row">
<div className="column">
<div className="box">
<h3>How can I copy color?</h3>
<p>
Tap and hold the capture button located in the bottom of your
screen. Release to paste it to web browser or plugin.
</p>
</div>
</div>
<div className="column">
<div className="box">
<h3>Where is my color saved?</h3>
<p>
It is saved inside the local storage of the plugin or web
browser.
</p>
</div>
</div>
<div className="column">
<div className="box">
<h3>How does my phone connect?</h3>
<p>
The app uses socket to connect phone to your computer. It will
generate unique id when showing QR Code.
</p>
</div>
</div>
<div className="column">
<div className="box">
<h3>Can I save to color style?</h3>
<p>
Currently not yet, but you can click on the color to change
the object's color and copy the hex code
</p>
</div>
</div>
</div>
</div>
</div>
<div
style={{
display: "flex",
alignItems: "center",
justifyContent: "center",
marginTop: 80,
padding: 16,
}}
>
<blockquote className="twitter-tweet" data-theme="dark">
<a href="https://twitter.com/sonnylazuardi/status/1263895972456697856">
@sonnylazuardi
</a>
</blockquote>
</div>
<div className="section-dark">
<div
style={{
margin: `0 auto`,
maxWidth: 960,
padding: `0 1.0875rem 1.45rem`,
}}
>
<h2>What others are saying</h2>
<div className="row">
<div className="column">
<div className="card">
<div
className="card-avatar"
style={{ backgroundImage: `url(${avatar1})` }}
/>
<div className="card-comment">
Well this just might be the coolest plugin I've ever reviewed.
:) Great job on this.
</div>
<div className="card-name">Josh, Figma Review</div>
</div>
</div>
<div className="column">
<div className="card">
<div
className="card-avatar"
style={{ backgroundImage: `url(${avatar2})` }}
/>
<div className="card-comment">
Get the inspiration from nature, so... going out door to pick
colour
</div>
<div className="card-name">Clu, Product Designer</div>
</div>
</div>
<div className="column">
<div className="card">
<div
className="card-avatar"
style={{ backgroundImage: `url(${avatar7})` }}
/>
<div className="card-comment">
Yeah nooo! This is some crazy stuff right here @sonnylazuardi
More reasons why we love the @figmadesign community ?
</div>
<div className="card-name">Uche, Product Designer</div>
</div>
</div>
<div className="column">
<div className="card">
<div
className="card-avatar"
style={{ backgroundImage: `url(${avatar4})` }}
/>
<div className="card-comment">
So cool, moving 3D real world elements into 2D interface or
digital world, the boundary is becoming blur.
</div>
<div className="card-name">Mi Yuhao, AI UX Designer</div>
</div>
</div>
<div className="column">
<div className="card">
<div
className="card-avatar"
style={{ backgroundImage: `url(${avatar5})` }}
/>
<div className="card-comment">This is neat!</div>
<div className="card-name">Ernest Ojeh, Product Designer</div>
</div>
</div>
<div className="column">
<div className="card">
<div
className="card-avatar"
style={{ backgroundImage: `url(${avatar6})` }}
/>
<div className="card-comment">Gokil sekali</div>
<div className="card-name">Dimas, Product Designer</div>
</div>
</div>
<div className="column">
<div className="card">
<div
className="card-avatar"
style={{ backgroundImage: `url(${avatar3})` }}
/>
<div className="card-comment">So goood mas!</div>
<div className="card-name">Afnizar, UX Designer</div>
</div>
</div>
<div className="column">
<div className="card">
<div
className="card-avatar"
style={{ backgroundImage: `url(${avatar8})` }}
/>
<div className="card-comment">
@sonnylazuardi built a @figmadesign plugin through a @framer
prototype ?
</div>
<div className="card-name">
Addison, Frontend Dev & Designer
</div>
</div>
</div>
<div className="column">
<div className="card">
<div
className="card-avatar"
style={{ backgroundImage: `url(${avatar9})` }}
/>
<div className="card-comment">
Marvellous plugin as always! Easy to use yet useful. Hats off!
</div>
<div className="card-name">Tyas, Product Designer</div>
</div>
</div>
<div className="column">
<div className="card">
<div
className="card-avatar"
style={{ backgroundImage: `url(${avatar10})` }}
/>
<div className="card-comment">
That’s pretty insane. Great work!
</div>
<div className="card-name">
Andy Ngo, Designer & Frontend Dev
</div>
</div>
</div>
<div className="column">
<div className="card">
<div
className="card-avatar"
style={{ backgroundImage: `url(${avatar11})` }}
/>
<div className="card-comment">Sorcery ?♂️</div>
<div className="card-name">Arif Eka, UI Designer</div>
</div>
</div>
<div className="column">
<div className="card">
<div
className="card-avatar"
style={{ backgroundImage: `url(${avatar12})` }}
/>
<div className="card-comment">You’re on a roll ?</div>
<div className="card-name">Gaddafi Rusli, Product Designer</div>
</div>
</div>
<div className="column">
<div className="card">
<div
className="card-avatar"
style={{ backgroundImage: `url(${avatar14})` }}
/>
<div className="card-comment">
This is amazing! Looking forward to the plugin ?
</div>
<div className="card-name">Soliudeen, Product Designer</div>
</div>
</div>
<div className="column">
<div className="card">
<div
className="card-avatar"
style={{ backgroundImage: `url(${avatar13})` }}
/>
<div className="card-comment">?</div>
<div className="card-name">Jacky Lee, Product Designer</div>
</div>
</div>
</div>
</div>
</div>
<div className="section-footer">
<div className="footer-caption">
This project was built for fun and to explore what’s possible with
design plugin. If you like this app, give me a{" "}
<a href="https://twitter.com/sonnylazuardi">follow on twitter</a>, an
upvote in{" "}
<a href="https://www.producthunt.com/posts/color-copy-paste">
Product Hunt
</a>{" "}
or star on{" "}
<a href="https://github.com/sonnylazuardi/color-copy-paste">github</a>
. We built this to give back ? to the design community.
</div>
<div className="producthunt-wrap">
<a
href="https://www.producthunt.com/posts/color-copy-paste?utm_source=badge-top-post-badge&utm_medium=badge&utm_souce=badge-color-copy-paste"
target="_blank"
>
<img
src="https://api.producthunt.com/widgets/embed-image/v1/top-post-badge.svg?post_id=205039&theme=dark&period=daily"
alt="Color Copy Paste - Copy colors from your phone & paste on web, figma, or sketch | Product Hunt Embed"
style={{ width: 250, height: 54 }}
width="250px"
height="54px"
/>
</a>
</div>
<div className="footer">
Built by{" "}
<a href="https://twitter.com/sonnylazuardi">@sonnylazuardi</a> in
Singapore. Illustrated by{" "}
<a href="https://dribbble.com/alzea">Alzea Arafat</a>
</div>
</div>
</>
)
}
