motion-docs.db•1.33 MB
SQLite format 3 @ � E � W � � .�* � �
��d�����8� ��6 � �;;�Otablemotion_examples_fts_idxmotion_examples_fts_idxCREATE TABLE 'motion_examples_fts_idx'(segid, term, pgno, PRIMARY KEY(segid, term)) WITHOUT ROWID�==�#tablemotion_examples_fts_datamotion_examples_fts_dataCREATE TABLE 'motion_examples_fts_data'(id INTEGER PRIMARY KEY, block BLOB)�\33�atablemotion_examples_ftsmotion_examples_ftsCREATE VIRTUAL TABLE motion_examples_fts USING fts5(
title, description, code, tags,
content='motion_examples',
content_rowid='id'
)~99�tablemotion_docs_fts_configmotion_docs_fts_configCREATE TABLE 'motion_docs_fts_config'(k PRIMARY KEY, v) WITHOUT ROWID�;;�tablemotion_docs_fts_docsizemotion_docs_fts_docsizeCREATE TABLE 'motion_docs_fts_docsize'(id INTEGER PRIMARY KEY, sz BLOB)�33�Gtablemotion_docs_fts_idxmotion_docs_fts_idxCREATE TABLE 'motion_docs_fts_idx'(segid, term, pgno, PRIMARY KEY(segid, term)) WITHOUT ROWID|55�tablemotion_docs_fts_datamotion_docs_fts_dataCREATE TABLE 'motion_docs_fts_data'(id INTEGER PRIMARY KEY, block BLOB)�O
++�Wtablemotion_docs_ftsmotion_docs_ftsCREATE VIRTUAL TABLE motion_docs_fts USING fts5(
title, description, content, tags,
content='motion_docs',
content_rowid='id'
)~E+�indexidx_motion_examples_categorymotion_examples
CREATE INDEX idx_motion_examples_category ON motion_examples(category)�G+�indexidx_motion_examples_frameworkmotion_examplesCREATE INDEX idx_motion_examples_framework ON motion_examples(framework)z
A/�indexidx_motion_components_namemotion_componentsCREATE INDEX idx_motion_components_name ON motion_components(name)� K/�%indexidx_motion_components_frameworkmotion_components
CREATE INDEX idx_motion_components_framework ON motion_components(framework)^3#uindexidx_motion_docs_urlmotion_docs CREATE INDEX idx_motion_docs_url ON motion_docs(url)n=#� indexidx_motion_docs_categorymotion_docsCREATE INDEX idx_motion_docs_category ON motion_docs(category)q?#�
indexidx_motion_docs_frameworkmotion_docsCREATE INDEX idx_motion_docs_framework ON motion_docs(framework)�++�Ctablemotion_examplesmotion_examplesCREATE TABLE motion_examples (
id INTEGER PRIMARY KEY AUTOINCREMENT,
title TEXT NOT NULL,
description TEXT,
framework TEXT NOT NULL CHECK(framework IN ('react', 'js', 'vue')),
category TEXT,
code TEXT NOT NULL,
tags TEXT, -- JSON array of tags
difficulty TEXT CHECK(difficulty IN ('beginner', 'intermediate', 'advanced')),
related_docs_id INTEGER,
created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
FOREIGN KEY (related_docs_id) REFERENCES motion_docs(id)
)�
//�Itablemotion_componentsmotion_componentsCREATE TABLE motion_components (
id INTEGER PRIMARY KEY AUTOINCREMENT,
name TEXT NOT NULL,
framework TEXT NOT NULL CHECK(framework IN ('react', 'js', 'vue')),
type TEXT CHECK(type IN ('component', 'function', 'hook', 'utility')),
description TEXT,
props TEXT, -- JSON object of props/parameters
methods TEXT, -- JSON array of methods
examples TEXT, -- JSON array of examples
related_docs_id INTEGER,
FOREIGN KEY (related_docs_id) REFERENCES motion_docs(id)
)P++Ytablesqlite_sequencesqlite_sequenceCREATE TABLE sqlite_sequence(name,seq)�##�Otablemotion_docsmotion_docsCREATE TABLE motion_docs (
id INTEGER PRIMARY KEY AUTOINCREMENT,
url TEXT UNIQUE NOT NULL,
title TEXT NOT NULL,
framework TEXT NOT NULL CHECK(framework IN ('react', 'js', 'vue')),
category TEXT,
description TEXT,
content TEXT NOT NULL,
examples TEXT, -- JSON array of code examples
api_reference TEXT, -- JSON object of API information
is_deprecated INTEGER DEFAULT 0,
is_react INTEGER DEFAULT 0,
is_js INTEGER DEFAULT 0,
is_vue INTEGER DEFAULT 0,
tags TEXT, -- JSON array of tags
last_updated DATETIME DEFAULT CURRENT_TIMESTAMP,
created_at DATETIME DEFAULT CURRENT_TIMESTAMP
)5I# indexsqlite_autoindex_motion_docs_1motion_ � \������������������ �)> GO+�A��] �M33https://motion.dev/docs/reactGet started with Motion for Reactreactgetting-startedLearn Motion for React animation library: Install, animate HTML and SVG elements with spring animations, staggering effects. Complete guide with examples.**Motion for React** is a React animation library for building smooth, production-grade UI animations. You can start with simple prop-based animations before growing to layout, gesture and scroll animations.
Motion's unique **hybrid engine** combines the performance of native browser animations with the flexibility of JavaScript.
It's also trusted by companies like [Framer](https://framer.com) and [Figma](https://figma.com) to power their amazing no-code animations and gestures.
In this guide, we'll learn how to install Motion and take a whirlwind tour of its main features.
Install
-------
Motion is available via npm:
```
npm install motion
```
Features can now be imported via `"motion/react"`:
```
import { motion } from "motion/react"
```
**Note:** Motion for React includes React-specific APIs. All [vanilla Motion features](./quick-start) are also available.
Your first animation
--------------------
[The](./react-motion-component) `[<motion />](./react-motion-component)` [component](./react-motion-component) is the core API in Motion for React. It's a normal DOM element, supercharged with animation capabilities.
```
<motion.ul animate\={{ rotate: 360 }} />
```
When values in `animate` change, the component will animate. Motion has intuitive defaults, but animations can of course be configured via [the](./react-transitions) `[transition](./react-transitions)` [prop](./react-transitions).
```
<motion.div
animate\={{
scale: 2,
transition: { duration: 2 }
}}
/>
```
Enter animation
---------------
When a component enters the page, it will automatically animate to the values defined in the `animate` prop.
You can provide values to animate from via the `initial` prop (otherwise these will be read from the DOM).
```
<motion.button initial\={{ scale: 0 }} animate\={{ scale: 1 }} />
```
Or disable this initial animation entirely by setting `initial` to `false`.
```
<motion.button initial\={false} animate\={{ scale: 1 }} />
```
Hover & tap animation
---------------------
`<motion />` extends React's event system with powerful [gesture animations](./react-gestures). It currently supports hover, tap, focus, and drag.
```
<motion.button
whileHover\={{ scale: 1.1 }}
whileTap\={{ scale: 0.95 }}
onHoverStart\={() \=> console.log('hover started!')}
/>
```
Motion's gestures are designed to feel better than using CSS or JavaScript events alone.
Scroll animation
----------------
Motion supports both types of [scroll animations](./react-scroll-animations): **Scroll-triggered** and **scroll-linked**.
To trigger an animation on scroll, the `whileInView` prop defines a state to animate to/from when an element enters/leaves the viewport:
```
<motion.div
initial\={{ backgroundColor: "rgb(0, 255, 0)", opacity: 0 }}
whileInView\={{ backgroundColor: "rgb(255, 0, 0)", opacity: 1 }}
/>
```
Whereas to link a value directly to scroll position, it's possible to use `MotionValue`s via `useScroll`.
```
const { scrollYProgress } = useScroll()
return <motion.div style\={{ scaleX: scrollYProgress }} />
```
Layout animation
----------------
Motion has an industry-leading [layout animation](./react-layout-animations) engine that supports animating between changes in layout using transforms.
It's as easy as apply OU TT tS qQ �O �N �M eL �K SJ 5I rG �E �C 3B dA 0@ >
� F
/������j���
�
XUfC
/�
�
�x (Uhttps://motion.dev/docs/motion-valueW,]https://motion.dev/docs/easing-functionsV%Ohttps://motion.dev/docs/transformU"Ihttps://motion.dev/docs/resizeT+[https://motion.dev/docs/vue-transitionsS!Ghttps://motion.dev/docs/pressR"Ihttps://motion.dev/docs/inviewQ!Ghttps://motion.dev/docs/hoverP#Khttps://motion.dev/docs/staggerO(Uhttps://motion.dev/docs/animate-viewN-_https://motion.dev/docs/react-transitionsM/chttps://motion.dev/docs/react-svg-animationL1ghttps://motion.dev/docs/vue-scroll-animationsK1ghttps://motion.dev/docs/vue-layout-animationsJ(Uhttps://motion.dev/docs/vue-gesturesI"Ihttps://motion.dev/docs/springH"Ihttps://motion.dev/docs/scrollG3khttps://motion.dev/docs/react-scroll-animationsF3khttps://motion.dev/docs/react-layout-animationsE*Yhttps://motion.dev/docs/react-gesturesD)Whttps://motion.dev/docs/vue-animationC#Khttps://motion.dev/docs/animateB+[https://motion.dev/docs/react-animationAChttps://motion.dev/docs/vue@'Shttps://motion.dev/docs/quick-start?!Ghttps://motion.dev/docs/react>
� � ��� +motion_examples #motion_docsW motion_com/motion_components �
� 2 ��]#
���p7��{ � � d -���M��Yl5���W��m6���X��7��S� 6�V
C animatejsfunctionMotion.dev animate function4�U
A MotionjsfunctionMotion.dev Motion function6�T
C animatejsfunctionMotion.dev animate function4�S
A MotionjsfunctionMotion.dev Motion function4�R
A MotionjsfunctionMotion.dev Motion function4�Q
A MotionjsfunctionMotion.dev Motion function7�P
C staggervuefunctionMotion.dev stagger function5�O
A springvuefunctionMotion.dev spring function=�N
!I TransitionvuefunctionMotion.dev Transition function5�M
A MotionvuefunctionMotion.dev Motion function4�L
A MotionjsfunctionMotion.dev Motion function4�K
A MotionjsfunctionMotion.dev Motion function4�J
A MotionjsfunctionMotion.dev Motion function6�I
C staggerjsfunctionMotion.dev stagger function4�H
A MotionjsfunctionMotion.dev Motion function4�G
A MotionjsfunctionMotion.dev Motion function
+ B�_
Y useScrollreacthookReact hook for scroll-based animations=�^
O hoverreactfunctionHover gesture animation functionsL�]
i animatereactfunctionCore animation function for element animations>�\
O scrollreactfunctionScroll-linked animation functionsQ�[
'e motion.buttonreactcomponentAnimated button element with gesture supportS�Z
!o motion.divreactcomponentAnimated div element with Motion.dev capabilities?�Y
I motion.ulreactcomponentMotion.dev motion.ul componentJ�X
+S AnimatePresencereactcomponentReact component for exit animations:�W
E MotionreactcomponentVue Motion component wrapper5�<
A scrollvuefunctionMotion.dev scroll function5�;
A MotionvuefunctionMotion.dev Motion functionG�:
+S AnimatePresencevuefunctionMotion.dev AnimatePresence function7�9
C animatevuefunctionMotion.dev animate function5�8
A MotionvuefunctionMotion.dev Motion function5�7
A MotionvuefunctionMotion.dev Motion function6�6
C animatejsfunctionMotion.dev animate function4�5
A springjsfunctionMotion.dev spring function4�4
A MotionjsfunctionMotion.dev Motion function6�3
C animatejsfunctionMotion.dev animate function4�2
A scrolljsfunctionMotion.dev scroll function4�1
A MotionjsfunctionMotion.dev Motion function
p G�*
+S AnimatePresencevuefunctionMotion.dev AnimatePresence function7�)
C animatevuefunctionMotion.dev animate function5�(
A MotionvuefunctionMotion.dev Motion function6�'
C staggerjsfunctionMotion.dev stagger function4�&
A springjsfunctionMotion.dev spring function6�%
C animatejsfunctionMotion.dev animate function4�$
A MotionjsfunctionMotion.dev Motion function>