Freeze portions of a sequence
With the following snippet, two portions of a sequence are frozen and resumed afterwards from the point they were paused.
FreezePortion.tsximportReact , {useMemo } from 'react'; import {Interactive ,useCurrentFrame ,useVideoConfig } from 'remotion'; constCounterInner :React .FC = () => { return ( <div style ={{alignItems : 'center',color : 'white',display : 'flex',fontSize : 60,height : '100%',justifyContent : 'center', }} > {useCurrentFrame ()} </div > ); }; export constCounter =Interactive .withSchema ({Component :CounterInner ,componentName : 'Counter',schema : {},wrapInSequence : true,layout : 'absolute-fill', }); constFREEZES = [ {frame : 0,durationInFrames : 25, }, {frame : 30,durationInFrames : 50, }, ]; constgetFreezes = () => { letsummedUpFreezes = 0; constfreezeFrames = []; for (constfreeze ofFREEZES ) {freezeFrames .push ({start :summedUpFreezes +freeze .frame ,durationInFrames :freeze .durationInFrames ,from :summedUpFreezes ,frame :freeze .frame , });summedUpFreezes +=freeze .durationInFrames ; } returnfreezeFrames ; }; export constFreezePortion :React .FC = () => { const {fps } =useVideoConfig (); constfreezes =useMemo (() => { returngetFreezes (); }, []); constframe =useCurrentFrame (); constnextFreeze =freezes .find ( (freeze ) =>frame <freeze .start +freeze .durationInFrames , ); constactiveFreeze =freezes .find ( (freeze ) =>frame >=freeze .start &&frame <freeze .start +freeze .durationInFrames , ); constfrom =useMemo (() => { if (activeFreeze ) { returnactiveFreeze .from ; } if (nextFreeze ) { returnnextFreeze .from ; } return (freezes [freezes .length - 1].from +freezes [freezes .length - 1].durationInFrames ); }, [activeFreeze ,freezes ,nextFreeze ]); return ( <Counter from ={from }freeze ={activeFreeze ?activeFreeze .frame : null}premountFor ={fps } /> ); };