@remotion/transitions 4.0.53 → 4.0.55

package/.prettierrc.js

@@ -0,0 +1,14 @@
+module.exports = {
+	singleQuote: true,
+	bracketSpacing: false,
+	useTabs: true,
+	overrides: [
+		{
+			files: ['*.yml'],
+			options: {
+				singleQuote: false,
+			},
+		},
+	],
+	plugins: [require.resolve('prettier-plugin-organize-imports')],
+};

package/dist/TransitionSeries.js

@@ -84,8 +84,13 @@ const TransitionSeriesChildren = ({ children, }) => {
                 });
                 transitionOffsets -= duration;
             }
-            const actualStartFrame = currentStartFrame + transitionOffsets;
+            let actualStartFrame = currentStartFrame + transitionOffsets;
             startFrame += durationInFramesProp + offset;
+            // Handle the case where the first item is a transition
+            if (actualStartFrame < 0) {
+                startFrame -= actualStartFrame;
+                actualStartFrame = 0;
+            }
             const inner = (_jsx(Sequence, { from: Math.floor(actualStartFrame), durationInFrames: durationInFramesProp, ...passedProps, children: child }));
             const nextProgress = next
                 ? next.props.timing.getProgress({

package/dist/cjs/flip.js

@@ -0,0 +1,40 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var remotion = require('remotion');
+
+const Flip = ({ children, presentationDirection, presentationProgress, passedProps: { direction = 'from-left', perspective = 1000 }, }) => {
+    const style = react.useMemo(() => {
+        const startRotationEntering = direction === 'from-right' || direction === 'from-top' ? 180 : -180;
+        const endRotationEntering = direction === 'from-right' || direction === 'from-top' ? -180 : 180;
+        const rotation = presentationDirection === 'entering'
+            ? remotion.interpolate(presentationProgress, [0, 1], [startRotationEntering, 0])
+            : remotion.interpolate(presentationProgress, [0, 1], [0, endRotationEntering]);
+        const rotateProperty = direction === 'from-top' || direction === 'from-bottom'
+            ? 'rotateX'
+            : 'rotateY';
+        return {
+            width: '100%',
+            height: '100%',
+            transform: `${rotateProperty}(${rotation}deg)`,
+            backfaceVisibility: 'hidden',
+            WebkitBackfaceVisibility: 'hidden',
+        };
+    }, [direction, presentationDirection, presentationProgress]);
+    const outer = react.useMemo(() => {
+        return {
+            perspective,
+            // Make children also their backface hidden
+            transformStyle: 'preserve-3d',
+        };
+    }, [perspective]);
+    return (jsxRuntime.jsx(remotion.AbsoluteFill, { style: outer, children: jsxRuntime.jsx(remotion.AbsoluteFill, { style: style, children: children }) }));
+};
+const flip = (props) => {
+    return { component: Flip, props: props !== null && props !== void 0 ? props : {} };
+};
+
+exports.flip = flip;

package/dist/cjs/index.js

@@ -213,8 +213,13 @@ const TransitionSeriesChildren = ({ children, }) => {
                 });
                 transitionOffsets -= duration;
             }
-            const actualStartFrame = currentStartFrame + transitionOffsets;
+            let actualStartFrame = currentStartFrame + transitionOffsets;
             startFrame += durationInFramesProp + offset;
