Skip to content

Commit cdf6d89

Browse files
devrntdevrnt
committed
refactor: update animated example in playground
1 parent 2db244f commit cdf6d89

4 files changed

Lines changed: 80 additions & 66 deletions

File tree

‎playground/components/animatedStep.tsx‎

Lines changed: 40 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
import { motion } from 'framer-motion';
1+
import { motion, Variants } from 'framer-motion';
22
import * as React from 'react';
33

44
import { useWizard } from '../../dist';
55

6-
const variants = {
6+
const variants: Variants = {
77
enter: (direction: number) => {
88
return {
9-
x: direction < 0 ? 1000 : -1000,
9+
x: direction > 0 ? 800 : -800,
1010
opacity: 0,
1111
};
1212
},
@@ -15,32 +15,48 @@ const variants = {
1515
x: 0,
1616
opacity: 1,
1717
},
18+
exit: (direction: number) => {
19+
return {
20+
zIndex: 0,
21+
x: direction < 0 ? 800 : -800,
22+
opacity: 0,
23+
};
24+
},
1825
};
1926

2027
type Props = {
2128
previousStep: React.MutableRefObject<number>;
2229
};
2330

24-
const AnimatedStep: React.FC<Props> = ({
25-
children,
26-
previousStep: previousStepIndex,
27-
}) => {
28-
const { activeStep } = useWizard();
29-
30-
React.useEffect(() => {
31-
previousStepIndex.current = activeStep;
32-
}, [activeStep, previousStepIndex]);
33-
34-
return (
35-
<motion.div
36-
custom={activeStep - previousStepIndex.current}
37-
variants={variants}
38-
initial="enter"
39-
animate="center"
40-
>
41-
{children}
42-
</motion.div>
43-
);
44-
};
31+
const AnimatedStep: React.FC<Props> = React.memo(
32+
({ children, previousStep: previousStepIndex }) => {
33+
const { activeStep } = useWizard();
34+
35+
React.useEffect(() => {
36+
return () => {
37+
previousStepIndex.current = activeStep;
38+
};
39+
}, [activeStep, previousStepIndex]);
40+
41+
console.log(activeStep, previousStepIndex.current);
42+
43+
return (
44+
<motion.div
45+
custom={activeStep - previousStepIndex.current}
46+
variants={variants}
47+
initial="enter"
48+
animate="center"
49+
exit="exit"
50+
transition={{
51+
type: 'spring',
52+
stiffness: 300,
53+
damping: 30,
54+
}}
55+
>
56+
{children}
57+
</motion.div>
58+
);
59+
},
60+
);
4561

4662
export default AnimatedStep;

‎playground/modules/wizard/animated/index.tsx‎

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -10,19 +10,20 @@ const AnimatedSection: React.FC = () => {
1010

1111
return (
1212
<Section title="Animated wizard" description="animation by framer motion">
13-
<AnimatePresence>
14-
<Wizard footer={<Footer />}>
15-
{Array(4)
16-
.fill(null)
17-
.map((_, index) => {
18-
return (
19-
<AnimatedStep previousStep={previousStep}>
20-
<Step number={index + 1} withCallback={false}></Step>
21-
</AnimatedStep>
22-
);
23-
})}
24-
</Wizard>
25-
</AnimatePresence>
13+
<Wizard
14+
footer={<Footer />}
15+
wrapper={<AnimatePresence initial={false} exitBeforeEnter />}
16+
>
17+
{Array(4)
18+
.fill(null)
19+
.map((_, index) => {
20+
return (
21+
<AnimatedStep key={index} previousStep={previousStep}>
22+
<Step number={index + 1} withCallback={false}></Step>
23+
</AnimatedStep>
24+
);
25+
})}
26+
</Wizard>
2627
</Section>
2728
);
2829
};

‎playground/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
"build": "parcel build index.html --public-url /react-use-wizard/"
1111
},
1212
"dependencies": {
13-
"framer-motion": "^4.0.0",
13+
"framer-motion": "^4.1.17",
1414
"goober": "^2.0.35",
1515
"react-app-polyfill": "^2.0.0",
1616
"react-query": "^3.13.0"

‎playground/yarn.lock‎

Lines changed: 25 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -3279,23 +3279,25 @@ fragment-cache@^0.2.1:
32793279
dependencies:
32803280
map-cache "^0.2.2"
32813281

3282-
framer-motion@^4.0.0:
3283-
version "4.0.0"
3284-
resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-4.0.0.tgz#3eab6d79e9a662ed8dfcfd05e680ba3a6b841672"
3285-
integrity sha512-j7lPnXEZdpkAelLRU8FhaZC3UbqnZwSTT/W9rSRwb3cKX4eWrekakK86cVkUE79v1HRE9IPzdPVNP9/e8CPRag==
3282+
framer-motion@^4.1.17:
3283+
version "4.1.17"
3284+
resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-4.1.17.tgz#4029469252a62ea599902e5a92b537120cc89721"
3285+
integrity sha512-thx1wvKzblzbs0XaK2X0G1JuwIdARcoNOW7VVwjO8BUltzXPyONGAElLu6CiCScsOQRI7FIk/45YTFtJw5Yozw==
32863286
dependencies:
3287-
framesync "5.2.0"
3287+
framesync "5.3.0"
32883288
hey-listen "^1.0.8"
3289-
popmotion "9.3.1"
3290-
style-value-types "4.1.1"
3289+
popmotion "9.3.6"
3290+
style-value-types "4.1.4"
32913291
tslib "^2.1.0"
32923292
optionalDependencies:
32933293
"@emotion/is-prop-valid" "^0.8.2"
32943294

3295-
framesync@5.2.0:
3296-
version "5.2.0"
3297-
resolved "https://registry.yarnpkg.com/framesync/-/framesync-5.2.0.tgz#f14480654cd05a6af4c72c9890cad93556841643"
3298-
integrity sha512-dcl92w5SHc0o6pRK3//VBVNvu6WkYkiXmHG6ZIXrVzmgh0aDYMDAaoA3p3LH71JIdN5qmhDcfONFA4Lmq22tNA==
3295+
framesync@5.3.0:
3296+
version "5.3.0"
3297+
resolved "https://registry.yarnpkg.com/framesync/-/framesync-5.3.0.tgz#0ecfc955e8f5a6ddc8fdb0cc024070947e1a0d9b"
3298+
integrity sha512-oc5m68HDO/tuK2blj7ZcdEBRx3p1PjrgHazL8GYEpvULhrtGIFbQArN6cQS2QhW8mitffaB+VYzMjDqBxxQeoA==
3299+
dependencies:
3300+
tslib "^2.1.0"
32993301

33003302
fresh@0.5.2:
33013303
version "0.5.2"
@@ -4636,15 +4638,15 @@ pn@^1.1.0:
46364638
resolved "https://registry.yarnpkg.com/pn/-/pn-1.1.0.tgz#e2f4cef0e219f463c179ab37463e4e1ecdccbafb"
46374639
integrity sha512-2qHaIQr2VLRFoxe2nASzsV6ef4yOOH+Fi9FBOVH6cqeSgUnoyySPZkxzLuzd+RYOQTRpROA0ztTMqxROKSb/nA==
46384640

4639-
popmotion@9.3.1:
4640-
version "9.3.1"
4641-
resolved "https://registry.yarnpkg.com/popmotion/-/popmotion-9.3.1.tgz#134319ed4b9b8e3ec506c99064f7b2f14bc05781"
4642-
integrity sha512-Qozvg8rz2OGeZwWuIjqlSXqqgWto/+QL24ll8sAAc0n71KY/wvN1W4sAASxTuHv8YWdDnk9u9IdadyPo2DGvDA==
4641+
popmotion@9.3.6:
4642+
version "9.3.6"
4643+
resolved "https://registry.yarnpkg.com/popmotion/-/popmotion-9.3.6.tgz#b5236fa28f242aff3871b9e23721f093133248d1"
4644+
integrity sha512-ZTbXiu6zIggXzIliMi8LGxXBF5ST+wkpXGEjeTUDUOCdSQ356hij/xjeUdv0F8zCQNeqB1+PR5/BB+gC+QLAPw==
46434645
dependencies:
4644-
framesync "5.2.0"
4646+
framesync "5.3.0"
46454647
hey-listen "^1.0.8"
4646-
style-value-types "4.1.1"
4647-
tslib "^1.10.0"
4648+
style-value-types "4.1.4"
4649+
tslib "^2.1.0"
46484650

46494651
posix-character-classes@^0.1.0:
46504652
version "0.1.1"
@@ -5758,13 +5760,13 @@ strip-ansi@^4.0.0:
57585760
dependencies:
57595761
ansi-regex "^3.0.0"
57605762

5761-
style-value-types@4.1.1:
5762-
version "4.1.1"
5763-
resolved "https://registry.yarnpkg.com/style-value-types/-/style-value-types-4.1.1.tgz#15d08bd9bb17ac3f5d4a863bf9d5e4eb8e4f0686"
5764-
integrity sha512-cNLrl6jk+I1T18ZI2KIp/fcqKVuykcNELDrOz7y+TYZR97xmNdN0ewupURvVFnQxVrRJv98TMBq92VMsggq3kw==
5763+
style-value-types@4.1.4:
5764+
version "4.1.4"
5765+
resolved "https://registry.yarnpkg.com/style-value-types/-/style-value-types-4.1.4.tgz#80f37cb4fb024d6394087403dfb275e8bb627e75"
5766+
integrity sha512-LCJL6tB+vPSUoxgUBt9juXIlNJHtBMy8jkXzUJSBzeHWdBu6lhzHqCvLVkXFGsFIlNa2ln1sQHya/gzaFmB2Lg==
57655767
dependencies:
57665768
hey-listen "^1.0.8"
5767-
tslib "^1.10.0"
5769+
tslib "^2.1.0"
57685770

57695771
stylehacks@^4.0.0:
57705772
version "4.0.3"
@@ -5928,11 +5930,6 @@ tr46@^1.0.1:
59285930
dependencies:
59295931
punycode "^2.1.0"
59305932

5931-
tslib@^1.10.0:
5932-
version "1.14.1"
5933-
resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
5934-
integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
5935-
59365933
tslib@^2.1.0:
59375934
version "2.1.0"
59385935
resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.1.0.tgz#da60860f1c2ecaa5703ab7d39bc05b6bf988b97a"

0 commit comments

Comments
 (0)