@remotion/transitions 4.0.56 → 4.0.58

package/dist/TransitionSeries.d.ts

@@ -1,12 +1,12 @@
-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;
 type SeriesSequenceProps = PropsWithChildren<{
     durationInFrames: number;
     offset?: number;
     className?: number;
-} & LayoutAndStyle & Pick<SequencePropsWithoutDuration, "name">>;
+} & LayoutAndStyle & Pick<SequencePropsWithoutDuration, 'name'>>;
 declare const SeriesSequence: ({ children }: SeriesSequenceProps) => JSX.Element;
 declare const TransitionSeries: FC<SequencePropsWithoutDuration> & {
     Sequence: typeof SeriesSequence;

package/dist/TransitionSeries.js

@@ -1,9 +1,9 @@
 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
 const TransitionSeriesTransition = function (
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -24,26 +24,26 @@ const TransitionSeriesChildren = ({ children, }) => {
         return Children.map(flattedChildren, (child, i) => {
             var _a, _b, _c, _d, _e, _f, _g, _h, _j;
             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;
                 }
                 throw new TypeError(`The <TransitionSeries /> component only accepts a list of <TransitionSeries.Sequence /> components as its children, but you passed a string "${current}"`);
             }
             const hasPrev = flattedChildren[i - 1];
             const nextPrev = flattedChildren[i + 1];
-            const prev = typeof hasPrev === "string" || typeof hasPrev === "undefined"
+            const prev = typeof hasPrev === 'string' || typeof hasPrev === 'undefined'
                 ? null
                 : hasPrev.type === TransitionSeriesTransition
                     ? hasPrev
                     : null;
-            const next = typeof nextPrev === "string" || typeof nextPrev === "undefined"
+            const next = typeof nextPrev === 'string' || typeof nextPrev === 'undefined'
                 ? null
                 : nextPrev.type === TransitionSeriesTransition
                     ? nextPrev
                     : null;
-            const prevIsTransition = typeof hasPrev === "string" || typeof hasPrev === "undefined"
+            const prevIsTransition = typeof hasPrev === 'string' || typeof hasPrev === 'undefined'
                 ? false
                 : hasPrev.type === TransitionSeriesTransition;
             if (current.type === TransitionSeriesTransition) {
@@ -91,7 +91,6 @@ const TransitionSeriesChildren = ({ children, }) => {
                 startFrame -= actualStartFrame;
                 actualStartFrame = 0;
             }
-            const inner = (_jsx(Sequence, { from: Math.floor(actualStartFrame), durationInFrames: durationInFramesProp, ...passedProps, children: child }));
             const nextProgress = next
                 ? next.props.timing.getProgress({
                     frame: frame -
@@ -120,25 +119,19 @@ const TransitionSeriesChildren = ({ children, }) => {
                 const prevPresentation = (_c = prev.props.presentation) !== null && _c !== void 0 ? _c : slide();
                 const UppercaseNextPresentation = nextPresentation.component;
                 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 }) }) }));
             }
             if (prevProgress !== null && prev) {
                 const prevPresentation = (_f = prev.props.presentation) !== null && _f !== void 0 ? _f : slide();
                 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 }) }));
             }
             if (nextProgress !== null && next) {
                 const nextPresentation = (_h = next.props.presentation) !== null && _h !== void 0 ? _h : slide();
                 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 }));
         });
     }, [children, fps, frame]);
     // eslint-disable-next-line react/jsx-no-useless-fragment
@@ -146,8 +139,7 @@ const TransitionSeriesChildren = ({ children, }) => {
 };
 const TransitionSeries = ({ children, ...otherProps }) => {
     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 }) }));
 };
 TransitionSeries.Sequence = SeriesSequence;

package/dist/cjs/TransitionSeries.d.ts

@@ -1,12 +1,12 @@
-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;
 type SeriesSequenceProps = PropsWithChildren<{
     durationInFrames: number;
     offset?: number;
     className?: number;
-} & LayoutAndStyle & Pick<SequencePropsWithoutDuration, "name">>;
+} & LayoutAndStyle & Pick<SequencePropsWithoutDuration, 'name'>>;
 declare const SeriesSequence: ({ children }: SeriesSequenceProps) => JSX.Element;
 declare const TransitionSeries: FC<SequencePropsWithoutDuration> & {
     Sequence: typeof SeriesSequence;

package/dist/cjs/fade.js

@@ -9,7 +9,7 @@ var remotion = require('remotion');
 const FadePresentation = ({ children, presentationDirection, presentationProgress }) => {
     const style = react.useMemo(() => {
         return {
-            opacity: presentationDirection === "entering" ? presentationProgress : 1,
+            opacity: presentationDirection === 'entering' ? presentationProgress : 1,
         };
     }, [presentationDirection, presentationProgress]);
     return (jsxRuntime.jsx(remotion.AbsoluteFill, { children: jsxRuntime.jsx(remotion.AbsoluteFill, { style: style, children: children }) }));

package/dist/cjs/flatten-children.d.ts

@@ -1,2 +1,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)[];

package/dist/cjs/index.d.ts

@@ -1,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';

package/dist/cjs/index.js

@@ -10,9 +10,24 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
+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');
     }
     return remotion.spring(args);
 };
