Created
March 9, 2022 23:21
-
-
Save romelperez/edae44663727170e9a08ba662d6bac13 to your computer and use it in GitHub Desktop.
Arwes animation system example.
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
/** @jsxImportSource @emotion/react */ | |
import { jsx } from '@emotion/react'; | |
import { ReactElement, useState, useEffect } from 'react'; | |
import { Animator, AnimatorGeneralProvider } from '@arwes/animator'; | |
import { Animated } from '@arwes/animated'; | |
const AnimatedItem = (props: { color: string }): ReactElement => { | |
return ( | |
<Animated | |
css={{ | |
display: 'block', | |
width: 100, | |
height: 100, | |
background: props.color | |
}} | |
animated={{ | |
initialStyle: { opacity: 0, x: 0 }, | |
transitions: { | |
entering: { opacity: 1, x: 100 }, | |
exiting: { opacity: 0, x: 0 } | |
} | |
}} | |
/> | |
); | |
}; | |
const PageTest = (): ReactElement => { | |
const [active, setActive] = useState(false); | |
useEffect(() => { | |
setTimeout(() => setActive(true), 1000); | |
setTimeout(() => setActive(false), 4000); | |
}, []); | |
return ( | |
<div css={{ margin: 20 }}> | |
<h1>Animation Test</h1> | |
<AnimatorGeneralProvider | |
duration={{ enter: 0.4, exit: 0.4, stagger: 0.04 }} | |
> | |
<Animator | |
root | |
active={active} | |
manager='stagger' | |
> | |
<AnimatedItem color='yellow' /> | |
<div style={{ marginLeft: 50 }}> | |
<Animator> | |
<AnimatedItem color='cyan' /> | |
</Animator> | |
<Animator manager='stagger'> | |
<AnimatedItem color='cyan' /> | |
<div style={{ marginLeft: 50 }}> | |
<Animator> | |
<AnimatedItem color='green' /> | |
</Animator> | |
<Animator> | |
<AnimatedItem color='green' /> | |
</Animator> | |
<Animator> | |
<AnimatedItem color='green' /> | |
</Animator> | |
</div> | |
</Animator> | |
<Animator> | |
<AnimatedItem color='cyan' /> | |
</Animator> | |
</div> | |
</Animator> | |
</AnimatorGeneralProvider> | |
</div> | |
); | |
}; | |
export default PageTest; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Preview
Screen.Recording.2022-03-09.at.18.20.35.mov