animot-presenter 0.5.5 → 0.5.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/AnimotPresenter.svelte +5 -1
- package/dist/cdn/animot-presenter.esm.js +4530 -4334
- package/dist/cdn/animot-presenter.min.js +8 -8
- package/dist/engine/utils.d.ts +11 -2
- package/dist/engine/utils.js +16 -4
- package/dist/types.d.ts +12 -2
- package/dist/utils/text-animate.d.ts +47 -0
- package/dist/utils/text-animate.js +348 -0
- package/package.json +1 -1
|
@@ -11,6 +11,7 @@
|
|
|
11
11
|
import FlowMarkers from './FlowMarkers.svelte';
|
|
12
12
|
import { traceSvgPaths } from './utils/trace-svg-paths';
|
|
13
13
|
import { arrowClipDraw } from './utils/arrow-clip-draw';
|
|
14
|
+
import { textAnimate } from './utils/text-animate';
|
|
14
15
|
import { easeInOutCubic, getEasingFn, getBackgroundStyle, hashFraction, getFloatAnimName, computeFloatAmp, computeFloatSpeed } from './engine/utils';
|
|
15
16
|
import type {
|
|
16
17
|
AnimotProject, AnimotPresenterProps, CanvasElement, CodeElement, TextElement,
|
|
@@ -1230,6 +1231,8 @@
|
|
|
1230
1231
|
{@const animFontSize = animated.fontSize?.current ?? textEl.fontSize}
|
|
1231
1232
|
{@const typewriterState = textTypewriterState.get(element.id)}
|
|
1232
1233
|
{@const displayText = typewriterState?.isAnimating ? typewriterState.fullText.slice(0, typewriterState.displayedChars) : textEl.content}
|
|
1234
|
+
{@const textAnimMode = textEl.animation?.mode ?? 'instant'}
|
|
1235
|
+
{@const isActionTextMode = textAnimMode === 'fade-letters' || textAnimMode === 'bounce-in' || textAnimMode === 'handwriting'}
|
|
1233
1236
|
<div
|
|
1234
1237
|
class="animot-text-element"
|
|
1235
1238
|
style:font-size="{animFontSize}px"
|
|
@@ -1250,8 +1253,9 @@
|
|
|
1250
1253
|
style:justify-content={textEl.textAlign === 'center' ? 'center' : textEl.textAlign === 'right' ? 'flex-end' : 'flex-start'}
|
|
1251
1254
|
style:-webkit-text-stroke={textEl.textStroke?.enabled ? `${textEl.textStroke.width}px ${textEl.textStroke.color}` : '0'}
|
|
1252
1255
|
style:text-shadow={textEl.textShadow?.enabled ? `${textEl.textShadow.offsetX}px ${textEl.textShadow.offsetY}px ${textEl.textShadow.blur}px ${textEl.textShadow.color}` : 'none'}
|
|
1256
|
+
use:textAnimate={{ enabled: isActionTextMode, mode: textAnimMode, content: textEl.content, duration: textEl.animation?.duration ?? 1500, stagger: textEl.animation?.stagger, loop: textEl.animation?.loop ?? false, color: textEl.color, fontSize: animFontSize, fontFamily: textEl.fontFamily, fontWeight: textEl.fontWeight, fontStyle: textEl.fontStyle, textAlign: textEl.textAlign, slideDuration: currentSlide?.duration, key: `${textAnimMode}-${textEl.content}-${textEl.animation?.duration}-${textEl.animation?.stagger}-${textEl.animation?.loop}-${currentSlideIndex}` }}
|
|
1253
1257
|
>
|
|
1254
|
-
{displayText}{#if typewriterState?.isAnimating}<span class="animot-typewriter-cursor">|</span>{/if}
|
|
1258
|
+
{#if !isActionTextMode}{displayText}{#if typewriterState?.isAnimating}<span class="animot-typewriter-cursor">|</span>{/if}{/if}
|
|
1255
1259
|
</div>
|
|
1256
1260
|
{:else if element.type === 'arrow'}
|
|
1257
1261
|
{@const arrowEl = element as ArrowElement}
|