@@ -40,38 +55,35 @@ const springTiming = (options = {}) => {
     };
 };
 
-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 {
                         transform: `translateY(-${presentationProgress * 100}%)`,
                     };
@@ -80,19 +92,19 @@ const SlidePresentation = ({ children, presentationProgress, presentationDirecti
             }
         }
         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 {
                     transform: `translateY(${100 - presentationProgress * 100}%)`,
                 };
@@ -102,10 +114,10 @@ const SlidePresentation = ({ children, presentationProgress, presentationDirecti
     }, [presentationDirection, presentationProgress, direction]);
     const style = React.useMemo(() => {
         return {
-            width: "100%",
-            height: "100%",
-            justifyContent: "center",
-            alignItems: "center",
+            width: '100%',
+            height: '100%',
+            justifyContent: 'center',
+            alignItems: 'center',
             ...directionStyle,
         };
     }, [directionStyle]);
@@ -118,18 +130,6 @@ const slide = (props) => {
     };
 };
 
-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 */
 const validateDurationInFrames = remotion.Internals.validateDurationInFrames;
 
@@ -153,26 +153,26 @@ const TransitionSeriesChildren = ({ children, }) => {
         return React.Children.map(flattedChildren, (child, i) => {
             var _a, _b, _c, _d, _e, _f, _g, _h, _j;
             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;
                 }
                 throw new TypeError(`The <TransitionSeries /> component only accepts a list of <TransitionSeries.Sequence /> components as its children, but you passed a string "${current}"`);
             }
             const hasPrev = flattedChildren[i - 1];
             const nextPrev = flattedChildren[i + 1];
-            const prev = typeof hasPrev === "string" || typeof hasPrev === "undefined"
+            const prev = typeof hasPrev === 'string' || typeof hasPrev === 'undefined'
                 ? null
                 : hasPrev.type === TransitionSeriesTransition
                     ? hasPrev
                     : null;
-            const next = typeof nextPrev === "string" || typeof nextPrev === "undefined"
+            const next = typeof nextPrev === 'string' || typeof nextPrev === 'undefined'
                 ? null
                 : nextPrev.type === TransitionSeriesTransition
                     ? nextPrev
                     : null;
-            const prevIsTransition = typeof hasPrev === "string" || typeof hasPrev === "undefined"
+            const prevIsTransition = typeof hasPrev === 'string' || typeof hasPrev === 'undefined'
                 ? false
                 : hasPrev.type === TransitionSeriesTransition;
             if (current.type === TransitionSeriesTransition) {
@@ -220,7 +220,6 @@ const TransitionSeriesChildren = ({ children, }) => {
                 startFrame -= actualStartFrame;
                 actualStartFrame = 0;
             }
-            const inner = (jsxRuntime.jsx(remotion.Sequence, { from: Math.floor(actualStartFrame), durationInFrames: durationInFramesProp, ...passedProps, children: child }));
             const nextProgress = next
                 ? next.props.timing.getProgress({
                     frame: frame -
@@ -249,25 +248,19 @@ const TransitionSeriesChildren = ({ children, }) => {
                 const prevPresentation = (_c = prev.props.presentation) !== null && _c !== void 0 ? _c : slide();
                 const UppercaseNextPresentation = nextPresentation.component;
                 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 }) }) }));
             }
             if (prevProgress !== null && prev) {
                 const prevPresentation = (_f = prev.props.presentation) !== null && _f !== void 0 ? _f : slide();
                 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 }) }));
             }
             if (nextProgress !== null && next) {
                 const nextPresentation = (_h = next.props.presentation) !== null && _h !== void 0 ? _h : slide();
                 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 }));
         });
     }, [children, fps, frame]);
     // eslint-disable-next-line react/jsx-no-useless-fragment
