@hyperframes/core 0.8.205 → 0.8.206
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/compiler/compositionScoping.d.ts +2 -0
- package/dist/compiler/compositionScoping.js +4 -0
- package/dist/compiler/htmlBundler.js +3 -1
- package/dist/compiler/inlineSubCompositions.js +2 -2
- package/dist/compiler/pngColourTags.d.ts +2 -0
- package/dist/compiler/pngColourTags.js +27 -0
- package/dist/generated/runtime-inline.js +1 -1
- package/dist/generators/hyperframes.js +4 -1
- package/dist/hyperframe.runtime.iife.js +66 -64
- package/dist/index.d.ts +2 -0
- package/dist/index.js +2 -0
- package/dist/runtime/media.js +4 -3
- package/dist/runtime/mediaClock.d.ts +2 -0
- package/dist/runtime/mediaClock.js +4 -0
- package/dist/runtime/preloadMedia.js +2 -1
- package/dist/runtime/startResolver.js +6 -8
- package/package.json +12 -4
|
@@ -4,6 +4,7 @@ import { CANVAS_DIMENSIONS, isTextElement, isMediaElement, isCompositionElement,
|
|
|
4
4
|
import { serializeGsapAnimations, keyframesToGsapAnimations } from "@hyperframes/parsers";
|
|
5
5
|
import { GSAP_CDN, BASE_STYLES, ZOOM_CONTAINER_STYLES } from "../templates/constants.js";
|
|
6
6
|
import { COMPOSITION_ATTRIBUTES } from "../compositionContract.js";
|
|
7
|
+
import { MEDIA_ELEMENT_LEAD_SECONDS } from "../runtime/mediaClock.js";
|
|
7
8
|
function escapeHtmlAttributeValue(value) {
|
|
8
9
|
return value
|
|
9
10
|
.replace(/&/g, "&")
|
|
@@ -197,6 +198,7 @@ export function generateGsapTimelineScript(elements, totalDuration, options = {}
|
|
|
197
198
|
const allAnimations = [...animations, ...keyframeAnimations];
|
|
198
199
|
gsapScript = serializeGsapAnimations(allAnimations, "tl", {
|
|
199
200
|
includeMediaSync: hasMedia,
|
|
201
|
+
mediaElementLeadSeconds: MEDIA_ELEMENT_LEAD_SECONDS,
|
|
200
202
|
});
|
|
201
203
|
// Prepend initial positions and visibility for elements without keyframes, append zoom animations
|
|
202
204
|
const prependAnimations = [initialPositionSets, visibilityAnimations]
|
|
@@ -213,6 +215,7 @@ export function generateGsapTimelineScript(elements, totalDuration, options = {}
|
|
|
213
215
|
// Use only keyframe animations
|
|
214
216
|
gsapScript = serializeGsapAnimations(keyframeAnimations, "tl", {
|
|
215
217
|
includeMediaSync: hasMedia,
|
|
218
|
+
mediaElementLeadSeconds: MEDIA_ELEMENT_LEAD_SECONDS,
|
|
216
219
|
});
|
|
217
220
|
// Prepend initial positions and visibility for elements without keyframes, append zoom animations
|
|
218
221
|
const prependAnimations = [initialPositionSets, visibilityAnimations]
|
|
@@ -611,7 +614,7 @@ function generateDefaultGsapAnimations(elements, totalDuration, stageZoomKeyfram
|
|
|
611
614
|
const mediaTime = time - start;
|
|
612
615
|
if (time >= start && time < end) {
|
|
613
616
|
if (Math.abs(media.currentTime - mediaTime) > 0.1) {
|
|
614
|
-
media.currentTime = mediaTime;
|
|
617
|
+
media.currentTime = mediaTime + ${MEDIA_ELEMENT_LEAD_SECONDS};
|
|
615
618
|
}
|
|
616
619
|
if (media.paused && !tl.paused()) {
|
|
617
620
|
media.play().catch(function() {});
|