docs

surajbhan · Mar 1, 2023 · f666d53 · f666d53
1 parent 33d770f
commit f666d53
Show file tree

Hide file tree

Showing 7 changed files with 50 additions and 102 deletions.
diff --git a/docs/docs/examples/animate-presence.md b/docs/docs/examples/animate-presence.md
@@ -1,8 +1,12 @@
 ---
-id: animate-presence
-title: Animate Presence
+hide_title: true
+hide_table_of_contents: true
+sidebar_label: Animate Presence
 ---
 
+<iframe src="https://stackblitz.com/edit/nextjs-pxczpl?embed=1&file=pages/index.js" className="stackblitz" />
+
+<!--
 See a video of this example [here](https://twitter.com/FernandoTheRojo/status/1349884929765765123).
 
 ```tsx
@@ -58,4 +62,4 @@ const styles = StyleSheet.create({
     backgroundColor: '#9c1aff',
   },
 })
-```
+``` -->
diff --git a/docs/docs/examples/exit-before-enter.md b/docs/docs/examples/exit-before-enter.md
@@ -1,15 +1,7 @@
 ---
-id: exit-before-enter
-title: Exit Before Enter
+hide_title: true
+hide_table_of_contents: true
+sidebar_label: Exit Before Enter
 ---
 
-Smoothly hide one component before you let its sibling enter.
-
-Make sure each direct child of `AnimatePresence` has a unique and stable `key`.
-
-Also, enable the `exitBeforeEnter` prop.
-
-See a video of this example [here](https://twitter.com/FernandoTheRojo/status/1351234878902333445).
-
-<div data-snack-id="@beatgig/exit-before-enter" data-snack-platform="web" data-snack-preview="true" data-snack-theme="dark"></div>
-<script async src="https://snack.expo.dev/embed.js"></script>
+<iframe src="https://stackblitz.com/edit/nextjs-dc1m4i?file=pages/index.tsx" className="stackblitz" />
diff --git a/docs/docs/examples/hello-world.md b/docs/docs/examples/hello-world.md
@@ -1,9 +1,12 @@
 ---
 id: hello-world
 title: Hello World
+hide_table_of_contents: true
 ---
 
-This is all it takes to create an animation that fades and scales in with Moti:
+<iframe src="https://stackblitz.com/edit/nextjs-nzbmjn?embed=1&file=pages/index.tsx"  className="stackblitz" />
+
+<!-- This is all it takes to create an animation that fades and scales in with Moti:
 
 ```tsx
 import React, { useReducer } from 'react'
@@ -56,4 +59,4 @@ const styles = StyleSheet.create({
     backgroundColor: '#9c1aff',
   },
 })
-```
+``` -->
diff --git a/docs/docs/examples/loop.md b/docs/docs/examples/loop.md
@@ -1,6 +1,7 @@
 ---
 id: loop
 title: Loop Animation
+hide_table_of_contents: true
 ---
 
 Create a loop animation of a box that goes up and down infinitely.
@@ -11,61 +12,7 @@ Loop animations cannot be changed on the fly. If you want to restart a loop, you
 See the explanation at the bottom.
 :::
 
-### Code
-
-```tsx
-import React, { useReducer } from 'react'
-import { StyleSheet } from 'react-native'
-import { MotiView } from 'moti'
-
-function Shape() {
-  return (
-    <MotiView
-      from={{
-        translateY: -100,
-      }}
-      animate={{
-        translateY: 0,
-      }}
-      transition={{
-        loop: true,
-        type: 'timing',
-        duration: 1500,
-        delay: 100,
-      }}
-      style={styles.shape}
-    />
-  )
-}
-
-export default function Loop() {
-  return (
-    <MotiView style={styles.container}>
-      <Shape />
-    </MotiView>
-  )
-}
-
-const styles = StyleSheet.create({
-  shape: {
-    justifyContent: 'center',
-    height: 250,
-    width: 250,
-    borderRadius: 25,
-    marginRight: 10,
-    backgroundColor: 'white',
-  },
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-    flexDirection: 'row',
-    backgroundColor: '#9c1aff',
-  },
-})
-```
-
-To restart a `loop`, you must re-render the component and change its `key` prop. Every time the `key` changes, it will restart its animation.
+<iframe src="https://stackblitz.com/edit/nextjs-tn7loi?file=pages/index.tsx" className="stackblitz" />
 
 ### Warning
 

diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css
@@ -61,12 +61,12 @@
 }
 
 [data-snack-id] {
-  overflow:hidden;
-  background:#212121;
-  border:1px solid var(--color-border);
-  border-radius:4px;
-  height:505px;
-  width:100%;
+  overflow: hidden;
+  background: #212121;
+  border: 1px solid var(--color-border);
+  border-radius: 4px;
+  height: 505px;
+  width: 100%;
 }
 
 /**
@@ -98,7 +98,6 @@
   --ifm-toc-border-color: var(--ifm-border-color);
   --ifm-background-color: white;
 
-
   --ifm-navbar-shadow: 0 0 0 1px var(--ifm-border-color);
   --ifm-container-width-xl: 1140px;
   /* background-color */
