Trying to make a hover animation with GSAP in nextjs 13 and tailwind
I'm making a website with Nextjs 13 (TypeScript), tailwind and GSAP, I was wondering if it's possible to make some kind of animation like in the screenshot enclosed (sorry for my great paint skills). 
is not a button, is just a decoration word that will change on hover for another with different style.
Solution
This uses a grid layout with overflow hidden and translate for a CSS only solution.
<div class="group m-5 grid h-10 w-20 cursor-pointer grid-cols-2 overflow-hidden rounded-lg border-2 border-orange-400">
<div class="grid h-10 w-20 -translate-x-full -translate-y-[2px] place-content-center rounded-lg border-2 border-orange-400 bg-orange-400 text-center font-bold text-white transition-transform duration-500 group-hover:translate-x-0"><span>GREAT</span></div>
<div class="h-10 -translate-x-full -translate-y-[2px] rounded-lg border-orange-400 font-bold text-orange-400 transition-transform duration-500 group-hover:translate-x-full"><span class="block w-20 py-2 text-center">GOOD</span></div>
</div>
- Tailwind class is getting added but style is not applied in nextjs
- Using Deno to Compile TypeScript to JavaScript
- Display datalabels in two lines apexcharts
- force folder structure and names in a repository using eslint
- How can I enforce filename and folder name convention in typescript eslint?
- Disallow a folder to import files from another, but still allow other files to import those files
- How to make default select the first item in mat-list in angular
- Error TS7006: Parameter 'req' implicitly has an 'any' type
- what is the name of event that pass only type arguments into generic function in typescript?
- Type error on key property of object in a map, Element implicitly has an 'any' type because index expression is not of type 'number'
- Typescript: Typing return for a "retry function" using .call
- Why can I initialize a Map with an iterable literal but not a variable of an iterable?
- How to define a tree type in TypeScript?
- How to set timeout in Mocha root-level hooks?
- How to watch and reload ts-node when TypeScript files change
- Cannot bind method and record type in the same generic object in Typescript
- Is it Possible in TypeScript to Disable the Rule Behind TS(1345)
- Cannot import `getReactNativePersistence` in `firebase@10.1.0`
- How to create a UUID template literal type in Typescript?
- Error [ERR_UNSUPPORTED_ESM_URL_SCHEME]: Only file and data URLs are supported by the default ESM loader - Vue 3
- Why does ContentChilden never output template references?
- Access const value assigned inside OnInit method on some event
- Migrating from TSlint to ESlint
- How can I create a node test launch configuration?
- ReferenceError: describe is not defined in Jest + Typescript
- Using react context with react hooks in typescript
- Type for TypeORM Raw Entity: CamelToSnake / ValueOf Exact Matching / Property-Method inference
- Auth.js v5 useSession(): Session data is only displayed after manually reloading the page (NextJS 14)
- 'File name differs from already included file name only in casing' on relative path with same casing
- React Ignite, SignupScreen, post submission is not transitioning to welcome screen/authenticating