feat(stage-ui): add stack animator to poppin'text

packages/stage-ui/src/components/Widgets/PoppinText/PoppinText.web.story.vue

@@ -4,7 +4,7 @@ import { ref } from 'vue'
 
 import PoppinText from './PoppinText.web.vue'
 
-import { createFadeAnimator, createFloatAnimator, createPopupAnimator } from './animators'
+import { createFadeAnimator, createFloatAnimator, createPopupAnimator, createStackAnimator } from './animators'
 
 const text = ref('行こう、七色のキラキラドキドキに向かって！')
 const duration = ref(750)
@@ -52,5 +52,14 @@ const duration = ref(750)
         <PoppinText :text="text" :animator="createFloatAnimator({ duration })" />
       </div>
     </Variant>
+
+    <Variant
+      id="stack"
+      title="Stack"
+    >
+      <div h-auto w-full p-4>
+        <PoppinText :text="text" :animator="createStackAnimator({ duration })" />
+      </div>
+    </Variant>
   </Story>
 </template>

packages/stage-ui/src/components/Widgets/PoppinText/animators/index.ts

@@ -10,3 +10,4 @@ export type Animator = (elements: HTMLElement[]) => (() => void)
 export * from './fade'
 export * from './float'
 export * from './popup'
+export * from './stack'

packages/stage-ui/src/components/Widgets/PoppinText/animators/stack.ts

@@ -0,0 +1,30 @@
+import type { Animator, CreateAnimatorOptions } from '.'
+
+import { createTimeline } from 'animejs'
+
+export function createStackAnimator(options: CreateAnimatorOptions): Animator {
+  return (elements: HTMLElement[]) => {
+    if (elements.length === 0) {
+      // NO DIV0
+      return () => {}
+    }
+
+    const timeline = createTimeline({ loop: true })
+      .set(elements, {
+        opacity: 0,
+        translateX: 40,
+        translateZ: 0,
+      })
+      .add(elements, {
+        translateX: [40, 0],
+        translateZ: 0,
+        opacity: [0, 1],
+        ...options,
+        delay: (_, i) => options.duration / elements.length * (i + 1),
+      })
+
+    return () => {
+      timeline.remove(elements)
+    }
+  }
+}