LumeWeb
/
web3toybox.com
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: animations where weird

This commit is contained in:
Juan Di Toro 2023-09-19 19:19:56 +02:00
parent b47910fd39
commit d52236e3ce
3 changed files with 17 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/SwitchableComponent.tsx
View File

@ -1,4 +1,4 @@
import { Variant, AnimatePresence, motion } from "framer-motion";
import { Variant, AnimatePresence, m } from "framer-motion";
import React from "react";
const SwitchableComponentContext = React.createContext<SwitchableComponentContextType | undefined>(undefined);
@ -33,6 +33,7 @@ const variants: Record<string, Variant> = {
hidden: { y: 50, opacity: 0, position: 'absolute' },
show: {
y: 0,
x: 0,
opacity: 1,
position: 'relative',
transition: {
@ -44,18 +45,21 @@ const variants: Record<string, Variant> = {
};
export const SwitchableComponent = ({ children, index }: React.PropsWithChildren<{ index: string }>) => {
const [width, setWidth] = React.useState<number>()
return (
<AnimatePresence>
<motion.div
<m.div
key={index}
initial="hidden"
animate="show"
exit="exit"
variants={variants}
className="h-full w-full"
style={{maxWidth: width ?? 'auto'}}
onTransitionEnd={(e) => setWidth(e.currentTarget.getBoundingClientRect().width!)}
>
{children}
</motion.div>
</m.div>
</AnimatePresence>
);
};

8
src/components/lume/LumeIdentity/LumeIdentity.tsx
View File

@ -28,18 +28,18 @@ const LumeIdentity: React.FC<Props> = ({ }) => {
</div>
<div className="w-full z-10 flex flex-col items-center justify-center gap-10">
<div className="flex flex-col items-start justify-start gap-10">
<h2 className="w-full text-5xl font-normal leading-10 text-white">
<h2 className="w-full text-5xl font-normal leading-14 text-white">
{isSubmitButtonInView || isLoginWithAccountKey ? 'Sign in with Lume' : null}
{isCreatingAccount && !isShowingSeedPhrase ? 'Set up your account key' : null}
{isShowingSeedPhrase ? "Here's your account key" : null}
</h2>
</div>
<div className="flex flex-col items-start justify-start gap-2.5">
<SwitchableComponent index={visibleComponent.index}>
<LazyMotion features={domAnimation}>
<visibleComponent.render />
<SwitchableComponent index={visibleComponent.index}>
<visibleComponent.render />
</SwitchableComponent>
</LazyMotion>
</SwitchableComponent>
{!isFinalStep ? <>
<div className={`relative h-7 w-full overflow-hidden ${coloredOrLine}`}>
<svg width="409" height="28" className="max-w-full -left-1/2" viewBox="0 0 409 28" fill="none" xmlns="http://www.w3.org/2000/svg">

16
src/components/lume/LumeIdentity/components.tsx
View File

@ -47,15 +47,16 @@ const SeedPhraseInputComponent = ({ }) => {
const SetupAccountKeyComponent = () => {
const { setVisibleComponent } = useSwitchableComponent();
const [width, setWidth] = React.useState(0);
const [width, setWidth] = React.useState<number>();
return (
<m.div
initial={{ y: 50 }}
animate={{ y: 0 }}
exit={{ y: -50, height: 'auto', maxWidth: width }}
exit={{ y: -50, height: 'auto' }}
transition={{ type: "just", delay: 0.1 }}
className="min-h-12 h-full max-w-full"
style={{ maxWidth: width ?? 'auto' }}
ref={(t) => setTimeout(() => setWidth(t?.getBoundingClientRect().width!), 0)}
>
<Button className='w-full h-full' onClick={() => setVisibleComponent(components.SeedPhraseGeneration)}>
@ -90,19 +91,14 @@ const SeedPhraseGenerationComponent = ({ phraseLength = 12 }) => {
<AnimatePresence>
{step === 1 ? <m.div className={`z-10 absolute top-0 bottom-0 left-0 right-0 bg-black pointer-events-none`}
initial={{ opacity: 0 }}
animate={{ opacity: 0.75, top: -120, left: -20, right: -20, bottom: 120 }}
animate={{ opacity: 0.75, top: -200, left: -20, right: -20, bottom: 120 }}
transition={{ type: "tween", duration: 0.1 }}
// onAnimationComplete={() => {
// setTimeout(() => {
// setOpacity(1);
// }, 2000);
// }}
></m.div> : null}
</AnimatePresence>
<div className="z-20 relative mb-2.5 w-full h-full flex-wrap justify-center items-center gap-2.5 inline-flex">
{phrases.map((phrase, index) => (
<div className={`justify-center items-center gap-2.5 flex w-[calc(33%-10px)] h-10 rounded border border-current relative ring-current text-neutral-700`}>
<span className=" text-white text-lg font-normal leading-normal w-full h-fit px-2.5 bg-transparent text-center">{phrase}</span>
<div key={`SeedPhrase_${index}`} className={`justify-center items-center gap-2.5 flex w-[calc(33%-10px)] h-10 rounded border border-current relative ring-current text-neutral-700`}>
<span className=" text-white text-md font-normal leading-normal w-full h-fit px-2.5 bg-transparent text-center">{phrase}</span>
<span className="left-[6px] top-0 absolute text-current text-xs font-normal leading-normal">{index + 1}</span>
</div>
))}