diff --git a/packages/stage-ui/src/components/Widgets/PoppinText/PoppinText.web.story.vue b/packages/stage-ui/src/components/Widgets/PoppinText/PoppinText.web.story.vue index eb7a1bc3c..33185886e 100644 --- a/packages/stage-ui/src/components/Widgets/PoppinText/PoppinText.web.story.vue +++ b/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) + + +
+ +
+
diff --git a/packages/stage-ui/src/components/Widgets/PoppinText/animators/index.ts b/packages/stage-ui/src/components/Widgets/PoppinText/animators/index.ts index 276b6f5d7..331f39b59 100644 --- a/packages/stage-ui/src/components/Widgets/PoppinText/animators/index.ts +++ b/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' diff --git a/packages/stage-ui/src/components/Widgets/PoppinText/animators/stack.ts b/packages/stage-ui/src/components/Widgets/PoppinText/animators/stack.ts new file mode 100644 index 000000000..e5ca1c8ea --- /dev/null +++ b/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) + } + } +}