Skip to main content

cube()

note

This is a paid item which you can buy here.

A presentation where both the entering and exiting scene rotate with 3D perspective.

Example​ 

CubeTransition.tsx
tsx
import { linearTiming, TransitionSeries } from"@remotion/transitions";
import { cube } from"@remotion-dev/cube-presentation";
constBasicTransition= () => {
return (
 <TransitionSeries>
 <TransitionSeries.SequencedurationInFrames={40}>
 <Lettercolor="#0b84f3">A</Letter>
 </TransitionSeries.Sequence>
 <TransitionSeries.Transition
presentation={cube({ direction: "from-left" })}
timing={linearTiming({ durationInFrames: 30 })}
 />
 <TransitionSeries.SequencedurationInFrames={60}>
 <Lettercolor="pink">B</Letter>
 </TransitionSeries.Sequence>
 </TransitionSeries>
 );
};

API​

The cube() function does take an object with the following properties:

direction​

One of from-left, from-right, from-top, from-bottom.

tsx
import { CubeDirection } from"@remotion-dev/cube-presentation";
constflipDirection:CubeDirection="from-left";

perspective?​

The CSS perspective of the flip animation. Defaults to 1000.

See also​

AltStyle によって変換されたページ (->オリジナル) /