@remotion/transitions - npm Package Compare versions

Comparing version 4.0.57 to 4.0.58

dist/cjs/fade.js

@@ -12,3 +12,3 @@ 'use strict';
         return {
-            opacity: presentationDirection === "entering" ? presentationProgress : 1,
+            opacity: presentationDirection === 'entering' ? presentationProgress : 1,
         };
@@ -15,0 +15,0 @@ }, [presentationDirection, presentationProgress]);

dist/cjs/flatten-children.d.ts

@@ -1,2 +0,2 @@
-import React from "react";
+import React from 'react';
 export declare const flattenChildren: (children: React.ReactNode) => (string | number | React.ReactElement<any, string | React.JSXElementConstructor<any>> | React.ReactFragment | React.ReactPortal)[];

dist/cjs/index.d.ts

@@ -0,4 +1,4 @@
+export { linearTiming } from './timings/linear-timing.js';
 export { springTiming } from './timings/spring-timing.js';
-export { linearTiming } from "./timings/linear-timing.js";
-export { TransitionSeries } from "./TransitionSeries.js";
-export { TransitionTiming, TransitionPresentation, TransitionPresentationComponentProps, } from "./types.js";
+export { TransitionSeries } from './TransitionSeries.js';
+export { TransitionPresentation, TransitionPresentationComponentProps, TransitionTiming, } from './types.js';

dist/cjs/index.js

@@ -13,5 +13,20 @@ 'use strict';
 
