accol
Coder
Thank you for reading. I'm trying to figure out how to make each letter of the placeholder username and password text either shake or animate in a wavy motion, however if you type in words the placeholder would disappear and stop animating as typical. I was using Framer Motion & React: Wavy Letter/Text Animation as an example but couldn't figure out how to adapt it to my situation.
Due to
1. Am I missing something obvious am not using
2. Should I not be using Framer Motion and do something else like animating via CSS to achieve this effect?
3. Or is it not possible to achieve this effect via using
Due to
input is a void element tag and must neither have children nor use dangerouslySetInnerHTML, I'm not entirely sure how to create the animation then. My thought was to create another functional component to handle the placeholder text animation (there is motion.placeholder so I was thinking of using that) then passing it in as the value to the placeholder attribute but I don't think that would work because it takes in string values. 1. Am I missing something obvious am not using
motion.input correctly? 2. Should I not be using Framer Motion and do something else like animating via CSS to achieve this effect?
3. Or is it not possible to achieve this effect via using
input itself and I have to do something else to give the same illusion.
JSX:
const AuthenticationInput = ({ value, placeholder, onChange, className, isPassword = false }) => {
/*code here to handle animation - hasn't been written*/
return (
<motion.input
value={value}
placeholder={placeholder}
onChange={onChange}
className={className}
type={(isPassword) ? "password" : "text"}
/>
);
}
const Authentication = (props) => {
/*code*/
return <div className={"auth-container"}>
<div className={"auth-branding-container"}>
<h1>OMORI</h1>
</div>
<Tabs defaultActiveKey="login" variant="tabs" justify>
<Tab eventKey="login" title="LOGIN">
<div className={"auth-form-container"}>
<div className={"auth-input-container"}>
<AuthenticationInput value={username} placeholder="WHAT IS YOUR NAME" onChange={ev => setUsername(ev.target.value)} className={"auth-input-box"} />
<label className="auth-error-label">{usernameError}</label>
</div>
<div className={"auth-input-container"}>
<AuthenticationInput value={password} placeholder="PASSWORD, PLEASE." onChange={ev => setPassword(ev.target.value)} className={"auth-input-box"} isPassword={true} />
<label className="auth-error-label">{passwordError}</label>
</div>
</div>
<div className={"auth-actions-container"}>
<AuthenticationButton value={"LOG IN"} onClick={onLoginButtonClick} className={"auth-btn"} />
</div>
</Tab>
<Tab eventKey="register" title="REGISTER">
<div className={"auth-form-container"}>
<div className={"auth-input-container"}>
<AuthenticationInput value={username} placeholder="WHAT IS YOUR NAME" onChange={ev => setUsername(ev.target.value)} className={"auth-input-box"} />
<label className="auth-error-label">{usernameError}</label>
</div>
<div className={"auth-input-container"}>
<AuthenticationInput value={password} placeholder="PASSWORD, PLEASE." onChange={ev => setPassword(ev.target.value)} className={"auth-input-box"} isPassword={true} />
<label className="auth-error-label">{passwordError}</label>
</div>
</div>
<div className={"auth-actions-container"}>
<AuthenticationButton value={"REGISTER"} onClick={onRegisterButtonClick} className={"auth-btn"}/>
</div>
</Tab>
</Tabs>
</div>
}
