@remotion/transitions 4.0.88 → 4.0.89

package/dist/esm/index.mjs

@@ -60,13 +60,19 @@ const flattenChildren = (children) => {
     }, []);
 };
 
+const epsilon = 0.01;
 const SlidePresentation = ({ children, presentationProgress, presentationDirection, passedProps: { direction = 'from-left', enterStyle, exitStyle }, }) => {
     const directionStyle = useMemo(() => {
+        // Overlay the two slides barely to avoid a white line between them
+        // Remove the correction once the presentation progress is 1
+        const presentationProgressWithEpsilonCorrection = presentationProgress === 1
+            ? presentationProgress * 100
+            : presentationProgress * 100 - epsilon;
         if (presentationDirection === 'exiting') {
             switch (direction) {
                 case 'from-left':
                     return {
-                        transform: `translateX(${presentationProgress * 100}%)`,
+                        transform: `translateX(${presentationProgressWithEpsilonCorrection}%)`,
                     };
                 case 'from-right':
                     return {
@@ -74,7 +80,7 @@ const SlidePresentation = ({ children, presentationProgress, presentationDirecti
                     };
                 case 'from-top':
                     return {
-                        transform: `translateY(${presentationProgress * 100}%)`,
+                        transform: `translateY(${presentationProgressWithEpsilonCorrection}%)`,
                     };
                 case 'from-bottom':
                     return {
@@ -91,7 +97,7 @@ const SlidePresentation = ({ children, presentationProgress, presentationDirecti
                 };
             case 'from-right':
                 return {
-                    transform: `translateX(${100 - presentationProgress * 100}%)`,
+                    transform: `translateX(${100 - presentationProgressWithEpsilonCorrection}%)`,
                 };
             case 'from-top':
                 return {
@@ -99,7 +105,7 @@ const SlidePresentation = ({ children, presentationProgress, presentationDirecti
                 };
             case 'from-bottom':
                 return {
-                    transform: `translateY(${100 - presentationProgress * 100}%)`,
+                    transform: `translateY(${100 - presentationProgressWithEpsilonCorrection}%)`,
                 };
             default:
                 throw new Error(`Invalid direction: ${direction}`);

package/dist/esm/slide.mjs

@@ -2,13 +2,19 @@ import { jsx } from 'react/jsx-runtime';
 import { useMemo } from 'react';
 import { AbsoluteFill } from 'remotion';
 
+const epsilon = 0.01;
 const SlidePresentation = ({ children, presentationProgress, presentationDirection, passedProps: { direction = 'from-left', enterStyle, exitStyle }, }) => {
     const directionStyle = useMemo(() => {
+        // Overlay the two slides barely to avoid a white line between them
+        // Remove the correction once the presentation progress is 1
+        const presentationProgressWithEpsilonCorrection = presentationProgress === 1
+            ? presentationProgress * 100
+            : presentationProgress * 100 - epsilon;
         if (presentationDirection === 'exiting') {
             switch (direction) {
                 case 'from-left':
                     return {
-                        transform: `translateX(${presentationProgress * 100}%)`,
+                        transform: `translateX(${presentationProgressWithEpsilonCorrection}%)`,
                     };
                 case 'from-right':
                     return {
@@ -16,7 +22,7 @@ const SlidePresentation = ({ children, presentationProgress, presentationDirecti
                     };
                 case 'from-top':
                     return {
-                        transform: `translateY(${presentationProgress * 100}%)`,
+                        transform: `translateY(${presentationProgressWithEpsilonCorrection}%)`,
                     };
                 case 'from-bottom':
                     return {
@@ -33,7 +39,7 @@ const SlidePresentation = ({ children, presentationProgress, presentationDirecti
                 };
             case 'from-right':
                 return {
-                    transform: `translateX(${100 - presentationProgress * 100}%)`,
+                    transform: `translateX(${100 - presentationProgressWithEpsilonCorrection}%)`,
                 };
             case 'from-top':
                 return {
@@ -41,7 +47,7 @@ const SlidePresentation = ({ children, presentationProgress, presentationDirecti
                 };
             case 'from-bottom':
                 return {
-                    transform: `translateY(${100 - presentationProgress * 100}%)`,
+                    transform: `translateY(${100 - presentationProgressWithEpsilonCorrection}%)`,
                 };
             default:
                 throw new Error(`Invalid direction: ${direction}`);

package/dist/presentations/slide.js

@@ -4,13 +4,19 @@ exports.slide = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const epsilon = 0.01;
 const SlidePresentation = ({ children, presentationProgress, presentationDirection, passedProps: { direction = 'from-left', enterStyle, exitStyle }, }) => {
     const directionStyle = (0, react_1.useMemo)(() => {
+        // Overlay the two slides barely to avoid a white line between them
+        // Remove the correction once the presentation progress is 1
+        const presentationProgressWithEpsilonCorrection = presentationProgress === 1
+            ? presentationProgress * 100
+            : presentationProgress * 100 - epsilon;
         if (presentationDirection === 'exiting') {
             switch (direction) {
                 case 'from-left':
                     return {
-                        transform: `translateX(${presentationProgress * 100}%)`,
+                        transform: `translateX(${presentationProgressWithEpsilonCorrection}%)`,
                     };
                 case 'from-right':
                     return {
@@ -18,7 +24,7 @@ const SlidePresentation = ({ children, presentationProgress, presentationDirecti
                     };
                 case 'from-top':
                     return {
-                        transform: `translateY(${presentationProgress * 100}%)`,
+                        transform: `translateY(${presentationProgressWithEpsilonCorrection}%)`,
                     };
                 case 'from-bottom':
                     return {
@@ -35,7 +41,7 @@ const SlidePresentation = ({ children, presentationProgress, presentationDirecti
                 };
             case 'from-right':
                 return {
-                    transform: `translateX(${100 - presentationProgress * 100}%)`,
+                    transform: `translateX(${100 - presentationProgressWithEpsilonCorrection}%)`,
                 };
             case 'from-top':
                 return {
@@ -43,7 +49,7 @@ const SlidePresentation = ({ children, presentationProgress, presentationDirecti
                 };
             case 'from-bottom':
                 return {
-                    transform: `translateY(${100 - presentationProgress * 100}%)`,
+                    transform: `translateY(${100 - presentationProgressWithEpsilonCorrection}%)`,
                 };
             default:
                 throw new Error(`Invalid direction: ${direction}`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remotion/transitions",
-  "version": "4.0.88",
+  "version": "4.0.89",
   "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/shapes": "4.0.88",
-    "remotion": "4.0.88",
-    "@remotion/paths": "4.0.88"
+    "remotion": "4.0.89",
+    "@remotion/shapes": "4.0.89",
+    "@remotion/paths": "4.0.89"
   },
   "devDependencies": {
     "@jonny/eslint-config": "3.0.276",
@@ -33,8 +33,8 @@
     "@vitejs/plugin-react": "^2.0.0",
     "rollup": "^2.70.1",
     "@rollup/plugin-typescript": "^8.2.0",
-    "remotion": "4.0.88",
-    "@remotion/test-utils": "4.0.88"
+    "remotion": "4.0.89",
+    "@remotion/test-utils": "4.0.89"
   },
   "peerDependencies": {
     "react": ">=16.8.0",

package/dist/esm/TransitionSeries.d.ts

@@ -1,19 +0,0 @@
-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?: string;
-    /**
-     * @deprecated For internal use only
-     */
-    stack?: string;
-} & LayoutAndStyle & Pick<SequencePropsWithoutDuration, 'name'>>;
-declare const SeriesSequence: ({ children }: SeriesSequenceProps) => JSX.Element;
-declare const TransitionSeries: FC<SequencePropsWithoutDuration> & {
-    Sequence: typeof SeriesSequence;
-    Transition: typeof TransitionSeriesTransition;
-};
-export { TransitionSeries };

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

@@ -1,2 +0,0 @@
-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/esm/index.d.ts

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

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

@@ -1,11 +0,0 @@
-import React from 'react';
-import type { TransitionPresentation } from '../types.js';
-export type ClockWipeProps = {
-    width: number;
-    height: number;
-    outerEnterStyle?: React.CSSProperties;
-    outerExitStyle?: React.CSSProperties;
-    innerEnterStyle?: React.CSSProperties;
-    innerExitStyle?: React.CSSProperties;
-};
-export declare const clockWipe: (props: ClockWipeProps) => TransitionPresentation<ClockWipeProps>;

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

@@ -1,7 +0,0 @@
-/// <reference types="react" />
-import type { TransitionPresentation } from '../types.js';
-export type FadeProps = {
-    enterStyle?: React.CSSProperties;
-    exitStyle?: React.CSSProperties;
-};
-export declare const fade: (props?: FadeProps) => TransitionPresentation<FadeProps>;

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

@@ -1,12 +0,0 @@
-import React from 'react';
-import type { TransitionPresentation } from '../types.js';
-export type FlipDirection = 'from-left' | 'from-right' | 'from-top' | 'from-bottom';
-export type FlipProps = {
-    direction?: FlipDirection;
-    perspective?: number;
-    outerEnterStyle?: React.CSSProperties;
-    outerExitStyle?: React.CSSProperties;
-    innerEnterStyle?: React.CSSProperties;
-    innerExitStyle?: React.CSSProperties;
-};
-export declare const flip: (props?: FlipProps) => TransitionPresentation<FlipProps>;

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

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

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

@@ -1,11 +0,0 @@
-import React from 'react';
-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;
-    outerEnterStyle?: React.CSSProperties;
-    outerExitStyle?: React.CSSProperties;
-    innerEnterStyle?: React.CSSProperties;
-    innerExitStyle?: React.CSSProperties;
-};
-export declare const wipe: (props?: WipeProps) => TransitionPresentation<WipeProps>;

package/dist/esm/test/transitions.test.d.ts

@@ -1 +0,0 @@
-export {};

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

@@ -1,5 +0,0 @@
-import type { TransitionTiming } from '../types.js';
-export declare const linearTiming: (options: {
-    durationInFrames: number;
-    easing?: ((input: number) => number) | undefined;
-}) => TransitionTiming;

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

@@ -1,7 +0,0 @@
-import type { SpringConfig } from 'remotion';
-import type { TransitionTiming } from '../types.js';
-export declare const springTiming: (options?: {
-    config?: Partial<SpringConfig>;
-    durationInFrames?: number;
-    durationRestThreshold?: number;
-}) => TransitionTiming;

package/dist/esm/types.d.ts

@@ -1,27 +0,0 @@
-import type { ComponentType } from 'react';
-export type PresentationDirection = 'entering' | 'exiting';
-export type TransitionTiming = {
-    getDurationInFrames: (options: {
-        fps: number;
-    }) => number;
-    getProgress: (options: {
-        frame: number;
-        fps: number;
-    }) => number;
-};
-export type TransitionSeriesTransitionProps<PresentationProps extends Record<string, unknown>> = {
-    timing: TransitionTiming;
-    presentation?: TransitionPresentation<PresentationProps>;
-};
-type LooseComponentType<T> = ComponentType<T> | ((props: T) => React.ReactNode);
-export type TransitionPresentation<PresentationProps extends Record<string, unknown>> = {
-    component: LooseComponentType<TransitionPresentationComponentProps<PresentationProps>>;
-    props: PresentationProps;
-};
-export type TransitionPresentationComponentProps<PresentationProps extends Record<string, unknown>> = {
-    presentationProgress: number;
-    children: React.ReactNode;
-    presentationDirection: PresentationDirection;
-    passedProps: PresentationProps;
-};
-export {};

package/dist/esm/validate.d.ts

@@ -1,2 +0,0 @@
-import { NoReactInternals } from 'remotion/no-react';
-export declare const validateDurationInFrames: typeof NoReactInternals.validateDurationInFrames;