@remotion/transitions 4.0.244 → 4.0.246

package/LICENSE.md

@@ -11,7 +11,7 @@ Depending on the type of your legal entity, you are granted permission to use Re
 
 ## Free license
 
-Copyright © 2024 [Remotion](https://www.remotion.dev)
+Copyright © 2025 [Remotion](https://www.remotion.dev)
 
 ### Eligibility
 

package/dist/TransitionSeries.d.ts

@@ -14,14 +14,8 @@ type SeriesSequenceProps = PropsWithChildren<{
     readonly stack?: string;
 } & 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> & {
+export declare const TransitionSeries: FC<SequencePropsWithoutDuration> & {
     Sequence: typeof SeriesSequence;
     Transition: typeof TransitionSeriesTransition;
 };
-export { TransitionSeries };
+export {};

package/dist/TransitionSeries.js

@@ -150,11 +150,9 @@ const TransitionSeriesChildren = ({ children, }) => {
     // eslint-disable-next-line react/jsx-no-useless-fragment
     return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: childrenValue });
 };
-/**
- * @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.
+/*
+ * @description Manages a series of transitions and sequences for advanced animation controls in Remotion projects, handling cases with varying timings and presentations.
+ * @see [Documentation](https://www.remotion.dev/docs/transitions/transitionseries)
  */
 const TransitionSeries = ({ children, name, layout: passedLayout, ...otherProps }) => {
     const displayName = name !== null && name !== void 0 ? name : '<TransitionSeries>';
@@ -166,7 +164,7 @@ const TransitionSeries = ({ children, name, layout: passedLayout, ...otherProps
     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;
-TransitionSeries.Transition = TransitionSeriesTransition;
-remotion_1.Internals.addSequenceStackTraces(TransitionSeries);
+exports.TransitionSeries.Sequence = SeriesSequence;
+exports.TransitionSeries.Transition = TransitionSeriesTransition;
+remotion_1.Internals.addSequenceStackTraces(exports.TransitionSeries);
 remotion_1.Internals.addSequenceStackTraces(SeriesSequence);

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

@@ -8,10 +8,4 @@ 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,11 +40,9 @@ 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.
+/*
+ * @description Creates a clock wipe transition that uses a circular wipe to reveal the underlying scene as the current scene exits.
+ * @see [Documentation](https://www.remotion.dev/docs/transitions/presentations/clock-wipe)
  */
 const clockWipe = (props) => {
     return { component: ClockWipePresentation, props: props !== null && props !== void 0 ? props : {} };

package/dist/presentations/fade.d.ts

@@ -4,10 +4,4 @@ export type FadeProps = {
     exitStyle?: React.CSSProperties;
     shouldFadeOutExitingScene?: boolean;
 };
-/**
- * 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

@@ -27,11 +27,9 @@ 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.
+/*
+ * @description Provides a simple fade transition component for sliding elements in and out.
+ * @see [Documentation](https://www.remotion.dev/docs/transitions/presentations/fade)
  */
 const fade = (props) => {
     return {

package/dist/presentations/flip.d.ts

@@ -9,10 +9,4 @@ 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,11 +43,9 @@ 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.
+/*
+ * @description A presentation where the exiting slide flips by 180 degrees, revealing the next slide on the back side.
+ * @see [Documentation](https://www.remotion.dev/docs/transitions/presentations/flip)
  */
 const flip = (props) => {
     return { component: Flip, props: props !== null && props !== void 0 ? props : {} };

package/dist/presentations/none.d.ts

@@ -4,10 +4,4 @@ export type NoneProps = {
     enterStyle?: React.CSSProperties;
     exitStyle?: React.CSSProperties;
 };
-/**
- * Wraps the transition in a context so that the progress can be read from the children using a hook.
- * @see [Documentation](https://remotion.dev/docs/transitions/presentations/context)
- * @param {NoneProps} [props] Optional properties to define 'enterStyle' and 'exitStyle'.
- * @returns {TransitionPresentation<NoneProps>} The transition presentation component setup.
- */
 export declare const none: (props?: NoneProps) => TransitionPresentation<NoneProps>;

package/dist/presentations/none.js

@@ -14,11 +14,9 @@ const NonePresentation = ({ children, presentationDirection, passedProps }) => {
     }, [passedProps.enterStyle, passedProps.exitStyle, presentationDirection]);
     return (0, jsx_runtime_1.jsx)(remotion_1.AbsoluteFill, { style: style, children: children });
 };
-/**
- * Wraps the transition in a context so that the progress can be read from the children using a hook.
- * @see [Documentation](https://remotion.dev/docs/transitions/presentations/context)
- * @param {NoneProps} [props] Optional properties to define 'enterStyle' and 'exitStyle'.
- * @returns {TransitionPresentation<NoneProps>} The transition presentation component setup.
+/*
+ * @description A presentation that has no visual effect on its own. Instead, you control the visual effect by using the useTransitionProgress() hook.
+ * @see [Documentation](https://www.remotion.dev/docs/transitions/presentations/none)
  */
 const none = (props) => {
     return {

package/dist/presentations/slide.d.ts

@@ -6,10 +6,4 @@ 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

@@ -67,11 +67,9 @@ 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.
+/*
+ * @description Implements a sliding transition for presentation components where the entering slide pushes the outgoing slide in a specified direction.
+ * @see [Documentation](https://www.remotion.dev/docs/transitions/presentations/slide)
  */
 const slide = (props) => {
     return {

package/dist/presentations/wipe.d.ts

@@ -8,10 +8,4 @@ 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,11 +154,9 @@ 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.
+ * @see [Documentation](https://www.remotion.dev/docs/transitions/presentations/wipe)
  */
 const wipe = (props) => {
     return {

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

@@ -1,13 +1,4 @@
 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} fieldsToFetch Configuration options for the linear timing
- * @param {number} fieldsToFetch.durationInFrames Specifies the total duration of the transition in frames
- * @param {((input: number) => number)=} fieldsToFetch.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,14 +2,9 @@
 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} fieldsToFetch Configuration options for the linear timing
- * @param {number} fieldsToFetch.durationInFrames Specifies the total duration of the transition in frames
- * @param {((input: number) => number)=} fieldsToFetch.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
+/*
+ * @description A timing function for `<TransitionSeries>` based on `interpolate()`.
+ * @see [Documentation](https://www.remotion.dev/docs/transitions/timings/lineartiming)
  */
 const linearTiming = (options) => {
     return {

package/dist/use-transition-progress.d.ts

@@ -3,7 +3,4 @@ export type TransitionState = {
     exiting: number;
     isInTransitionSeries: boolean;
 };
-/**
- * Gets the progress and direction of a transition with a context() presentation.
- */
 export declare const useTransitionProgress: () => TransitionState;

package/dist/use-transition-progress.js

@@ -6,8 +6,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useTransitionProgress = void 0;
 const react_1 = __importDefault(require("react"));
 const context_1 = require("./context");
-/**
- * Gets the progress and direction of a transition with a context() presentation.
+/*
+ * @description A hook that can be used inside a child of a <TransitionSeries.Sequence> to get the progress of the transition to directly manipulate the objects inside the scene.
+ * @see [Documentation](https://www.remotion.dev/docs/transitions/use-transition-progress)
  */
 const useTransitionProgress = () => {
     var _a, _b;

package/package.json

@@ -3,7 +3,7 @@
     "url": "https://github.com/remotion-dev/remotion/tree/main/packages/transitions"
   },
   "name": "@remotion/transitions",
-  "version": "4.0.244",
+  "version": "4.0.246",
   "description": "Library for creating transitions in Remotion",
   "sideEffects": false,
   "main": "dist/esm/index.mjs",
@@ -16,18 +16,18 @@
     "url": "https://github.com/remotion-dev/remotion/issues"
   },
   "dependencies": {
-    "@remotion/shapes": "4.0.244",
-    "remotion": "4.0.244",
-    "@remotion/paths": "4.0.244"
+    "remotion": "4.0.246",
+    "@remotion/paths": "4.0.246",
+    "@remotion/shapes": "4.0.246"
   },
   "devDependencies": {
     "@happy-dom/global-registrator": "14.5.1",
     "react": "19.0.0",
     "react-dom": "19.0.0",
     "eslint": "9.14.0",
-    "@remotion/eslint-config-internal": "4.0.244",
-    "@remotion/test-utils": "4.0.244",
-    "remotion": "4.0.244"
+    "@remotion/test-utils": "4.0.246",
+    "@remotion/eslint-config-internal": "4.0.246",
+    "remotion": "4.0.246"
   },
   "peerDependencies": {
     "react": ">=16.8.0",