fix(styles): animation issues

README.md

@@ -7,7 +7,7 @@
   - [ ] Using [Scuti](https://scuti.netlify.app/) dataset for its [renderer.](https://github.com/kozennnn/scuti-renderer)
 - [ ] Languages feature. (Default: EN)
 - [ ] Download Habbo assets. (>800 MB of disk memory, make sure the IPC handles it correctly)
-- [ ] Fix rendering animation issues.
+- [x] Fix rendering animation issues.
 - [ ] Add "abort" button with written data suppression feature.
 - [x] Convert front-end with SolidJS
 - [x] Fix issue of prettier-plugin-tailwindcss

src/components/design/AnimateView/AnimateView.tsx

@@ -1,19 +1,22 @@
-import { Show } from 'solid-js'
+import { Show, createEffect } from 'solid-js'
 import type { Component } from 'solid-js'
-import type { MotionComponentProps, Options as MotionProps } from '@motionone/solid'
+import type { MotionComponentProps, Variant } from '@motionone/solid'
 import { Motion, Presence } from '@motionone/solid'
 
 export interface AnimateViewProps extends MotionComponentProps {
+  animation: Record<string, Variant>
   condition: boolean
-  animation: MotionProps
   class?: string
 }
 
 export const AnimateView: Component<AnimateViewProps> = (props) => {
+  createEffect(() => {
+    console.log(props.condition)
+  })
   return (
     <Presence>
       <Show when={props.condition}>
-        <Motion.div {...props} initial={props.initial} animate={props.animate} exit={props.exit}>
+        <Motion.div class={props.class} {...props.animation}>
           {props.children}
         </Motion.div>
       </Show>

src/components/design/Loader/Loader.tsx

@@ -13,7 +13,7 @@ export const Loader: Component<LoaderProps> = (props) => {
     <AnimateView
       class={props.class}
       condition={props.active}
-      animation={Animation.fadeInOut({ scale: [0, 1, 0], y: [1, 4, 1] })}>
+      variants={Animation.fadeInOut({ scale: [0, 1, 0], y: [1, 4, 1] })}>
       <svg width='44' height='44' viewBox='0 0 44 44' xmlns='http://www.w3.org/2000/svg' stroke='#fff'>
         <g fill='none' fill-rule='evenodd' stroke-width={2}>
           <circle cx='22' cy='22' r='1'>

src/components/layout/Downloaders/Downloader/Downloader.tsx

@@ -28,26 +28,17 @@ export const Downloader: Component<DownloaderProps> = (props) => {
       {props.children}
 
       <AnimateView
-        condition={activeContent()}
         animation={Animation.fadeInOut()}
+        condition={activeContent()}
         class='pointer-events-none absolute left-0 top-0 flex h-full w-full flex-col items-center justify-center rounded-xl bg-black/70 pb-5 text-center text-[12px] text-white'>
-        <Motion.h1
-          initial={{ opacity: 0, y: -20 }}
-          animate={{ opacity: 1, y: 0 }}
-          exit={{ opacity: 0, y: -20 }}
-          class='mb-3 text-[16px]'>
+        <Motion.h1 {...Animation.fadeInOut({ y: [-20, 0, -20] })} class='mb-3 text-[16px]'>
           {props.content.title}
         </Motion.h1>
 
         <For each={props.content.features}>
           {(feature) => {
             return (
-              <Motion.span
-                initial={{ opacity: 0, y: 50, scale: 0.75 }}
-                animate={{ opacity: 1, y: 0, scale: 1 }}
-                exit={{ opacity: 0, y: 50, scale: 0.75 }}>
-                {feature}
-              </Motion.span>
+              <Motion.span {...Animation.fadeInOut({ y: [50, 0, 50], scale: [0.75, 1, 0.75] })}>{feature}</Motion.span>
             )
           }}
         </For>

src/components/layout/Downloaders/Downloaders.tsx

@@ -4,7 +4,7 @@ import classNames from 'classnames'
 
 import type { ConvertionHandler } from '../../../types'
 import { handleConvertion } from '../../../tools/handleConvertion'
-import { Animation, GameAssetsDownloader, GameDataDownloader } from '../../../config'
+import { GameAssetsDownloader, GameDataDownloader } from '../../../config'
 import { Button, Image, Loader } from '../../design'
 import { Popup } from '../Popup'
 import { Downloader } from './Downloader/Downloader'
@@ -45,10 +45,11 @@ export const Downloaders: Component = () => {
 
   return (
     <>
-      <Loader active={loading()} class='mt-10' />
       <Popup condition={popup()}>
         <span class={classNames('', { 'text-red-600': error })}>{message()}</span>
 
+        <Loader active={loading()} class='mt-10' />
+
         <Button
           value='Close'
           icon={<Image src='/icons/cross.png' />}

src/components/layout/Popup/Popup.tsx

@@ -12,10 +12,7 @@ export const Popup: Component<PopupProps> = (props) => {
   return (
     <AnimateView
       animation={Animation.fadeInOut()}
-      class='absolute left-0 top-0 z-20 flex h-screen w-screen flex-col items-center justify-center bg-black/40 text-white backdrop-blur-xl transition-all'
-      initial={{ opacity: 0 }}
-      animate={{ opacity: 1 }}
-      exit={{ opacity: 0 }}
+      class='absolute left-0 top-0 z-20 flex h-screen w-screen flex-col items-center justify-center bg-black/40 text-white'
       condition={props.condition}>
       {props.children}
     </AnimateView>

src/config/Animation.ts

@@ -1,6 +1,6 @@
-import type { Options, Variant } from '@motionone/solid'
+import type { Variant } from '@motionone/solid'
 
-const fadeInOut = (variant?: Variant): Options => {
+const fadeInOut = (variant?: Variant): Record<string, Variant> => {
   const getVariantAtPosition = (pos: 0 | 1 | 2): Record<string, number> | null => {
     if (variant == null) return null
 
@@ -16,7 +16,7 @@ const fadeInOut = (variant?: Variant): Options => {
   return {
     initial: { opacity: 0, ...getVariantAtPosition(0) },
     animate: { opacity: 1, ...getVariantAtPosition(1) },
-    exit: { opacity: 1, ...getVariantAtPosition(2) }
+    exit: { opacity: 0, ...getVariantAtPosition(2) }
   }
 }