Untitled-1.psd
Layers
Circle
Rect
Background
Color
Project
Libraries
Composition 1
Circle Layer
Rect Layer
Background
Position: 960.0, 540.0
Scale: 100%
Rotation: 0°
Opacity: 100%
Effects
Blur0.0
Opacity100%
Scale1.0
Rotate0°
Tint—
Shadowoff
0s
1s
2s
3s
4s
5s
Circle Layer
Rect Layer
BG Solid
Adjustment
Camera 1
Scene
Object
Mat.
Transform
Location X0.000
Location Y0.000
Location Z0.000
Rotation
X0°
Y0°
Z0°
Scale
X1.000
Y1.000
Z1.000
▶
Frame: 24
Start: 1
End: 250
Explorer
src
main.ts
utils.ts
types.ts
index.css
components
Button.tsx
Modal.tsx
public
index.html
main.ts
utils.ts
Button.tsx
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
import gsap from 'gsap'
import { useState, useEffect } from 'react'
import { Scene, Transition } from './types'
export const scenes: Scene[] = ['ps', 'ae', 'bl', 'vs']
// Animate transition between UI panels
export function transition(from: Scene, to: Scene) {
const tl = gsap.timeline()
tl.to(from, { opacity: 0, y: -12, duration: .4 })
.from(to, { opacity: 0, y: 12, duration: .4 })
return tl
}
function moveCursor(x: number, y: number) {
return gsap.to('#cursor', {
left: x, top: y,
duration: .6, ease: 'power2.out'
})
}
const App = () => {
const [idx, setIdx] = useState(0)
useEffect(() => {
transition(scenes[idx], scenes[idx + 1])
}, [idx])
return <div>{idx}</div>
}
export default App
main
⎇
TypeScript 5.3
Ln 10, Col 48
UTF-8
Prettier