@@ -275,8 +268,7 @@ const TransitionSeriesChildren = ({ children, }) => {
 };
 const TransitionSeries = ({ children, ...otherProps }) => {
     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 }) }));
 };
 TransitionSeries.Sequence = SeriesSequence;

package/dist/cjs/presentations/fade.d.ts

@@ -1,4 +1,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 {};

package/dist/cjs/presentations/flip.d.ts

@@ -1,8 +1,7 @@
 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>;

package/dist/cjs/presentations/slide.d.ts

@@ -1,7 +1,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 {};

package/dist/cjs/presentations/wipe.d.ts

@@ -1,7 +1,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 {};

package/dist/cjs/slide.js

@@ -6,23 +6,23 @@ var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 var remotion = require('remotion');
 
-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 {
                         transform: `translateY(-${presentationProgress * 100}%)`,
                     };
@@ -31,19 +31,19 @@ const SlidePresentation = ({ children, presentationProgress, presentationDirecti
             }
         }
         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 {
                     transform: `translateY(${100 - presentationProgress * 100}%)`,
                 };
@@ -53,10 +53,10 @@ const SlidePresentation = ({ children, presentationProgress, presentationDirecti
     }, [presentationDirection, presentationProgress, direction]);
     const style = react.useMemo(() => {
         return {
-            width: "100%",
-            height: "100%",
-            justifyContent: "center",
-            alignItems: "center",
+            width: '100%',
+            height: '100%',
+            justifyContent: 'center',
+            alignItems: 'center',
             ...directionStyle,
         };
     }, [directionStyle]);

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

@@ -1,5 +1,5 @@
-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?: {
     config?: Partial<SpringConfig>;
     durationInFrames?: number;

package/dist/cjs/types.d.ts

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

package/dist/cjs/validate.d.ts

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

package/dist/cjs/wipe.js

@@ -8,53 +8,53 @@ var remotion = require('remotion');
 
 const makePathIn = (progress, direction) => {
     switch (direction) {
-        case "from-left":
+        case 'from-left':
             return `
 M 0 0
 L ${progress} 0
 L ${progress} 1
 L 0 1
 Z`;
-        case "from-top-left":
+        case 'from-top-left':
             return `
 M 0 0
 L ${progress * 2} 0
 L 0 ${progress * 2}
 Z`;
-        case "from-top":
+        case 'from-top':
             return `
 M 0 0
 L 1 0
 L 1 ${progress}
 L 0 ${progress}
 Z`;
-        case "from-top-right":
+        case 'from-top-right':
             return `
 M 1 0
 L ${1 - progress * 2} 0
 L 1 ${progress * 2}
 Z`;
-        case "from-right":
+        case 'from-right':
             return `
 M 1 0
 L 1 1
 L ${1 - progress} 1
 L ${1 - progress} 0
 Z`;
-        case "from-bottom-right":
+        case 'from-bottom-right':
             return `
 M 1 1
 L ${1 - progress * 2} 1
 L 1 ${1 - progress * 2}
 Z`;
-        case "from-bottom":
+        case 'from-bottom':
             return `
 M 0 1
 L 1 1
 L 1 ${1 - progress}
 L 0 ${1 - progress}
 Z`;
-        case "from-bottom-left":
+        case 'from-bottom-left':
             return `
 M 0 1
 L 0 ${1 - progress * 2}
@@ -66,53 +66,53 @@ Z`;
 };
 const makePathOut = (progress, direction) => {
     switch (direction) {
-        case "from-left":
+        case 'from-left':
             return `
 M 1 1
 L ${1 - progress} 1
 L ${1 - progress} 0
 L 1 0
 Z`;
-        case "from-top-left":
+        case 'from-top-left':
             return `
 M 1 1
 L ${1 - 2 * progress} 1
 L 1 ${1 - 2 * progress}
 Z`;
-        case "from-top":
+        case 'from-top':
             return `
 M 1 1
 L 0 1
 L 0 ${1 - progress}
 L 1 ${1 - progress}
 Z`;
-        case "from-top-right":
+        case 'from-top-right':
             return `
 M 0 1
 L ${progress * 2} 1
 L 0 ${1 - progress * 2}
 Z`;
-        case "from-right":
+        case 'from-right':
             return `
 M 0 0
 L ${progress} 0
 L ${progress} 1
 L 0 1
 Z`;
-        case "from-bottom-right":
+        case 'from-bottom-right':
             return `
 M 0 0
 L ${progress * 2} 0
 L 0 ${progress * 2}
 Z`;
-        case "from-bottom":
+        case 'from-bottom':
             return `
 M 1 0
 L 0 0
 L 0 ${progress}
 L 1 ${progress}
 Z`;
-        case "from-bottom-left":
+        case 'from-bottom-left':
             return `
 M 1 0
 L ${1 - progress * 2} 0
@@ -122,28 +122,28 @@ Z`;
             throw new Error(`Unknown direction ${JSON.stringify(direction)}`);
     }
 };
-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)
         : makePathOut(progressInDirection, direction);
     const style = react.useMemo(() => {
         return {
-            width: "100%",
-            height: "100%",
-            justifyContent: "center",
-            alignItems: "center",
+            width: '100%',
+            height: '100%',
+            justifyContent: 'center',
+            alignItems: 'center',
             clipPath: `url(#${clipId})`,
         };
     }, [clipId]);
     const svgStyle = react.useMemo(() => {
         return {
-            width: "100%",
-            height: "100%",
-            pointerEvents: "none",
+            width: '100%',
+            height: '100%',
+            pointerEvents: 'none',
         };
     }, []);
     return (jsxRuntime.jsxs(remotion.AbsoluteFill, { children: [jsxRuntime.jsx(remotion.AbsoluteFill, { style: style, children: children }), jsxRuntime.jsx(remotion.AbsoluteFill, { children: jsxRuntime.jsx("svg", { viewBox: "0 0 1 1", style: svgStyle, children: jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("clipPath", { id: clipId, clipPathUnits: "objectBoundingBox", children: jsxRuntime.jsx("path", { d: path, fill: "black" }) }) }) }) })] }));