@@ -119,7 +118,7 @@
   --ifm-color-primary-lighter: #7d26ff;
   --ifm-color-primary-lightest: #944dff; */
 
-  --ifm-menu-color-background-active: #E4DEFC;
+  --ifm-menu-color-background-active: #e4defc;
   --ifm-menu-color-active: var(--ifm-color-content);
 }
 
@@ -192,8 +191,7 @@ p {
 
   --ifm-code-border-radius: 16px;
 
-
-  --ifm-menu-color-background-active: #32275F;
+  --ifm-menu-color-background-active: #32275f;
 }
 
 html[data-theme='dark'] .docusaurus-highlight-code-line {
@@ -208,18 +206,25 @@ html[data-theme='dark'] .docusaurus-highlight-code-line {
 }
 
 main img {
-  border-radius: 16px
+  border-radius: 16px;
 }
 
 .navbar--fixed-top {
   backdrop-filter: blur(12px);
   background-color: transparent;
 }
 
-.menu__link, .menu__list-item-collapsible {
+.menu__link,
+.menu__list-item-collapsible {
   border-radius: 999px;
 }
 
 aside {
-  border-right-width: 0px!important;
+  border-right-width: 0px !important;
+}
+
+.stackblitz {
+  width: 100%;
+  border: none;
+  height: 800px;
 }
diff --git a/docs/yarn.lock b/docs/yarn.lock
@@ -8390,15 +8390,14 @@ react-dev-utils@^10.2.1:
     strip-ansi "6.0.0"
     text-table "0.2.0"
 
-react-dom@^16.8.4:
-  version "16.14.0"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.14.0.tgz#7ad838ec29a777fb3c75c3a190f661cf92ab8b89"
-  integrity sha512-1gCeQXDLoIqMgqD3IO2Ah9bnf0w9kzhwN5q4FGnHZ67hBm9yePzB5JJAIQCc8x3pFnNlwFq4RidZggNAAkzWWw==
+react-dom@17.0.1:
+  version "17.0.1"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.1.tgz#1de2560474ec9f0e334285662ede52dbc5426fc6"
+  integrity sha512-6eV150oJZ9U2t9svnsspTMrWNyHc6chX0KzDeAOXftRa8bNeOKTTfCJ7KorIwenkHd2xqVTBTCZd79yk/lx/Ug==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
-    prop-types "^15.6.2"
-    scheduler "^0.19.1"
+    scheduler "^0.20.1"
 
 react-error-overlay@^6.0.7:
   version "6.0.9"
@@ -8509,14 +8508,13 @@ react-toggle@^4.1.1:
   dependencies:
     classnames "^2.2.5"
 
-react@^16.8.4:
-  version "16.14.0"
-  resolved "https://registry.yarnpkg.com/react/-/react-16.14.0.tgz#94d776ddd0aaa37da3eda8fc5b6b18a4c9a3114d"
-  integrity sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==
+react@17.0.1:
+  version "17.0.1"
+  resolved "https://registry.yarnpkg.com/react/-/react-17.0.1.tgz#6e0600416bd57574e3f86d92edba3d9008726127"
+  integrity sha512-lG9c9UuMHdcAexXtigOZLX8exLWkW0Ku29qPRU8uhF2R9BN96dLCt0psvzPLlHc5OWkgymP3qwTRgbnw5BKx3w==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
-    prop-types "^15.6.2"
 
 "readable-stream@1 || 2", readable-stream@^2.0.0, readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.1.5, readable-stream@^2.2.2, readable-stream@^2.3.3, readable-stream@^2.3.6, readable-stream@~2.3.6:
   version "2.3.7"
@@ -8937,10 +8935,10 @@ sax@^1.2.4, sax@~1.2.4:
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
   integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
 
-scheduler@^0.19.1:
-  version "0.19.1"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.19.1.tgz#4f3e2ed2c1a7d65681f4c854fa8c5a1ccb40f196"
-  integrity sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==
+scheduler@^0.20.1:
+  version "0.20.2"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.2.tgz#4baee39436e34aa93b4874bddcbf0fe8b8b50e91"
+  integrity sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"

diff --git a/examples/with-expo/src/Moti.ExitBeforeEnter.tsx b/examples/with-expo/src/Moti.ExitBeforeEnter.tsx
@@ -1,7 +1,6 @@
-import { AnimatePresence } from 'framer-motion'
 import React, { useReducer } from 'react'
 import { StyleSheet, Pressable } from 'react-native'
-import { View } from 'moti'
+import { AnimatePresence, View } from 'moti'
 
 function Shape({ bg }: { bg: string }) {
   return (