+const linearTiming = (options) => {
+    return {
+        getDurationInFrames: () => {
+            return options.durationInFrames;
+        },
+        getProgress: ({ frame }) => {
+            return remotion.interpolate(frame, [0, options.durationInFrames], [0, 1], {
+                easing: options.easing,
+                extrapolateLeft: 'clamp',
+                extrapolateRight: 'clamp',
+            });
+        },
+    };
+};
+
 const springWithInvalidArgumentRejection = (args) => {
     if (args.to || args.from) {
-        throw new Error("to / from values are not supported by springWithRoundUpIfThreshold");
+        throw new Error('to / from values are not supported by springWithRoundUpIfThreshold');
     }
@@ -44,34 +59,31 @@ return remotion.spring(args);
 
-const linearTiming = (options) => {
-    return {
-        getDurationInFrames: () => {
-            return options.durationInFrames;
-        },
-        getProgress: ({ frame }) => {
-            return remotion.interpolate(frame, [0, options.durationInFrames], [0, 1], {
-                easing: options.easing,
-                extrapolateLeft: 'clamp',
-                extrapolateRight: 'clamp',
-            });
-        },
-    };
+const flattenChildren = (children) => {
+    const childrenArray = React__default["default"].Children.toArray(children);
+    return childrenArray.reduce((flatChildren, child) => {
+        if (child.type === React__default["default"].Fragment) {
+            return flatChildren.concat(flattenChildren(child.props
+                .children));
+        }
+        flatChildren.push(child);
+        return flatChildren;
+    }, []);
 };
 
-const SlidePresentation = ({ children, presentationProgress, presentationDirection, passedProps: { direction = "from-left" }, }) => {
+const SlidePresentation = ({ children, presentationProgress, presentationDirection, passedProps: { direction = 'from-left' }, }) => {
     const directionStyle = React.useMemo(() => {
-        if (presentationDirection === "exiting") {
+        if (presentationDirection === 'exiting') {
             switch (direction) {
-                case "from-left":
+                case 'from-left':
                     return {
                         transform: `translateX(${presentationProgress * 100}%)`,
                     };
-                case "from-right":
+                case 'from-right':
                     return {
                         transform: `translateX(-${presentationProgress * 100}%)`,
                     };
-                case "from-top":
+                case 'from-top':
                     return {
                         transform: `translateY(${presentationProgress * 100}%)`,
                     };
-                case "from-bottom":
+                case 'from-bottom':
                     return {
@@ -85,15 +97,15 @@ transform: `translateY(-${presentationProgress * 100}%)`,
         switch (direction) {
-            case "from-left":
+            case 'from-left':
                 return {
                     transform: `translateX(${-100 + presentationProgress * 100}%)`,
                 };
-            case "from-right":
+            case 'from-right':
                 return {
                     transform: `translateX(${100 - presentationProgress * 100}%)`,
                 };
-            case "from-top":
+            case 'from-top':
                 return {
                     transform: `translateY(${-100 + presentationProgress * 100}%)`,
                 };
-            case "from-bottom":
+            case 'from-bottom':
                 return {
@@ -108,6 +120,6 @@ transform: `translateY(${100 - presentationProgress * 100}%)`,
         return {
-            width: "100%",
-            height: "100%",
-            justifyContent: "center",
-            alignItems: "center",
+            width: '100%',
+            height: '100%',
+            justifyContent: 'center',
+            alignItems: 'center',
             ...directionStyle,
@@ -125,14 +137,2 @@ };
 
-const flattenChildren = (children) => {
-    const childrenArray = React__default["default"].Children.toArray(children);
-    return childrenArray.reduce((flatChildren, child) => {
-        if (child.type === React__default["default"].Fragment) {
-            return flatChildren.concat(flattenChildren(child.props
-                .children));
-        }
-        flatChildren.push(child);
-        return flatChildren;
-    }, []);
-};
-
 /* eslint-disable prefer-destructuring */
@@ -161,5 +161,5 @@ const validateDurationInFrames = remotion.Internals.validateDurationInFrames;
             const current = child;
-            if (typeof current === "string") {
+            if (typeof current === 'string') {
                 // Don't throw if it's just some accidential whitespace
-                if (current.trim() === "") {
+                if (current.trim() === '') {
                     return null;
@@ -171,3 +171,3 @@ }
             const nextPrev = flattedChildren[i + 1];
-            const prev = typeof hasPrev === "string" || typeof hasPrev === "undefined"
+            const prev = typeof hasPrev === 'string' || typeof hasPrev === 'undefined'
                 ? null
@@ -177,3 +177,3 @@ : hasPrev.type === TransitionSeriesTransition
                     : null;
-            const next = typeof nextPrev === "string" || typeof nextPrev === "undefined"
+            const next = typeof nextPrev === 'string' || typeof nextPrev === 'undefined'
                 ? null
@@ -183,3 +183,3 @@ : nextPrev.type === TransitionSeriesTransition
                     : null;
-            const prevIsTransition = typeof hasPrev === "string" || typeof hasPrev === "undefined"
+            const prevIsTransition = typeof hasPrev === 'string' || typeof hasPrev === 'undefined'
                 ? false
@@ -232,3 +232,2 @@ : hasPrev.type === TransitionSeriesTransition;
             }
-            const inner = (jsxRuntime.jsx(remotion.Sequence, { from: Math.floor(actualStartFrame), durationInFrames: durationInFramesProp, ...passedProps, children: child }));
             const nextProgress = next
@@ -262,5 +261,3 @@ ? next.props.timing.getProgress({
                 const UppercasePrevPresentation = prevPresentation.component;
-                return (
-                // @ts-expect-error
-                jsxRuntime.jsx(UppercaseNextPresentation, { passedProps: (_d = nextPresentation.props) !== null && _d !== void 0 ? _d : {}, presentationDirection: "exiting", presentationProgress: nextProgress, children: jsxRuntime.jsx(UppercasePrevPresentation, { passedProps: (_e = prevPresentation.props) !== null && _e !== void 0 ? _e : {}, presentationDirection: "entering", presentationProgress: prevProgress, children: inner }) }));
+                return (jsxRuntime.jsx(remotion.Sequence, { from: Math.floor(actualStartFrame), durationInFrames: durationInFramesProp, ...passedProps, children: jsxRuntime.jsx(UppercaseNextPresentation, { passedProps: (_d = nextPresentation.props) !== null && _d !== void 0 ? _d : {}, presentationDirection: "exiting", presentationProgress: nextProgress, children: jsxRuntime.jsx(UppercasePrevPresentation, { passedProps: (_e = prevPresentation.props) !== null && _e !== void 0 ? _e : {}, presentationDirection: "entering", presentationProgress: prevProgress, children: child }) }) }));
             }
@@ -270,5 +267,3 @@ if (prevProgress !== null && prev) {
                 const UppercasePrevPresentation = prevPresentation.component;
-                return (
-                // @ts-expect-error
-                jsxRuntime.jsx(UppercasePrevPresentation, { passedProps: (_g = prevPresentation.props) !== null && _g !== void 0 ? _g : {}, presentationDirection: "entering", presentationProgress: prevProgress, children: inner }));
+                return (jsxRuntime.jsx(remotion.Sequence, { from: Math.floor(actualStartFrame), durationInFrames: durationInFramesProp, ...passedProps, children: jsxRuntime.jsx(UppercasePrevPresentation, { passedProps: (_g = prevPresentation.props) !== null && _g !== void 0 ? _g : {}, presentationDirection: "entering", presentationProgress: prevProgress, children: child }) }));
             }
@@ -278,7 +273,5 @@ if (nextProgress !== null && next) {
                 const UppercaseNextPresentation = nextPresentation.component;
-                return (
-                // @ts-expect-error
-                jsxRuntime.jsx(UppercaseNextPresentation, { passedProps: (_j = nextPresentation.props) !== null && _j !== void 0 ? _j : {}, presentationDirection: "exiting", presentationProgress: nextProgress, children: inner }));
+                return (jsxRuntime.jsx(remotion.Sequence, { from: Math.floor(actualStartFrame), durationInFrames: durationInFramesProp, ...passedProps, children: jsxRuntime.jsx(UppercaseNextPresentation, { passedProps: (_j = nextPresentation.props) !== null && _j !== void 0 ? _j : {}, presentationDirection: "exiting", presentationProgress: nextProgress, children: child }) }));
             }
-            return inner;
+            return (jsxRuntime.jsx(remotion.Sequence, { from: Math.floor(actualStartFrame), durationInFrames: durationInFramesProp, ...passedProps, children: child }));
         });
@@ -291,4 +284,3 @@ }, [children, fps, frame]);
     var _a;
-    const frame = remotion.useCurrentFrame();
-    const showInTimeline = frame < ((_a = otherProps.from) !== null && _a !== void 0 ? _a : 0);
+    const showInTimeline = ((_a = otherProps.from) !== null && _a !== void 0 ? _a : 0) !== 0;
     return (jsxRuntime.jsx(remotion.Sequence, { showInTimeline: showInTimeline, ...otherProps, children: jsxRuntime.jsx(TransitionSeriesChildren, { children: children }) }));
@@ -295,0 +287,0 @@ };

dist/cjs/presentations/fade.d.ts

@@ -1,4 +0,3 @@
-import type { TransitionPresentation } from "../types.js";
-type FadeProps = Record<string, never>;
+import type { TransitionPresentation } from '../types.js';
+export type FadeProps = Record<string, never>;
 export declare const fade: (props?: FadeProps) => TransitionPresentation<FadeProps>;
-export {};

dist/cjs/presentations/flip.d.ts

 import type { TransitionPresentation } from '../types.js';
 export type FlipDirection = 'from-left' | 'from-right' | 'from-top' | 'from-bottom';
-type FlipPresentationProps = {
+export type FlipProps = {
     direction?: FlipDirection;
     perspective?: number;
 };
-export declare const flip: (props?: FlipPresentationProps) => TransitionPresentation<FlipPresentationProps>;
-export {};
+export declare const flip: (props?: FlipProps) => TransitionPresentation<FlipProps>;

dist/cjs/presentations/slide.d.ts

@@ -1,7 +0,6 @@
-import type { TransitionPresentation } from "../types.js";
-export type SlideDirection = "from-left" | "from-top" | "from-right" | "from-bottom";
-type SlideProps = {
+import type { TransitionPresentation } from '../types.js';
+export type SlideDirection = 'from-left' | 'from-top' | 'from-right' | 'from-bottom';
+export type SlideProps = {
     direction?: SlideDirection;
 };
 export declare const slide: (props?: SlideProps) => TransitionPresentation<SlideProps>;
-export {};

dist/cjs/presentations/wipe.d.ts

@@ -1,7 +0,6 @@
-import type { TransitionPresentation } from "../types.js";
-export type WipeDirection = "from-left" | "from-top-left" | "from-top" | "from-top-right" | "from-right" | "from-bottom-right" | "from-bottom" | "from-bottom-left";
-type WipeProps = {
+import type { TransitionPresentation } from '../types.js';
+export type WipeDirection = 'from-left' | 'from-top-left' | 'from-top' | 'from-top-right' | 'from-right' | 'from-bottom-right' | 'from-bottom' | 'from-bottom-left';
+export type WipeProps = {
     direction?: WipeDirection;
 };
 export declare const wipe: (props?: WipeProps) => TransitionPresentation<WipeProps>;
-export {};

dist/cjs/slide.js

@@ -9,19 +9,19 @@ 'use strict';
 
-const SlidePresentation = ({ children, presentationProgress, presentationDirection, passedProps: { direction = "from-left" }, }) => {
+const SlidePresentation = ({ children, presentationProgress, presentationDirection, passedProps: { direction = 'from-left' }, }) => {
     const directionStyle = react.useMemo(() => {
-        if (presentationDirection === "exiting") {
+        if (presentationDirection === 'exiting') {
             switch (direction) {
-                case "from-left":
+                case 'from-left':
                     return {
                         transform: `translateX(${presentationProgress * 100}%)`,
                     };
-                case "from-right":
+                case 'from-right':
                     return {
                         transform: `translateX(-${presentationProgress * 100}%)`,
                     };
-                case "from-top":
+                case 'from-top':
                     return {
                         transform: `translateY(${presentationProgress * 100}%)`,
                     };
-                case "from-bottom":
+                case 'from-bottom':
                     return {
@@ -35,15 +35,15 @@ transform: `translateY(-${presentationProgress * 100}%)`,
         switch (direction) {
-            case "from-left":
+            case 'from-left':
                 return {
                     transform: `translateX(${-100 + presentationProgress * 100}%)`,
                 };
-            case "from-right":
+            case 'from-right':
                 return {
                     transform: `translateX(${100 - presentationProgress * 100}%)`,
                 };
-            case "from-top":
+            case 'from-top':
                 return {
                     transform: `translateY(${-100 + presentationProgress * 100}%)`,
                 };
-            case "from-bottom":
+            case 'from-bottom':
                 return {
@@ -58,6 +58,6 @@ transform: `translateY(${100 - presentationProgress * 100}%)`,
         return {
-            width: "100%",
-            height: "100%",
-            justifyContent: "center",
-            alignItems: "center",
+            width: '100%',
+            height: '100%',
+            justifyContent: 'center',
+            alignItems: 'center',
             ...directionStyle,
@@ -64,0 +64,0 @@ };

dist/cjs/timings/spring-timing.d.ts

@@ -1,3 +0,3 @@
-import type { SpringConfig } from "remotion";
-import type { TransitionTiming } from "../types.js";
+import type { SpringConfig } from 'remotion';
+import type { TransitionTiming } from '../types.js';
 export declare const springTiming: (options?: {
@@ -4,0 +4,0 @@ config?: Partial<SpringConfig>;

dist/cjs/TransitionSeries.d.ts

@@ -1,4 +0,4 @@
-import type { FC, PropsWithChildren } from "react";
-import type { LayoutAndStyle, SequencePropsWithoutDuration } from "remotion";
-import type { TransitionSeriesTransitionProps } from "./types.js";
+import type { FC, PropsWithChildren } from 'react';
+import type { LayoutAndStyle, SequencePropsWithoutDuration } from 'remotion';
+import type { TransitionSeriesTransitionProps } from './types.js';
 declare const TransitionSeriesTransition: <PresentationProps extends Record<string, unknown>>(_props: TransitionSeriesTransitionProps<PresentationProps>) => null;
@@ -9,3 +9,3 @@ type SeriesSequenceProps = PropsWithChildren<{
     className?: number;
-} & LayoutAndStyle & Pick<SequencePropsWithoutDuration, "name">>;
+} & LayoutAndStyle & Pick<SequencePropsWithoutDuration, 'name'>>;
 declare const SeriesSequence: ({ children }: SeriesSequenceProps) => JSX.Element;
@@ -12,0 +12,0 @@ declare const TransitionSeries: FC<SequencePropsWithoutDuration> & {

dist/cjs/types.d.ts

@@ -1,3 +0,3 @@
-import type { ComponentType } from "react";
-export type PresentationDirection = "entering" | "exiting";
+import type { ComponentType } from 'react';
+export type PresentationDirection = 'entering' | 'exiting';
 export type TransitionTiming = {
@@ -4,0 +4,0 @@ getDurationInFrames: (options: {

dist/cjs/validate.d.ts

@@ -1,2 +0,2 @@
-import { Internals } from "remotion";
+import { Internals } from 'remotion';
 export declare const validateDurationInFrames: typeof Internals.validateDurationInFrames;

dist/cjs/wipe.js

@@ -11,3 +11,3 @@ 'use strict';
     switch (direction) {
-        case "from-left":
+        case 'from-left':
             return `
@@ -19,3 +19,3 @@ M 0 0
 Z`;
-        case "from-top-left":
+        case 'from-top-left':
             return `
@@ -26,3 +26,3 @@ M 0 0
 Z`;
-        case "from-top":
+        case 'from-top':
             return `
@@ -34,3 +34,3 @@ M 0 0
 Z`;
-        case "from-top-right":
+        case 'from-top-right':
             return `
@@ -41,3 +41,3 @@ M 1 0
 Z`;
-        case "from-right":
+        case 'from-right':
             return `
@@ -49,3 +49,3 @@ M 1 0
 Z`;
-        case "from-bottom-right":
+        case 'from-bottom-right':
             return `
@@ -56,3 +56,3 @@ M 1 1
 Z`;
-        case "from-bottom":
+        case 'from-bottom':
             return `
@@ -64,3 +64,3 @@ M 0 1
 Z`;
-        case "from-bottom-left":
+        case 'from-bottom-left':
             return `
@@ -77,3 +77,3 @@ M 0 1
     switch (direction) {
-        case "from-left":
+        case 'from-left':
             return `
@@ -85,3 +85,3 @@ M 1 1
 Z`;
-        case "from-top-left":
+        case 'from-top-left':
             return `
@@ -92,3 +92,3 @@ M 1 1
 Z`;
-        case "from-top":
+        case 'from-top':
             return `
@@ -100,3 +100,3 @@ M 1 1
 Z`;
-        case "from-top-right":
+        case 'from-top-right':
             return `
@@ -107,3 +107,3 @@ M 0 1
 Z`;
-        case "from-right":
+        case 'from-right':
             return `
@@ -115,3 +115,3 @@ M 0 0
 Z`;
-        case "from-bottom-right":
+        case 'from-bottom-right':
             return `
@@ -122,3 +122,3 @@ M 0 0
 Z`;
-        case "from-bottom":
+        case 'from-bottom':
             return `
@@ -130,3 +130,3 @@ M 1 0
 Z`;
-        case "from-bottom-left":
+        case 'from-bottom-left':
             return `
@@ -141,8 +141,8 @@ M 1 0
 };
-const WipePresentation = ({ children, presentationProgress, presentationDirection, passedProps: { direction = "from-left" }, }) => {
+const WipePresentation = ({ children, presentationProgress, presentationDirection, passedProps: { direction = 'from-left' }, }) => {
     const [clipId] = react.useState(() => String(remotion.random(null)));
-    const progressInDirection = presentationDirection === "entering"
+    const progressInDirection = presentationDirection === 'entering'
         ? presentationProgress
         : 1 - presentationProgress;
-    const path = presentationDirection === "entering"
+    const path = presentationDirection === 'entering'
         ? makePathIn(progressInDirection, direction)
@@ -152,6 +152,6 @@ : makePathOut(progressInDirection, direction);
         return {
-            width: "100%",
-            height: "100%",
-            justifyContent: "center",
-            alignItems: "center",
+            width: '100%',
+            height: '100%',
+            justifyContent: 'center',
+            alignItems: 'center',
             clipPath: `url(#${clipId})`,
@@ -162,5 +162,5 @@ };
         return {
-            width: "100%",
-            height: "100%",
-            pointerEvents: "none",
+            width: '100%',
+            height: '100%',
+            pointerEvents: 'none',
         };
@@ -167,0 +167,0 @@ }, []);

dist/flatten-children.d.ts

@@ -1,2 +0,2 @@
-import React from "react";
+import React from 'react';
 export declare const flattenChildren: (children: React.ReactNode) => (string | number | React.ReactElement<any, string | React.JSXElementConstructor<any>> | React.ReactFragment | React.ReactPortal)[];

dist/flatten-children.js

@@ -1,2 +0,2 @@
-import React from "react";
+import React from 'react';
 export const flattenChildren = (children) => {
@@ -3,0 +3,0 @@ const childrenArray = React.Children.toArray(children);

dist/index.d.ts

@@ -0,4 +1,4 @@
+export { linearTiming } from './timings/linear-timing.js';
 export { springTiming } from './timings/spring-timing.js';
-export { linearTiming } from "./timings/linear-timing.js";
-export { TransitionSeries } from "./TransitionSeries.js";
-export { TransitionTiming, TransitionPresentation, TransitionPresentationComponentProps, } from "./types.js";
+export { TransitionSeries } from './TransitionSeries.js';
+export { TransitionPresentation, TransitionPresentationComponentProps, TransitionTiming, } from './types.js';

dist/index.js

 // Timings
+export { linearTiming } from './timings/linear-timing.js';
 export { springTiming } from './timings/spring-timing.js';
-export { linearTiming } from "./timings/linear-timing.js";
 // Component
-export { TransitionSeries } from "./TransitionSeries.js";
+export { TransitionSeries } from './TransitionSeries.js';

dist/presentations/fade.d.ts

@@ -1,4 +0,3 @@
-import type { TransitionPresentation } from "../types.js";
-type FadeProps = Record<string, never>;
+import type { TransitionPresentation } from '../types.js';
+export type FadeProps = Record<string, never>;
 export declare const fade: (props?: FadeProps) => TransitionPresentation<FadeProps>;
-export {};

dist/presentations/fade.js

 import { jsx as _jsx } from "react/jsx-runtime";
-import { useMemo } from "react";
-import { AbsoluteFill } from "remotion";
+import { useMemo } from 'react';
+import { AbsoluteFill } from 'remotion';
 const FadePresentation = ({ children, presentationDirection, presentationProgress }) => {
     const style = useMemo(() => {
         return {
-            opacity: presentationDirection === "entering" ? presentationProgress : 1,
+            opacity: presentationDirection === 'entering' ? presentationProgress : 1,
         };
@@ -9,0 +9,0 @@ }, [presentationDirection, presentationProgress]);

dist/presentations/flip.d.ts

 import type { TransitionPresentation } from '../types.js';
 export type FlipDirection = 'from-left' | 'from-right' | 'from-top' | 'from-bottom';
-type FlipPresentationProps = {
+export type FlipProps = {
     direction?: FlipDirection;
     perspective?: number;
 };
-export declare const flip: (props?: FlipPresentationProps) => TransitionPresentation<FlipPresentationProps>;
-export {};
+export declare const flip: (props?: FlipProps) => TransitionPresentation<FlipProps>;

dist/presentations/slide.d.ts

@@ -1,7 +0,6 @@
-import type { TransitionPresentation } from "../types.js";
-export type SlideDirection = "from-left" | "from-top" | "from-right" | "from-bottom";
-type SlideProps = {
+import type { TransitionPresentation } from '../types.js';
+export type SlideDirection = 'from-left' | 'from-top' | 'from-right' | 'from-bottom';
+export type SlideProps = {
     direction?: SlideDirection;
 };
 export declare const slide: (props?: SlideProps) => TransitionPresentation<SlideProps>;
-export {};

dist/presentations/slide.js

 import { jsx as _jsx } from "react/jsx-runtime";
-import { useMemo } from "react";
-import { AbsoluteFill } from "remotion";
-const SlidePresentation = ({ children, presentationProgress, presentationDirection, passedProps: { direction = "from-left" }, }) => {
+import { useMemo } from 'react';
+import { AbsoluteFill } from 'remotion';
+const SlidePresentation = ({ children, presentationProgress, presentationDirection, passedProps: { direction = 'from-left' }, }) => {
     const directionStyle = useMemo(() => {
-        if (presentationDirection === "exiting") {
+        if (presentationDirection === 'exiting') {
             switch (direction) {
-                case "from-left":
+                case 'from-left':
                     return {
                         transform: `translateX(${presentationProgress * 100}%)`,
                     };
-                case "from-right":
+                case 'from-right':
                     return {
                         transform: `translateX(-${presentationProgress * 100}%)`,
                     };
-                case "from-top":
+                case 'from-top':
                     return {
                         transform: `translateY(${presentationProgress * 100}%)`,
                     };
-                case "from-bottom":
+                case 'from-bottom':
                     return {
@@ -29,15 +29,15 @@ transform: `translateY(-${presentationProgress * 100}%)`,
         switch (direction) {
-            case "from-left":
+            case 'from-left':
                 return {
                     transform: `translateX(${-100 + presentationProgress * 100}%)`,
                 };
-            case "from-right":
+            case 'from-right':
                 return {
                     transform: `translateX(${100 - presentationProgress * 100}%)`,
                 };
-            case "from-top":
+            case 'from-top':
                 return {
                     transform: `translateY(${-100 + presentationProgress * 100}%)`,
                 };
-            case "from-bottom":
+            case 'from-bottom':
                 return {
@@ -52,6 +52,6 @@ transform: `translateY(${100 - presentationProgress * 100}%)`,
         return {
-            width: "100%",
-            height: "100%",
-            justifyContent: "center",
-            alignItems: "center",
+            width: '100%',
+            height: '100%',
+            justifyContent: 'center',
+            alignItems: 'center',
             ...directionStyle,
@@ -58,0 +58,0 @@ };

dist/presentations/wipe.d.ts

@@ -1,7 +0,6 @@
-import type { TransitionPresentation } from "../types.js";
-export type WipeDirection = "from-left" | "from-top-left" | "from-top" | "from-top-right" | "from-right" | "from-bottom-right" | "from-bottom" | "from-bottom-left";
-type WipeProps = {
+import type { TransitionPresentation } from '../types.js';
+export type WipeDirection = 'from-left' | 'from-top-left' | 'from-top' | 'from-top-right' | 'from-right' | 'from-bottom-right' | 'from-bottom' | 'from-bottom-left';
+export type WipeProps = {
     direction?: WipeDirection;
 };
 export declare const wipe: (props?: WipeProps) => TransitionPresentation<WipeProps>;
-export {};

dist/presentations/wipe.js

 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo, useState } from "react";
-import { AbsoluteFill, random } from "remotion";
+import { useMemo, useState } from 'react';
+import { AbsoluteFill, random } from 'remotion';
 const makePathIn = (progress, direction) => {
     switch (direction) {
-        case "from-left":
+        case 'from-left':
             return `
@@ -13,3 +13,3 @@ M 0 0
 Z`;
-        case "from-top-left":
+        case 'from-top-left':
             return `
@@ -20,3 +20,3 @@ M 0 0
 Z`;
-        case "from-top":
+        case 'from-top':
             return `
@@ -28,3 +28,3 @@ M 0 0
 Z`;
-        case "from-top-right":
+        case 'from-top-right':
             return `
@@ -35,3 +35,3 @@ M 1 0
 Z`;
-        case "from-right":
+        case 'from-right':
             return `
@@ -43,3 +43,3 @@ M 1 0
 Z`;
-        case "from-bottom-right":
+        case 'from-bottom-right':
             return `
@@ -50,3 +50,3 @@ M 1 1
 Z`;
-        case "from-bottom":
+        case 'from-bottom':
             return `
@@ -58,3 +58,3 @@ M 0 1
 Z`;
-        case "from-bottom-left":
+        case 'from-bottom-left':
             return `
@@ -71,3 +71,3 @@ M 0 1
     switch (direction) {
-        case "from-left":
+        case 'from-left':
             return `
@@ -79,3 +79,3 @@ M 1 1
 Z`;
-        case "from-top-left":
+        case 'from-top-left':
             return `
@@ -86,3 +86,3 @@ M 1 1
 Z`;
-        case "from-top":
+        case 'from-top':
             return `
@@ -94,3 +94,3 @@ M 1 1
 Z`;
-        case "from-top-right":
+        case 'from-top-right':
             return `
@@ -101,3 +101,3 @@ M 0 1
 Z`;
-        case "from-right":
+        case 'from-right':
             return `
@@ -109,3 +109,3 @@ M 0 0
 Z`;
-        case "from-bottom-right":
+        case 'from-bottom-right':
             return `
@@ -116,3 +116,3 @@ M 0 0
 Z`;
-        case "from-bottom":
+        case 'from-bottom':
             return `
@@ -124,3 +124,3 @@ M 1 0
 Z`;
-        case "from-bottom-left":
+        case 'from-bottom-left':
             return `
@@ -135,8 +135,8 @@ M 1 0
 };
-const WipePresentation = ({ children, presentationProgress, presentationDirection, passedProps: { direction = "from-left" }, }) => {
+const WipePresentation = ({ children, presentationProgress, presentationDirection, passedProps: { direction = 'from-left' }, }) => {
     const [clipId] = useState(() => String(random(null)));
-    const progressInDirection = presentationDirection === "entering"
+    const progressInDirection = presentationDirection === 'entering'
         ? presentationProgress
         : 1 - presentationProgress;
-    const path = presentationDirection === "entering"
+    const path = presentationDirection === 'entering'
         ? makePathIn(progressInDirection, direction)
@@ -146,6 +146,6 @@ : makePathOut(progressInDirection, direction);
         return {
-            width: "100%",
-            height: "100%",
-            justifyContent: "center",
-            alignItems: "center",
+            width: '100%',
+            height: '100%',
+            justifyContent: 'center',
+            alignItems: 'center',
             clipPath: `url(#${clipId})`,
@@ -156,5 +156,5 @@ };
         return {
-            width: "100%",
-            height: "100%",
-            pointerEvents: "none",
+            width: '100%',
+            height: '100%',
+            pointerEvents: 'none',
         };
@@ -161,0 +161,0 @@ }, []);

dist/timings/spring-timing.d.ts

@@ -1,3 +0,3 @@
-import type { SpringConfig } from "remotion";
-import type { TransitionTiming } from "../types.js";
+import type { SpringConfig } from 'remotion';
+import type { TransitionTiming } from '../types.js';
 export declare const springTiming: (options?: {
@@ -4,0 +4,0 @@ config?: Partial<SpringConfig>;

dist/timings/spring-timing.js

@@ -1,5 +0,5 @@
-import { measureSpring, spring } from "remotion";
+import { measureSpring, spring } from 'remotion';
 const springWithInvalidArgumentRejection = (args) => {
     if (args.to || args.from) {
-        throw new Error("to / from values are not supported by springWithRoundUpIfThreshold");
+        throw new Error('to / from values are not supported by springWithRoundUpIfThreshold');
     }
@@ -6,0 +6,0 @@ return spring(args);

dist/TransitionSeries.d.ts

@@ -1,4 +0,4 @@
-import type { FC, PropsWithChildren } from "react";
-import type { LayoutAndStyle, SequencePropsWithoutDuration } from "remotion";
-import type { TransitionSeriesTransitionProps } from "./types.js";
+import type { FC, PropsWithChildren } from 'react';
+import type { LayoutAndStyle, SequencePropsWithoutDuration } from 'remotion';
+import type { TransitionSeriesTransitionProps } from './types.js';
 declare const TransitionSeriesTransition: <PresentationProps extends Record<string, unknown>>(_props: TransitionSeriesTransitionProps<PresentationProps>) => null;
@@ -9,3 +9,3 @@ type SeriesSequenceProps = PropsWithChildren<{
     className?: number;
-} & LayoutAndStyle & Pick<SequencePropsWithoutDuration, "name">>;
+} & LayoutAndStyle & Pick<SequencePropsWithoutDuration, 'name'>>;
 declare const SeriesSequence: ({ children }: SeriesSequenceProps) => JSX.Element;
@@ -12,0 +12,0 @@ declare const TransitionSeries: FC<SequencePropsWithoutDuration> & {

dist/TransitionSeries.js

 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import { Children, useMemo } from "react";
-import { Sequence, useCurrentFrame, useVideoConfig } from "remotion";
-import { slide } from "./presentations/slide.js";
-import { flattenChildren } from "./flatten-children.js";
-import { validateDurationInFrames } from "./validate.js";
+import { Children, useMemo } from 'react';
+import { Sequence, useCurrentFrame, useVideoConfig } from 'remotion';
+import { flattenChildren } from './flatten-children.js';
+import { slide } from './presentations/slide.js';
+import { validateDurationInFrames } from './validate.js';
 // eslint-disable-next-line react/function-component-definition
@@ -27,5 +27,5 @@ const TransitionSeriesTransition = function (
             const current = child;
-            if (typeof current === "string") {
+            if (typeof current === 'string') {
                 // Don't throw if it's just some accidential whitespace
-                if (current.trim() === "") {
+                if (current.trim() === '') {
                     return null;
@@ -37,3 +37,3 @@ }
             const nextPrev = flattedChildren[i + 1];
-            const prev = typeof hasPrev === "string" || typeof hasPrev === "undefined"
+            const prev = typeof hasPrev === 'string' || typeof hasPrev === 'undefined'
                 ? null
@@ -43,3 +43,3 @@ : hasPrev.type === TransitionSeriesTransition
                     : null;
-            const next = typeof nextPrev === "string" || typeof nextPrev === "undefined"
+            const next = typeof nextPrev === 'string' || typeof nextPrev === 'undefined'
                 ? null
@@ -49,3 +49,3 @@ : nextPrev.type === TransitionSeriesTransition
                     : null;
-            const prevIsTransition = typeof hasPrev === "string" || typeof hasPrev === "undefined"
+            const prevIsTransition = typeof hasPrev === 'string' || typeof hasPrev === 'undefined'
                 ? false
@@ -98,3 +98,2 @@ : hasPrev.type === TransitionSeriesTransition;
             }
-            const inner = (_jsx(Sequence, { from: Math.floor(actualStartFrame), durationInFrames: durationInFramesProp, ...passedProps, children: child }));
             const nextProgress = next
@@ -128,5 +127,3 @@ ? next.props.timing.getProgress({
                 const UppercasePrevPresentation = prevPresentation.component;
-                return (
-                // @ts-expect-error
-                _jsx(UppercaseNextPresentation, { passedProps: (_d = nextPresentation.props) !== null && _d !== void 0 ? _d : {}, presentationDirection: "exiting", presentationProgress: nextProgress, children: _jsx(UppercasePrevPresentation, { passedProps: (_e = prevPresentation.props) !== null && _e !== void 0 ? _e : {}, presentationDirection: "entering", presentationProgress: prevProgress, children: inner }) }));
+                return (_jsx(Sequence, { from: Math.floor(actualStartFrame), durationInFrames: durationInFramesProp, ...passedProps, children: _jsx(UppercaseNextPresentation, { passedProps: (_d = nextPresentation.props) !== null && _d !== void 0 ? _d : {}, presentationDirection: "exiting", presentationProgress: nextProgress, children: _jsx(UppercasePrevPresentation, { passedProps: (_e = prevPresentation.props) !== null && _e !== void 0 ? _e : {}, presentationDirection: "entering", presentationProgress: prevProgress, children: child }) }) }));
             }
@@ -136,5 +133,3 @@ if (prevProgress !== null && prev) {
                 const UppercasePrevPresentation = prevPresentation.component;
-                return (
-                // @ts-expect-error
-                _jsx(UppercasePrevPresentation, { passedProps: (_g = prevPresentation.props) !== null && _g !== void 0 ? _g : {}, presentationDirection: "entering", presentationProgress: prevProgress, children: inner }));
+                return (_jsx(Sequence, { from: Math.floor(actualStartFrame), durationInFrames: durationInFramesProp, ...passedProps, children: _jsx(UppercasePrevPresentation, { passedProps: (_g = prevPresentation.props) !== null && _g !== void 0 ? _g : {}, presentationDirection: "entering", presentationProgress: prevProgress, children: child }) }));
             }
@@ -144,7 +139,5 @@ if (nextProgress !== null && next) {
                 const UppercaseNextPresentation = nextPresentation.component;
-                return (
-                // @ts-expect-error
-                _jsx(UppercaseNextPresentation, { passedProps: (_j = nextPresentation.props) !== null && _j !== void 0 ? _j : {}, presentationDirection: "exiting", presentationProgress: nextProgress, children: inner }));
+                return (_jsx(Sequence, { from: Math.floor(actualStartFrame), durationInFrames: durationInFramesProp, ...passedProps, children: _jsx(UppercaseNextPresentation, { passedProps: (_j = nextPresentation.props) !== null && _j !== void 0 ? _j : {}, presentationDirection: "exiting", presentationProgress: nextProgress, children: child }) }));
             }
-            return inner;
+            return (_jsx(Sequence, { from: Math.floor(actualStartFrame), durationInFrames: durationInFramesProp, ...passedProps, children: child }));
         });
@@ -157,4 +150,3 @@ }, [children, fps, frame]);
     var _a;
-    const frame = useCurrentFrame();
-    const showInTimeline = frame < ((_a = otherProps.from) !== null && _a !== void 0 ? _a : 0);
+    const showInTimeline = ((_a = otherProps.from) !== null && _a !== void 0 ? _a : 0) !== 0;
     return (_jsx(Sequence, { showInTimeline: showInTimeline, ...otherProps, children: _jsx(TransitionSeriesChildren, { children: children }) }));
@@ -161,0 +153,0 @@ };

dist/types.d.ts

@@ -1,3 +0,3 @@
-import type { ComponentType } from "react";
-export type PresentationDirection = "entering" | "exiting";
+import type { ComponentType } from 'react';
+export type PresentationDirection = 'entering' | 'exiting';
 export type TransitionTiming = {
@@ -4,0 +4,0 @@ getDurationInFrames: (options: {

dist/validate.d.ts

@@ -1,2 +0,2 @@
-import { Internals } from "remotion";
+import { Internals } from 'remotion';
 export declare const validateDurationInFrames: typeof Internals.validateDurationInFrames;

dist/validate.js

 /* eslint-disable prefer-destructuring */
-import { Internals } from "remotion";
+import { Internals } from 'remotion';
 export const validateDurationInFrames = Internals.validateDurationInFrames;

package.json

 {
   "name": "@remotion/transitions",
-  "version": "4.0.57",
+  "version": "4.0.58",
   "description": "Transition presets for Remotion",
@@ -19,3 +19,3 @@ "sideEffects": false,
   "dependencies": {
-    "remotion": "4.0.57"
+    "remotion": "4.0.58"
   },
@@ -27,4 +27,4 @@ "devDependencies": {
     "prettier-plugin-organize-imports": "^3.2.2",
-    "react": "18.0.0",
-    "react-dom": "18.0.0",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "vitest": "0.31.1",
@@ -36,4 +36,4 @@ "@types/react": "18.0.26",
     "@rollup/plugin-typescript": "^8.2.0",
-    "remotion": "4.0.57",
-    "@remotion/test-utils": "4.0.57"
+    "remotion": "4.0.58",
+    "@remotion/test-utils": "4.0.58"
   },
@@ -102,2 +102,3 @@ "peerDependencies": {
     "lint": "eslint src --ext ts,tsx",
+    "formatting": "prettier src --check",
     "watch": "tsc -w",
@@ -104,0 +105,0 @@ "build": "rollup --config rollup.config.js && tsc -d"

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

58488

increased by0.44%

Worsened metrics

Lines of code

1264

decreased by-1.48%

Dependency changes

• + Addedremotion@4.0.58(transitive)

• - Removedremotion@4.0.57(transitive)

• Updatedremotion@4.0.58