package/dist/flatten-children.d.ts

@@ -1,2 +1,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)[];

package/dist/flatten-children.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React from 'react';
 export const flattenChildren = (children) => {
     const childrenArray = React.Children.toArray(children);
     return childrenArray.reduce((flatChildren, child) => {

package/dist/index.d.ts

@@ -1,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';

package/dist/index.js

@@ -1,5 +1,5 @@
 // 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';

package/dist/presentations/fade.d.ts

@@ -1,4 +1,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 {};

package/dist/presentations/fade.js

@@ -1,10 +1,10 @@
 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,
         };
     }, [presentationDirection, presentationProgress]);
     return (_jsx(AbsoluteFill, { children: _jsx(AbsoluteFill, { style: style, children: children }) }));

package/dist/presentations/flip.d.ts

@@ -1,8 +1,7 @@
 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>;

package/dist/presentations/slide.d.ts

@@ -1,7 +1,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 {};

package/dist/presentations/slide.js

@@ -1,23 +1,23 @@
 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 {
                         transform: `translateY(-${presentationProgress * 100}%)`,
                     };
@@ -26,19 +26,19 @@ const SlidePresentation = ({ children, presentationProgress, presentationDirecti
             }
         }
         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 {
                     transform: `translateY(${100 - presentationProgress * 100}%)`,
                 };
@@ -48,10 +48,10 @@ const SlidePresentation = ({ children, presentationProgress, presentationDirecti
     }, [presentationDirection, presentationProgress, direction]);
     const style = useMemo(() => {
         return {
-            width: "100%",
-            height: "100%",
-            justifyContent: "center",
-            alignItems: "center",
+            width: '100%',
+            height: '100%',
+            justifyContent: 'center',
+            alignItems: 'center',
             ...directionStyle,
         };
     }, [directionStyle]);

package/dist/presentations/wipe.d.ts

@@ -1,7 +1,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 {};

package/dist/presentations/wipe.js

@@ -1,55 +1,55 @@
 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 `
 M 0 0
 L ${progress} 0
 L ${progress} 1
 L 0 1
 Z`;
-        case "from-top-left":
+        case 'from-top-left':
             return `
 M 0 0
 L ${progress * 2} 0
 L 0 ${progress * 2}
 Z`;
-        case "from-top":
+        case 'from-top':
             return `
 M 0 0
 L 1 0
 L 1 ${progress}
 L 0 ${progress}
 Z`;
-        case "from-top-right":
+        case 'from-top-right':
             return `
 M 1 0
 L ${1 - progress * 2} 0
 L 1 ${progress * 2}
 Z`;
-        case "from-right":
+        case 'from-right':
             return `
 M 1 0
 L 1 1
 L ${1 - progress} 1
 L ${1 - progress} 0
 Z`;
-        case "from-bottom-right":
+        case 'from-bottom-right':
             return `
 M 1 1
 L ${1 - progress * 2} 1
 L 1 ${1 - progress * 2}
 Z`;
-        case "from-bottom":
+        case 'from-bottom':
             return `
 M 0 1
 L 1 1
 L 1 ${1 - progress}
 L 0 ${1 - progress}
 Z`;