+            // Handle the case where the first item is a transition
+            if (actualStartFrame < 0) {
+                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({

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

@@ -0,0 +1,8 @@
+import type { TransitionPresentation } from '../types.js';
+export type FlipDirection = 'from-left' | 'from-right' | 'from-top' | 'from-bottom';
+type FlipPresentationProps = {
+    direction?: FlipDirection;
+    perspective?: number;
+};
+export declare const flip: (props?: FlipPresentationProps) => TransitionPresentation<FlipPresentationProps>;
+export {};

package/dist/presentations/flip.d.ts

@@ -0,0 +1,8 @@
+import type { TransitionPresentation } from '../types.js';
+export type FlipDirection = 'from-left' | 'from-right' | 'from-top' | 'from-bottom';
+type FlipPresentationProps = {
+    direction?: FlipDirection;
+    perspective?: number;
+};
+export declare const flip: (props?: FlipPresentationProps) => TransitionPresentation<FlipPresentationProps>;
+export {};

package/dist/presentations/flip.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { AbsoluteFill, interpolate } from 'remotion';
+const Flip = ({ children, presentationDirection, presentationProgress, passedProps: { direction = 'from-left', perspective = 1000 }, }) => {
+    const style = useMemo(() => {
+        const startRotationEntering = direction === 'from-right' || direction === 'from-top' ? 180 : -180;
+        const endRotationEntering = direction === 'from-right' || direction === 'from-top' ? -180 : 180;
+        const rotation = presentationDirection === 'entering'
+            ? interpolate(presentationProgress, [0, 1], [startRotationEntering, 0])
+            : interpolate(presentationProgress, [0, 1], [0, endRotationEntering]);
+        const rotateProperty = direction === 'from-top' || direction === 'from-bottom'
+            ? 'rotateX'
+            : 'rotateY';
+        return {
+            width: '100%',
+            height: '100%',
+            transform: `${rotateProperty}(${rotation}deg)`,
+            backfaceVisibility: 'hidden',
+            WebkitBackfaceVisibility: 'hidden',
+        };
+    }, [direction, presentationDirection, presentationProgress]);
+    const outer = useMemo(() => {
+        return {
+            perspective,
+            // Make children also their backface hidden
+            transformStyle: 'preserve-3d',
+        };
+    }, [perspective]);
+    return (_jsx(AbsoluteFill, { style: outer, children: _jsx(AbsoluteFill, { style: style, children: children }) }));
+};
+export const flip = (props) => {
+    return { component: Flip, props: props !== null && props !== void 0 ? props : {} };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remotion/transitions",
-  "version": "4.0.53",
+  "version": "4.0.55",
   "description": "Transition presets for Remotion",
   "sideEffects": false,
   "main": "dist/cjs/index.js",
@@ -16,7 +16,7 @@
     "url": "https://github.com/remotion-dev/remotion/issues"
   },
   "dependencies": {
-    "remotion": "4.0.53"
+    "remotion": "4.0.55"
   },
   "devDependencies": {
     "@jonny/eslint-config": "3.0.276",
@@ -31,8 +31,8 @@
     "@vitejs/plugin-react": "^2.0.0",
     "rollup": "^2.70.1",
     "@rollup/plugin-typescript": "^8.2.0",
-    "remotion": "4.0.53",
-    "@remotion/test-utils": "4.0.53"
+    "remotion": "4.0.55",
+    "@remotion/test-utils": "4.0.55"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
@@ -70,6 +70,12 @@
       "require": "./dist/cjs/presentations/wipe.js",
       "types": "./dist/presentations/wipe.d.ts"
     },
+    "./flip": {
+      "module": "./dist/presentations/flip.js",
+      "import": "./dist/presentations/flip.js",
+      "require": "./dist/cjs/presentations/flip.js",
+      "types": "./dist/presentations/flip.d.ts"
+    },
     "./package.json": "./package.json"
   },
   "typesVersions": {
@@ -80,6 +86,9 @@
       "slide": [
         "dist/presentations/slide.d.ts"
       ],
+      "flip": [
+        "dist/presentations/flip.d.ts"
+      ],
       "fade": [
         "dist/presentations/fade.d.ts"
       ]

package/rollup.config.js

@@ -1,6 +1,8 @@
 // rollup.config.js
 import typescript from '@rollup/plugin-typescript';
 
+const presentations = ['slide', 'flip', 'wipe', 'fade'];
+
 export default [
 	{
 		input: 'src/index.ts',
@@ -20,58 +22,24 @@ export default [
 			}),
 		],
 	},
-	{
-		input: 'src/presentations/slide.tsx',
-		output: [
-			{
-				file: 'dist/cjs/slide.js',
-				format: 'cjs',
-				sourcemap: false,
-			},
-		],
-		external: ['remotion', 'react', 'react/jsx-runtime'],
-		plugins: [
-			typescript({
-				tsconfig: 'tsconfig-cjs.json',
-				sourceMap: false,
-				outputToFilesystem: true,
-			}),
-		],
-	},
-	{
-		input: 'src/presentations/fade.tsx',
-		output: [
-			{
-				file: 'dist/cjs/fade.js',
-				format: 'cjs',
-				sourcemap: false,
-			},
-		],
-		external: ['remotion', 'react', 'react/jsx-runtime'],
-		plugins: [
-			typescript({
-				tsconfig: 'tsconfig-cjs.json',
-				sourceMap: false,
-				outputToFilesystem: true,
-			}),
-		],
-	},
-  {
-		input: 'src/presentations/wipe.tsx',
-		output: [
-			{
-				file: 'dist/cjs/wipe.js',
-				format: 'cjs',
-				sourcemap: false,
-			},
-		],
-		external: ['remotion', 'react', 'react/jsx-runtime'],
-		plugins: [
-			typescript({
-				tsconfig: 'tsconfig-cjs.json',
-				sourceMap: false,
-				outputToFilesystem: true,
-			}),
-		],
-	},
+	...presentations.map((p) => {
+		return {
+			input: `src/presentations/${p}.tsx`,
+			output: [
+				{
+					file: `dist/cjs/${p}.js`,
+					format: 'cjs',
+					sourcemap: false,
+				},
+			],
+			external: ['remotion', 'react', 'react/jsx-runtime'],
+			plugins: [
+				typescript({
+					tsconfig: 'tsconfig-cjs.json',
+					sourceMap: false,
+					outputToFilesystem: true,
+				}),
+			],
+		};
+	}),
 ];