forked from nandorojo/moti
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request nandorojo#270 from nandorojo/stackblitz
Move examples from Expo Snack to StackBlitz
- Loading branch information
Showing
13 changed files
with
69 additions
and
233 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,7 +1,8 @@ | ||
| --- | ||
| id: action-menu | ||
| title: Action Menu | ||
| hide_title: true | ||
| hide_table_of_contents: true | ||
| --- | ||
|
|
||
| <div data-snack-id="@alevy97/action-menu" data-snack-platform="web" data-snack-preview="true" data-snack-theme="dark" style={{height:"700px"}}></div> | ||
| <script async src="https://snack.expo.dev/embed.js"></script> | ||
| <iframe src="https://stackblitz.com/edit/nextjs-tgyt13?embed=1&file=pages/index.tsx" className="stackblitz" /> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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" /> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,104 +1,8 @@ | ||
| --- | ||
| id: variants | ||
| title: Variants | ||
| hide_title: true | ||
| hide_table_of_contents: true | ||
| --- | ||
|
|
||
| Variants are a common use case for animations. Moti makes this easy. | ||
|
|
||
| ```tsx | ||
| import React from 'react' | ||
| import { StyleSheet, Pressable } from 'react-native' | ||
| import { MotiView, useAnimationState } from 'moti' | ||
|
|
||
| // you can create a reusable animation preset | ||
| const useFadeInDown = () => { | ||
| return useAnimationState({ | ||
| from: { | ||
| opacity: 0, | ||
| translateY: -15, | ||
| }, | ||
| to: { | ||
| opacity: 1, | ||
| translateY: 0, | ||
| }, | ||
| }) | ||
| } | ||
|
|
||
| function Shape() { | ||
| const fadeInDown = useFadeInDown() | ||
|
|
||
| const scaleIn = useAnimationState({ | ||
| from: { | ||
| scale: 0.5, | ||
| }, | ||
| open: { | ||
| scale: 1, | ||
| }, | ||
| big: { | ||
| scale: 1.5, | ||
| }, | ||
| }) | ||
|
|
||
| const onPress = () => { | ||
| fadeInDown.transitionTo((state) => { | ||
| if (state === 'from') { | ||
| return 'to' | ||
| } else { | ||
| return 'from' | ||
| } | ||
| }) | ||
|
|
||
| if (scaleIn.current === 'from') { | ||
| scaleIn.transitionTo('open') | ||
| } else if (scaleIn.current === 'open') { | ||
| scaleIn.transitionTo('big') | ||
| } else { | ||
| scaleIn.transitionTo('from') | ||
| } | ||
| } | ||
|
|
||
| return ( | ||
| <Pressable onPress={onPress}> | ||
| <MotiView delay={300} state={fadeInDown} style={styles.shape} /> | ||
| <MotiView | ||
| transition={{ | ||
| type: 'spring', | ||
| }} | ||
| delay={300} | ||
| state={scaleIn} | ||
| style={[styles.shape, styles.shape2]} | ||
| /> | ||
| </Pressable> | ||
| ) | ||
| } | ||
|
|
||
| export default function Variants() { | ||
| return ( | ||
| <MotiView style={styles.container}> | ||
| <Shape /> | ||
| </MotiView> | ||
| ) | ||
| } | ||
|
|
||
| const styles = StyleSheet.create({ | ||
| shape: { | ||
| justifyContent: 'center', | ||
| height: 250, | ||
| width: 250, | ||
| borderRadius: 25, | ||
| marginRight: 10, | ||
| backgroundColor: 'black', | ||
| }, | ||
| shape2: { | ||
| backgroundColor: 'hotpink', | ||
| marginTop: 16, | ||
| }, | ||
| container: { | ||
| flex: 1, | ||
| alignItems: 'center', | ||
| justifyContent: 'center', | ||
| flexDirection: 'row', | ||
| backgroundColor: 'cyan', | ||
| }, | ||
| }) | ||
| ``` | ||
| <iframe src="https://stackblitz.com/edit/nextjs-ephjdq?embed=1&file=pages/index.tsx" className="stackblitz" /> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.