-        case "from-bottom-left":
+        case 'from-bottom-left':
             return `
 M 0 1
 L 0 ${1 - progress * 2}
@@ -61,53 +61,53 @@ Z`;
 };
 const makePathOut = (progress, direction) => {
     switch (direction) {
-        case "from-left":
+        case 'from-left':
             return `
 M 1 1
 L ${1 - progress} 1
 L ${1 - progress} 0
 L 1 0
 Z`;
-        case "from-top-left":
+        case 'from-top-left':
             return `
 M 1 1
 L ${1 - 2 * progress} 1
 L 1 ${1 - 2 * progress}
 Z`;
-        case "from-top":
+        case 'from-top':
             return `
 M 1 1
 L 0 1
 L 0 ${1 - progress}
 L 1 ${1 - progress}
 Z`;
-        case "from-top-right":
+        case 'from-top-right':
             return `
 M 0 1
 L ${progress * 2} 1
 L 0 ${1 - progress * 2}
 Z`;
-        case "from-right":
+        case 'from-right':
             return `
 M 0 0
 L ${progress} 0
 L ${progress} 1
 L 0 1
 Z`;
-        case "from-bottom-right":
+        case 'from-bottom-right':
             return `
 M 0 0
 L ${progress * 2} 0
 L 0 ${progress * 2}
 Z`;
-        case "from-bottom":
+        case 'from-bottom':
             return `
 M 1 0
 L 0 0
 L 0 ${progress}
 L 1 ${progress}
 Z`;
-        case "from-bottom-left":
+        case 'from-bottom-left':
             return `
 M 1 0
 L ${1 - progress * 2} 0
@@ -117,28 +117,28 @@ Z`;
             throw new Error(`Unknown direction ${JSON.stringify(direction)}`);
     }
 };
-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)
         : makePathOut(progressInDirection, direction);
     const style = useMemo(() => {
         return {
-            width: "100%",
-            height: "100%",
-            justifyContent: "center",
-            alignItems: "center",
+            width: '100%',
+            height: '100%',
+            justifyContent: 'center',
+            alignItems: 'center',
             clipPath: `url(#${clipId})`,
         };
     }, [clipId]);
     const svgStyle = useMemo(() => {
         return {
-            width: "100%",
-            height: "100%",
-            pointerEvents: "none",
+            width: '100%',
+            height: '100%',
+            pointerEvents: 'none',
         };
     }, []);
     return (_jsxs(AbsoluteFill, { children: [_jsx(AbsoluteFill, { style: style, children: children }), _jsx(AbsoluteFill, { children: _jsx("svg", { viewBox: "0 0 1 1", style: svgStyle, children: _jsx("defs", { children: _jsx("clipPath", { id: clipId, clipPathUnits: "objectBoundingBox", children: _jsx("path", { d: path, fill: "black" }) }) }) }) })] }));

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

@@ -1,5 +1,5 @@
-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?: {
     config?: Partial<SpringConfig>;
     durationInFrames?: number;

package/dist/timings/spring-timing.js

@@ -1,7 +1,7 @@
-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');
     }
     return spring(args);
 };

package/dist/types.d.ts

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

package/dist/validate.d.ts

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

package/dist/validate.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remotion/transitions",
-  "version": "4.0.56",
+  "version": "4.0.58",
   "description": "Transition presets for Remotion",
   "sideEffects": false,
   "main": "dist/cjs/index.js",
@@ -16,23 +16,23 @@
     "url": "https://github.com/remotion-dev/remotion/issues"
   },
   "dependencies": {
-    "remotion": "4.0.56"
+    "remotion": "4.0.58"
   },
   "devDependencies": {
     "@jonny/eslint-config": "3.0.276",
     "eslint": "8.42.0",
     "prettier": "3.0.2",
     "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",
     "@types/react": "18.0.26",
     "@types/react-dom": "18.0.11",
     "@vitejs/plugin-react": "^2.0.0",
     "rollup": "^2.70.1",
     "@rollup/plugin-typescript": "^8.2.0",
-    "remotion": "4.0.56",
-    "@remotion/test-utils": "4.0.56"
+    "remotion": "4.0.58",
+    "@remotion/test-utils": "4.0.58"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
@@ -96,6 +96,7 @@
   },
   "scripts": {
     "lint": "eslint src --ext ts,tsx",
+    "formatting": "prettier src --check",
     "watch": "tsc -w",
     "build": "rollup --config rollup.config.js && tsc -d"
   }