feat(stage-ui): add fade animation to poppin'text

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

@@ -3,9 +3,9 @@ import { ref } from 'vue'
 
 import PoppinText from './PoppinText.web.vue'
 
-import { popupAnimator } from './animators'
+import { fadeAnimator, popupAnimator } from './animators'
 
-const text = ref('キラキラドキドキ')
+const text = ref('キラキラドキドキキラキラドキドキキラキラドキドキキラキラドキドキ')
 </script>
 
 <template>
@@ -19,12 +19,21 @@ const text = ref('キラキラドキドキ')
     </template>
 
     <Variant
-      id="basic-english"
-      title="English Text"
+      id="popup"
+      title="Popup"
     >
-      <div h-50 w-50 p-4>
+      <div h-auto w-full p-4>
         <PoppinText :text="text" :animator="popupAnimator" />
       </div>
     </Variant>
+
+    <Variant
+      id="fade"
+      title="Fade"
+    >
+      <div h-auto w-full p-4>
+        <PoppinText :text="text" :animator="fadeAnimator" />
+      </div>
+    </Variant>
   </Story>
 </template>

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

@@ -26,7 +26,7 @@ watch([graphemeClusters, () => props.animator], ([_, animator]) => {
 </script>
 
 <template>
-  <div class="relative overflow-hidden">
+  <div class="relative overflow-hidden whitespace-nowrap">
     <span
       v-for="(cluster, index) in graphemeClusters"
       :key="index"

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

@@ -0,0 +1,20 @@
+import type { Animator } from '.'
+
+import { createTimeline } from 'animejs'
+
+export const fadeAnimator: Animator = (elements: HTMLElement[]) => {
+  const timeline = createTimeline({ loop: true })
+    .set(elements, {
+      opacity: 0,
+    })
+    .add(elements, {
+      opacity: [0, 1],
+      easing: 'easeInOutQuad',
+      duration: 2250,
+      delay: (_, i) => 150 * (i + 1),
+    })
+
+  return () => {
+    timeline.remove(elements)
+  }
+}

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

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

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

@@ -4,11 +4,17 @@ import { createTimeline } from 'animejs'
 
 export const popupAnimator: Animator = (elements: HTMLElement[]) => {
   const timeline = createTimeline({ loop: true })
+    .set(elements, {
+      opacity: 0,
+      translateY: '1.1em',
+      translateZ: 0,
+    })
     .add(elements, {
+      opacity: [0, 1],
       translateY: ['1.1em', 0],
       translateZ: 0,
       duration: 750,
-      delay: (el, i) => 50 * i,
+      delay: (_, i) => 50 * i,
     })
 
   return () => {