removed gsap text
Browse files
Remotion-app/src/HelloWorld/TextStream.jsx
CHANGED
|
@@ -4,8 +4,6 @@ import * as Fonts from '@remotion/google-fonts';
|
|
| 4 |
import transcriptData from './Assets/TextSequences.json';
|
| 5 |
import Constants from './Assets/Constants.json';
|
| 6 |
import {TransitionSeries} from '@remotion/transitions';
|
| 7 |
-
import GsapAnimation from './Components/GsapAnimation';
|
| 8 |
-
import gsap from 'gsap';
|
| 9 |
const defaultText = {
|
| 10 |
fontFamily: 'Luckiest Guy',
|
| 11 |
fontSize: 120,
|
|
@@ -55,7 +53,7 @@ export const TextStream = () => {
|
|
| 55 |
from={(entry.start + delta) * fps}
|
| 56 |
durationInFrames={fps * (entry.end - entry.start + delta)}
|
| 57 |
>
|
| 58 |
-
<Letter
|
| 59 |
</TransitionSeries.Sequence>
|
| 60 |
);
|
| 61 |
})}
|
|
@@ -64,28 +62,6 @@ export const TextStream = () => {
|
|
| 64 |
);
|
| 65 |
};
|
| 66 |
|
| 67 |
-
export function Letter({children, style
|
| 68 |
-
|
| 69 |
-
const Textimeline =()=>{
|
| 70 |
-
let timeline=gsap.timeline();
|
| 71 |
-
timeline.fromTo('#letter',{yPercent:100},{yPercent:0,duration:duration, ease:"power2.inOut"})
|
| 72 |
-
return timeline
|
| 73 |
-
}
|
| 74 |
-
|
| 75 |
-
return <GsapAnimation Timeline={Textimeline} className='h-fit' style={{
|
| 76 |
-
|
| 77 |
-
backgroundColor: 'transparent',
|
| 78 |
-
justifyContent: 'center',
|
| 79 |
-
alignItems: 'center',
|
| 80 |
-
position: 'relative',
|
| 81 |
-
...style,
|
| 82 |
-
}}>
|
| 83 |
-
|
| 84 |
-
|
| 85 |
-
<div id="letter">
|
| 86 |
-
{children}
|
| 87 |
-
</div>
|
| 88 |
-
</GsapAnimation>;
|
| 89 |
}
|
| 90 |
-
|
| 91 |
-
|
|
|
|
| 4 |
import transcriptData from './Assets/TextSequences.json';
|
| 5 |
import Constants from './Assets/Constants.json';
|
| 6 |
import {TransitionSeries} from '@remotion/transitions';
|
|
|
|
|
|
|
| 7 |
const defaultText = {
|
| 8 |
fontFamily: 'Luckiest Guy',
|
| 9 |
fontSize: 120,
|
|
|
|
| 53 |
from={(entry.start + delta) * fps}
|
| 54 |
durationInFrames={fps * (entry.end - entry.start + delta)}
|
| 55 |
>
|
| 56 |
+
<Letter style={subtitle}>{entry.text}</Letter>
|
| 57 |
</TransitionSeries.Sequence>
|
| 58 |
);
|
| 59 |
})}
|
|
|
|
| 62 |
);
|
| 63 |
};
|
| 64 |
|
| 65 |
+
export function Letter({children, style}) {
|
| 66 |
+
return <div style={style}>{children}</div>;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 67 |
}
|
|
|
|
|
|