@remotion/transitions - npm Package Compare versions

Comparing version 4.0.244 to 4.0.245

dist/presentations/clock-wipe.d.ts

@@ -11,8 +11,2 @@ import React from 'react';
 };
-/**
- * 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>;

dist/presentations/clock-wipe.js

@@ -43,7 +43,5 @@ "use strict";
 };
-/**
- * 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)
  */
@@ -50,0 +48,0 @@ const clockWipe = (props) => {

dist/presentations/fade.d.ts

@@ -7,8 +7,2 @@ import type { TransitionPresentation } from '../types.js';
 };
-/**
- * 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>;

dist/presentations/fade.js

@@ -30,7 +30,5 @@ "use strict";
 };
-/**
- * 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)
  */
@@ -37,0 +35,0 @@ const fade = (props) => {

dist/presentations/flip.d.ts

@@ -12,8 +12,2 @@ import React from 'react';
 };
-/**
- * @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>;

dist/presentations/flip.js

@@ -46,7 +46,5 @@ "use strict";
 };
-/**
- * @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)
  */
@@ -53,0 +51,0 @@ const flip = (props) => {

dist/presentations/none.d.ts

@@ -7,8 +7,2 @@ import React from 'react';
 };
-/**
- * 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>;

dist/presentations/none.js

@@ -17,7 +17,5 @@ "use strict";
 };
-/**
- * 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)
  */
@@ -24,0 +22,0 @@ const none = (props) => {

dist/presentations/slide.d.ts

@@ -9,8 +9,2 @@ import React from 'react';
 };
-/**
- * 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>;

dist/presentations/slide.js

@@ -70,7 +70,5 @@ "use strict";
 };
-/**
- * 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)
  */
@@ -77,0 +75,0 @@ const slide = (props) => {

dist/presentations/wipe.d.ts

@@ -11,8 +11,2 @@ import React from 'react';
 };
-/**
- * @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>;

dist/presentations/wipe.js

@@ -157,7 +157,5 @@ "use strict";
 };
-/**
+/*
  * @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)
  */
@@ -164,0 +162,0 @@ const wipe = (props) => {

dist/timings/linear-timing.d.ts

 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: {
@@ -12,0 +3,0 @@ durationInFrames: number;

dist/timings/linear-timing.js

@@ -5,10 +5,5 @@ "use strict";
 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)
  */
@@ -15,0 +10,0 @@ const linearTiming = (options) => {

dist/TransitionSeries.d.ts

@@ -17,12 +17,6 @@ import type { FC, PropsWithChildren } from 'react';
 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 {};

dist/TransitionSeries.js

@@ -153,7 +153,5 @@ "use strict";
 };
-/**
- * @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)
  */
@@ -170,5 +168,5 @@ const TransitionSeries = ({ children, name, layout: passedLayout, ...otherProps }) => {
 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);

dist/use-transition-progress.d.ts

@@ -6,5 +6,2 @@ export type TransitionState = {
 };
-/**
- * Gets the progress and direction of a transition with a context() presentation.
- */
 export declare const useTransitionProgress: () => TransitionState;

dist/use-transition-progress.js

@@ -9,4 +9,5 @@ "use strict";
 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)
  */
@@ -13,0 +14,0 @@ const useTransitionProgress = () => {

LICENSE.md

@@ -14,3 +14,3 @@ # Remotion License
 
-Copyright © 2024 [Remotion](https://www.remotion.dev)
+Copyright © 2025 [Remotion](https://www.remotion.dev)
 
@@ -17,0 +17,0 @@ ### Eligibility

package.json

@@ -6,3 +6,3 @@ {
   "name": "@remotion/transitions",
-  "version": "4.0.244",
+  "version": "4.0.245",
   "description": "Library for creating transitions in Remotion",
@@ -20,5 +20,5 @@ "sideEffects": false,
   "dependencies": {
-    "@remotion/shapes": "4.0.244",
-    "remotion": "4.0.244",
-    "@remotion/paths": "4.0.244"
+    "remotion": "4.0.245",
+    "@remotion/shapes": "4.0.245",
+    "@remotion/paths": "4.0.245"
   },
@@ -30,5 +30,5 @@ "devDependencies": {
     "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.245",
+    "@remotion/eslint-config-internal": "4.0.245",
+    "remotion": "4.0.245"
   },
@@ -35,0 +35,0 @@ "peerDependencies": {

No alert changes

Worsened metrics

Total package byte prevSize

105045

-5.73%

Lines of code

2418

-2.97%

Dependency changes

• + Added

  @remotion/paths@4.0.245
  (transitive)

• + Added

  @remotion/shapes@4.0.245
  (transitive)

• + Added

  remotion@4.0.245
  (transitive)

• - Removed

  @remotion/paths@4.0.244
  (transitive)

• - Removed

  @remotion/shapes@4.0.244
  (transitive)

• - Removed

  remotion@4.0.244
  (transitive)

• Updated

  @remotion/paths@4.0.245

• Updated

  @remotion/shapes@4.0.245

• Updated

  remotion@4.0.245