Spaces:
Running
Running
File size: 1,389 Bytes
323961b | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 | import React from 'react';
import { TransitionImplementationProps } from 'remotion-transition-series/lib/components/Transition';
export const LinearWipe: React.FC<
TransitionImplementationProps & {
angle?: number;
}
> = ({
angle = 0,
progress,
exitingElement = null,
enteringElement = null,
}) => {
const a = (angle * Math.PI) / 180;
const dist = Math.abs(Math.cos(a)) + Math.abs(Math.sin(a));
const box = [
[-1, -1],
[-1, 1],
[1, 1],
[1, -1],
]
.map(([x, y]) => [dist * x + dist * 2 * (1 - progress), dist * y])
.map(([x, y]) => [
x * Math.cos(a) - y * Math.sin(a),
x * Math.sin(a) + y * Math.cos(a),
])
.map(([x, y]) => [x + 1, y + 1])
.map(([x, y]) => [50 * x, 50 * y]);
const polygon = `polygon(${box
.map((p) => `${p[0]}% ${p[1]}%`, [])
.join(',')})`;
return (
<>
<div
style={{
position: 'absolute',
left: 0,
top: 0,
right: 0,
bottom: 0,
}}
>
{exitingElement}
</div>
<div
style={{
position: 'absolute',
left: 0,
top: 0,
right: 0,
bottom: 0,
clipPath: polygon,
}}
>
{enteringElement}
</div>
</>
);
};
|