@remotion/transitions 4.0.143 → 4.0.145

package/LICENSE.md

@@ -1,5 +1,9 @@
 # Remotion License
 
+In Remotion 5.0, the license will slightly change. [View the changes here](https://github.com/remotion-dev/remotion/pull/3750).
+
+---
+
 Depending on the type of your legal entity, you are granted permission to use Remotion for your project. Individuals and small companies are allowed to use Remotion to create videos for free (even commercial), while a company license is required for for-profit organizations of a certain size. This two-tier system was designed to ensure funding for this project while still allowing the source code to be available and the program to be free for most. Read below for the exact terms of use.
 
 - [Free license](#free-license)

package/dist/TransitionSeries.d.ts

@@ -1,7 +1,9 @@
 import type { FC, PropsWithChildren } from 'react';
-import type { LayoutAndStyle, SequencePropsWithoutDuration } from 'remotion';
+import type { AbsoluteFillLayout, LayoutAndStyle, SequencePropsWithoutDuration } from 'remotion';
+import { NoReactInternals } from 'remotion/no-react';
 import type { TransitionSeriesTransitionProps } from './types.js';
 declare const TransitionSeriesTransition: <PresentationProps extends Record<string, unknown>>(_props: TransitionSeriesTransitionProps<PresentationProps>) => null;
+type LayoutBasedProps = true extends typeof NoReactInternals.ENABLE_V5_BREAKING_CHANGES ? AbsoluteFillLayout : LayoutAndStyle;
 type SeriesSequenceProps = PropsWithChildren<{
     readonly durationInFrames: number;
     readonly offset?: number;
@@ -10,8 +12,14 @@ type SeriesSequenceProps = PropsWithChildren<{
      * @deprecated For internal use only
      */
     readonly stack?: string;
-} & LayoutAndStyle & Pick<SequencePropsWithoutDuration, 'name'>>;
+} & LayoutBasedProps & Pick<SequencePropsWithoutDuration, 'name'>>;
 declare const SeriesSequence: ({ children }: SeriesSequenceProps) => import("react/jsx-runtime.js").JSX.Element;
+/**
+ * @description A React component designed to manage a series of transitions and sequences where each transition may have specific timing and presentation components. It extends the capabilities of `<Sequence>` and is specifically structured to handle transitions that involve entering and exiting sequences.
+ * @see [Documentation](https://remotion.dev/docs/transitions/transitionseries)
+ * @param {SequencePropsWithoutDuration} props The properties for setting the initial rendering behavior like from, name, etc. It additionally accepts children that are specifically `<TransitionSeries.Sequence>` or `<TransitionSeries.Transition>`.
+ * @returns React component that renders the transitions and sequences.
+ */
 declare const TransitionSeries: FC<SequencePropsWithoutDuration> & {
     Sequence: typeof SeriesSequence;
     Transition: typeof TransitionSeriesTransition;

package/dist/TransitionSeries.js

@@ -4,6 +4,7 @@ exports.TransitionSeries = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const no_react_1 = require("remotion/no-react");
 const flatten_children_js_1 = require("./flatten-children.js");
 const slide_js_1 = require("./presentations/slide.js");
 const validate_js_1 = require("./validate.js");
@@ -140,9 +141,20 @@ const TransitionSeriesChildren = ({ children, }) => {
     // eslint-disable-next-line react/jsx-no-useless-fragment
     return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: childrenValue });
 };
-const TransitionSeries = ({ children, name, ...otherProps }) => {
+/**
+ * @description A React component designed to manage a series of transitions and sequences where each transition may have specific timing and presentation components. It extends the capabilities of `<Sequence>` and is specifically structured to handle transitions that involve entering and exiting sequences.
+ * @see [Documentation](https://remotion.dev/docs/transitions/transitionseries)
+ * @param {SequencePropsWithoutDuration} props The properties for setting the initial rendering behavior like from, name, etc. It additionally accepts children that are specifically `<TransitionSeries.Sequence>` or `<TransitionSeries.Transition>`.
+ * @returns React component that renders the transitions and sequences.
+ */
+const TransitionSeries = ({ children, name, layout: passedLayout, ...otherProps }) => {
     const displayName = name !== null && name !== void 0 ? name : '<TransitionSeries>';
-    return ((0, jsx_runtime_1.jsx)(remotion_1.Sequence, { name: displayName, ...otherProps, children: (0, jsx_runtime_1.jsx)(TransitionSeriesChildren, { children: children }) }));
+    const layout = passedLayout !== null && passedLayout !== void 0 ? passedLayout : 'absolute-fill';
+    if (no_react_1.NoReactInternals.ENABLE_V5_BREAKING_CHANGES &&
+        layout !== 'absolute-fill') {
+        throw new TypeError(`The "layout" prop of <TransitionSeries /> is not supported anymore in v5. TransitionSeries' must be absolutely positioned.`);
+    }
+    return ((0, jsx_runtime_1.jsx)(remotion_1.Sequence, { name: displayName, layout: layout, ...otherProps, children: (0, jsx_runtime_1.jsx)(TransitionSeriesChildren, { children: children }) }));
 };
 exports.TransitionSeries = TransitionSeries;
 TransitionSeries.Sequence = SeriesSequence;

package/dist/esm/index.mjs

@@ -13,6 +13,7 @@ var SlidePresentation = ({
 }) => {
   const directionStyle = useMemo(() => {
     const presentationProgressWithEpsilonCorrection = presentationProgress === 1 ? presentationProgress * 100 : presentationProgress * 100 - epsilon;
+    console.log(presentationProgressWithEpsilonCorrection);
     if (presentationDirection === "exiting") {
       switch (direction) {
         case "from-left":
@@ -21,7 +22,7 @@ var SlidePresentation = ({
           };
         case "from-right":
           return {
-            transform: `translateX(-${presentationProgress * 100}%)`
+            transform: `translateX(${-presentationProgress * 100}%)`
           };
         case "from-top":
           return {
@@ -29,7 +30,7 @@ var SlidePresentation = ({
           };
         case "from-bottom":
           return {
-            transform: `translateY(-${presentationProgress * 100}%)`
+            transform: `translateY(${-presentationProgress * 100}%)`
           };
         default:
           throw new Error(`Invalid direction: ${direction}`);
@@ -97,12 +98,6 @@ var linearTiming = (options) => {
 
 // src/timings/spring-timing.ts
 import {measureSpring, spring} from "remotion";
-var springWithInvalidArgumentRejection = (args) => {
-  if (args.to || args.from) {
-    throw new Error("to / from values are not supported by springWithRoundUpIfThreshold");
-  }
-  return spring(args);
-};
 var springTiming = (options = {}) => {
   return {
     getDurationInFrames: ({ fps }) => {
@@ -116,12 +111,17 @@ var springTiming = (options = {}) => {
       });
     },
     getProgress: ({ fps, frame }) => {
-      return springWithInvalidArgumentRejection({
+      const to = options.reverse ? 0 : 1;
+      const from = options.reverse ? 1 : 0;
+      return spring({
         fps,
         frame,
+        to,
+        from,
         config: options.config,
         durationInFrames: options.durationInFrames,
-        durationRestThreshold: options.durationRestThreshold
+        durationRestThreshold: options.durationRestThreshold,
+        reverse: options.reverse
       });
     }
   };
@@ -130,6 +130,7 @@ var springTiming = (options = {}) => {
 // src/TransitionSeries.tsx
 import {Children, useMemo as useMemo2} from "react";
 import {Internals, Sequence, useCurrentFrame, useVideoConfig} from "remotion";
+import {NoReactInternals as NoReactInternals2} from "remotion/no-react";
 
 // src/flatten-children.ts
 import React2 from "react";
@@ -313,10 +314,15 @@ var TransitionSeriesChildren = ({
     children: childrenValue
   }, undefined, false, undefined, this);
 };
-var TransitionSeries = ({ children, name, ...otherProps }) => {
+var TransitionSeries = ({ children, name, layout: passedLayout, ...otherProps }) => {
   const displayName = name ?? "<TransitionSeries>";
+  const layout = passedLayout ?? "absolute-fill";
+  if (NoReactInternals2.ENABLE_V5_BREAKING_CHANGES && layout !== "absolute-fill") {
+    throw new TypeError(`The "layout" prop of <TransitionSeries /> is not supported anymore in v5. TransitionSeries' must be absolutely positioned.`);
+  }
   return jsx2(Sequence, {
     name: displayName,
+    layout,
     ...otherProps,
     children: jsx2(TransitionSeriesChildren, {
       children

package/dist/esm/slide.mjs

@@ -13,6 +13,7 @@ var SlidePresentation = ({
 }) => {
   const directionStyle = useMemo(() => {
     const presentationProgressWithEpsilonCorrection = presentationProgress === 1 ? presentationProgress * 100 : presentationProgress * 100 - epsilon;
+    console.log(presentationProgressWithEpsilonCorrection);
     if (presentationDirection === "exiting") {
       switch (direction) {
         case "from-left":
@@ -21,7 +22,7 @@ var SlidePresentation = ({
           };
         case "from-right":
           return {
-            transform: `translateX(-${presentationProgress * 100}%)`
+            transform: `translateX(${-presentationProgress * 100}%)`
           };
         case "from-top":
           return {
@@ -29,7 +30,7 @@ var SlidePresentation = ({
           };
         case "from-bottom":
           return {
-            transform: `translateY(-${presentationProgress * 100}%)`
+            transform: `translateY(${-presentationProgress * 100}%)`
           };
         default:
           throw new Error(`Invalid direction: ${direction}`);

package/dist/presentations/clock-wipe.d.ts

@@ -8,4 +8,10 @@ export type ClockWipeProps = {
     innerEnterStyle?: React.CSSProperties;
     innerExitStyle?: React.CSSProperties;
 };
+/**
+ * Creates a clock wipe transition. This transition effect uses a circular wipe to reveal the underlying scene as the current scene exits.
+ * @see [Documentation](https://remotion.dev/docs/transitions/presentations/clock-wipe)
+ * @param {ClockWipeProps} props - The properties for the clock wipe effect, including dimensions and optional styles for entering and exiting states.
+ * @returns {TransitionPresentation<ClockWipeProps>} An object containing the ClockWipe component and its props to be used in transition presentations.
+ */
 export declare const clockWipe: (props: ClockWipeProps) => TransitionPresentation<ClockWipeProps>;

package/dist/presentations/clock-wipe.js

@@ -40,6 +40,12 @@ const ClockWipePresentation = ({ children, presentationDirection, presentationPr
     ]);
     return ((0, jsx_runtime_1.jsxs)(remotion_1.AbsoluteFill, { style: outerStyle, children: [(0, jsx_runtime_1.jsx)(remotion_1.AbsoluteFill, { style: style, children: children }), presentationDirection === 'exiting' ? null : ((0, jsx_runtime_1.jsx)(remotion_1.AbsoluteFill, { children: (0, jsx_runtime_1.jsx)("svg", { children: (0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsx)("clipPath", { id: clipId, children: (0, jsx_runtime_1.jsx)("path", { d: translatedPath, fill: "black" }) }) }) }) }))] }));
 };
+/**
+ * Creates a clock wipe transition. This transition effect uses a circular wipe to reveal the underlying scene as the current scene exits.
+ * @see [Documentation](https://remotion.dev/docs/transitions/presentations/clock-wipe)
+ * @param {ClockWipeProps} props - The properties for the clock wipe effect, including dimensions and optional styles for entering and exiting states.
+ * @returns {TransitionPresentation<ClockWipeProps>} An object containing the ClockWipe component and its props to be used in transition presentations.
+ */
 const clockWipe = (props) => {
     return { component: ClockWipePresentation, props: props !== null && props !== void 0 ? props : {} };
 };

package/dist/presentations/fade.d.ts

@@ -4,4 +4,10 @@ export type FadeProps = {
     enterStyle?: React.CSSProperties;
     exitStyle?: React.CSSProperties;
 };
+/**
+ * Provides a simple fade transition component for sliding elements in and out.
+ * @see [Documentation](https://remotion.dev/docs/transitions/presentations/fade)
+ * @param {FadeProps} [props] Optional properties to define 'enterStyle' and 'exitStyle'.
+ * @returns {TransitionPresentation<FadeProps>} The transition presentation component setup.
+ */
 export declare const fade: (props?: FadeProps) => TransitionPresentation<FadeProps>;

package/dist/presentations/fade.js

@@ -22,6 +22,12 @@ const FadePresentation = ({ children, presentationDirection, presentationProgres
     ]);
     return (0, jsx_runtime_1.jsx)(remotion_1.AbsoluteFill, { style: style, children: children });
 };
+/**
+ * Provides a simple fade transition component for sliding elements in and out.
+ * @see [Documentation](https://remotion.dev/docs/transitions/presentations/fade)
+ * @param {FadeProps} [props] Optional properties to define 'enterStyle' and 'exitStyle'.
+ * @returns {TransitionPresentation<FadeProps>} The transition presentation component setup.
+ */
 const fade = (props) => {
     return {
         component: FadePresentation,

package/dist/presentations/flip.d.ts

@@ -9,4 +9,10 @@ export type FlipProps = {
     innerEnterStyle?: React.CSSProperties;
     innerExitStyle?: React.CSSProperties;
 };
+/**
+ * @description A presentation where the exiting slide flips by 180 degrees, revealing the next slide on the back side. This function configures a 3D flip effect for transitions between components in presentations.
+ * @see [Documentation](https://remotion.dev/docs/transitions/presentations/flip)
+ * @param {FlipProps} [props] Optional properties to configure the flip effect, including direction, perspective, and styles.
+ * @returns {TransitionPresentation<FlipProps>} An object with the Flip component and configuration properties.
+ */
 export declare const flip: (props?: FlipProps) => TransitionPresentation<FlipProps>;

package/dist/presentations/flip.js

@@ -43,6 +43,12 @@ const Flip = ({ children, presentationDirection, presentationProgress, passedPro
     }, [outerEnterStyle, outerExitStyle, perspective, presentationDirection]);
     return ((0, jsx_runtime_1.jsx)(remotion_1.AbsoluteFill, { style: outer, children: (0, jsx_runtime_1.jsx)(remotion_1.AbsoluteFill, { style: style, children: children }) }));
 };
+/**
+ * @description A presentation where the exiting slide flips by 180 degrees, revealing the next slide on the back side. This function configures a 3D flip effect for transitions between components in presentations.
+ * @see [Documentation](https://remotion.dev/docs/transitions/presentations/flip)
+ * @param {FlipProps} [props] Optional properties to configure the flip effect, including direction, perspective, and styles.
+ * @returns {TransitionPresentation<FlipProps>} An object with the Flip component and configuration properties.
+ */
 const flip = (props) => {
     return { component: Flip, props: props !== null && props !== void 0 ? props : {} };
 };

package/dist/presentations/slide.d.ts

@@ -6,4 +6,10 @@ export type SlideProps = {
     exitStyle?: React.CSSProperties;
     enterStyle?: React.CSSProperties;
 };
+/**
+ * Implements a sliding transition for presentation components where the entering slide pushes out the exiting slide based on the specified direction.
+ * @see [Documentation](https://remotion.dev/docs/transitions/presentations/slide)
+ * @param {SlideProps} [props] Configuration options for the slide transition: includes direction, enterStyle, and exitStyle.
+ * @returns {TransitionPresentation<SlideProps>} Returns a transition configuration object including the component and its props.
+ */
 export declare const slide: (props?: SlideProps) => TransitionPresentation<SlideProps>;

package/dist/presentations/slide.js

@@ -12,6 +12,7 @@ const SlidePresentation = ({ children, presentationProgress, presentationDirecti
         const presentationProgressWithEpsilonCorrection = presentationProgress === 1
             ? presentationProgress * 100
             : presentationProgress * 100 - epsilon;
+        console.log(presentationProgressWithEpsilonCorrection);
         if (presentationDirection === 'exiting') {
             switch (direction) {
                 case 'from-left':
@@ -20,7 +21,7 @@ const SlidePresentation = ({ children, presentationProgress, presentationDirecti
                     };
                 case 'from-right':
                     return {
-                        transform: `translateX(-${presentationProgress * 100}%)`,
+                        transform: `translateX(${-presentationProgress * 100}%)`,
                     };
                 case 'from-top':
                     return {
@@ -28,7 +29,7 @@ const SlidePresentation = ({ children, presentationProgress, presentationDirecti
                     };
                 case 'from-bottom':
                     return {
-                        transform: `translateY(-${presentationProgress * 100}%)`,
+                        transform: `translateY(${-presentationProgress * 100}%)`,
                     };
                 default:
                     throw new Error(`Invalid direction: ${direction}`);
@@ -67,6 +68,12 @@ const SlidePresentation = ({ children, presentationProgress, presentationDirecti
     }, [directionStyle, enterStyle, exitStyle, presentationDirection]);
     return (0, jsx_runtime_1.jsx)(remotion_1.AbsoluteFill, { style: style, children: children });
 };
+/**
+ * Implements a sliding transition for presentation components where the entering slide pushes out the exiting slide based on the specified direction.
+ * @see [Documentation](https://remotion.dev/docs/transitions/presentations/slide)
+ * @param {SlideProps} [props] Configuration options for the slide transition: includes direction, enterStyle, and exitStyle.
+ * @returns {TransitionPresentation<SlideProps>} Returns a transition configuration object including the component and its props.
+ */
 const slide = (props) => {
     return {
         component: SlidePresentation,

package/dist/presentations/wipe.d.ts

@@ -8,4 +8,10 @@ export type WipeProps = {
     innerEnterStyle?: React.CSSProperties;
     innerExitStyle?: React.CSSProperties;
 };
+/**
+ * @description A presentation where the entering slide slides over the exiting slide.
+ * @see [Documentation](https://remotion.dev/docs/transitions/presentations/wipe)
+ * @param {WipeProps} [props] - Optional properties to configure the transition.
+ * @returns {TransitionPresentation<WipeProps>} Transition presentation object setup for wipe effect.
+ */
 export declare const wipe: (props?: WipeProps) => TransitionPresentation<WipeProps>;

package/dist/presentations/wipe.js

@@ -154,6 +154,12 @@ const WipePresentation = ({ children, presentationProgress, presentationDirectio
     }, []);
     return ((0, jsx_runtime_1.jsxs)(remotion_1.AbsoluteFill, { style: outerStyle, children: [(0, jsx_runtime_1.jsx)(remotion_1.AbsoluteFill, { style: style, children: children }), (0, jsx_runtime_1.jsx)(remotion_1.AbsoluteFill, { children: (0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 1 1", style: svgStyle, children: (0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsx)("clipPath", { id: clipId, clipPathUnits: "objectBoundingBox", children: (0, jsx_runtime_1.jsx)("path", { d: path, fill: "black" }) }) }) }) })] }));
 };
+/**
+ * @description A presentation where the entering slide slides over the exiting slide.
+ * @see [Documentation](https://remotion.dev/docs/transitions/presentations/wipe)
+ * @param {WipeProps} [props] - Optional properties to configure the transition.
+ * @returns {TransitionPresentation<WipeProps>} Transition presentation object setup for wipe effect.
+ */
 const wipe = (props) => {
     return {
         component: WipePresentation,

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

@@ -1,4 +1,13 @@
 import type { TransitionTiming } from '../types.js';
+/**
+ * Creates a linear timing object for managing animations in frame units.
+ * @description Provides a mechanism to handle frame-based transitions linearly, optionally incorporating easing functions.
+ * @see [Documentation](https://remotion.dev/docs/transitions/timings/lineartiming)
+ * @param {Object} options Configuration options for the linear timing
+ * @param {number} options.durationInFrames Specifies the total duration of the transition in frames
+ * @param {((input: number) => number)=} options.easing Optional easing function to modify the interpolation of values
+ * @returns {TransitionTiming} An object representing the timing of the transition, including methods to get duration and progress
+ */
 export declare const linearTiming: (options: {
     durationInFrames: number;
     easing?: ((input: number) => number) | undefined;

package/dist/timings/linear-timing.js

@@ -2,6 +2,15 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.linearTiming = void 0;
 const remotion_1 = require("remotion");
+/**
+ * Creates a linear timing object for managing animations in frame units.
+ * @description Provides a mechanism to handle frame-based transitions linearly, optionally incorporating easing functions.
+ * @see [Documentation](https://remotion.dev/docs/transitions/timings/lineartiming)
+ * @param {Object} options Configuration options for the linear timing
+ * @param {number} options.durationInFrames Specifies the total duration of the transition in frames
+ * @param {((input: number) => number)=} options.easing Optional easing function to modify the interpolation of values
+ * @returns {TransitionTiming} An object representing the timing of the transition, including methods to get duration and progress
+ */
 const linearTiming = (options) => {
     return {
         getDurationInFrames: () => {

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

@@ -4,4 +4,5 @@ export declare const springTiming: (options?: {
     config?: Partial<SpringConfig>;
     durationInFrames?: number;
     durationRestThreshold?: number;
+    reverse?: boolean;
 }) => TransitionTiming;

package/dist/timings/spring-timing.js

@@ -2,12 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.springTiming = void 0;
 const remotion_1 = require("remotion");
-const springWithInvalidArgumentRejection = (args) => {
-    if (args.to || args.from) {
-        throw new Error('to / from values are not supported by springWithRoundUpIfThreshold');
-    }
-    return (0, remotion_1.spring)(args);
-};
 const springTiming = (options = {}) => {
     return {
         getDurationInFrames: ({ fps }) => {
@@ -21,12 +15,17 @@ const springTiming = (options = {}) => {
             });
         },
         getProgress: ({ fps, frame }) => {
-            return springWithInvalidArgumentRejection({
+            const to = options.reverse ? 0 : 1;
+            const from = options.reverse ? 1 : 0;
+            return (0, remotion_1.spring)({
                 fps,
                 frame,
+                to,
+                from,
                 config: options.config,
                 durationInFrames: options.durationInFrames,
                 durationRestThreshold: options.durationRestThreshold,
+                reverse: options.reverse,
             });
         },
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remotion/transitions",
-  "version": "4.0.143",
+  "version": "4.0.145",
   "description": "Transition presets for Remotion",
   "sideEffects": false,
   "main": "dist/esm/index.mjs",
@@ -16,9 +16,9 @@
     "url": "https://github.com/remotion-dev/remotion/issues"
   },
   "dependencies": {
-    "remotion": "4.0.143",
-    "@remotion/shapes": "4.0.143",
-    "@remotion/paths": "4.0.143"
+    "@remotion/shapes": "4.0.145",
+    "remotion": "4.0.145",
+    "@remotion/paths": "4.0.145"
   },
   "devDependencies": {
     "@jonny/eslint-config": "3.0.281",
@@ -32,8 +32,8 @@
     "@types/react-dom": "18.2.18",
     "@types/bun": "^1.0.12",
     "@vitejs/plugin-react": "^2.0.0",
-    "remotion": "4.0.143",
-    "@remotion/test-utils": "4.0.143"
+    "remotion": "4.0.145",
+    "@remotion/test-utils": "4.0.145"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
@@ -109,6 +109,6 @@
     "lint": "eslint src --ext ts,tsx",
     "formatting": "prettier src --check",
     "watch": "tsc -w",
-    "build": "tsc -d && bun build.ts"
+    "build": "tsc -d && bun bundle.ts"
   }
 }