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 |
}
|
|
|
|