-
Notifications
You must be signed in to change notification settings - Fork 16
/
useTrailText.story.lua
91 lines (80 loc) · 2.32 KB
/
useTrailText.story.lua
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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
--!strict
local ReplicatedStorage = game:GetService("ReplicatedStorage")
local React = require(ReplicatedStorage.Packages.React)
local ReactRoblox = require(ReplicatedStorage.Packages.ReactRoblox)
local RoactSpring = require(ReplicatedStorage.Packages.RoactSpring)
local e = React.createElement
local textList = { "Lorem", "Ipsum", "Dolor", "Sit" }
local function Button(_)
local toggle, setToggle = React.useState(true)
local springProps = {}
for _ in ipairs(textList) do
table.insert(springProps, {
size = UDim2.fromScale(1, if toggle then 0.1 else 1),
position = UDim2.fromOffset(if toggle then 0 else 20, 0),
transparency = if toggle then 0 else 1,
config = { damping = 1, frequency = 0.3 },
})
end
local springs = RoactSpring.useTrail(#textList, springProps)
local contents = {}
for index, text in ipairs(textList) do
contents[text] = e("Frame", {
BackgroundTransparency = 1,
Size = UDim2.new(1, 0, 0, 77),
LayoutOrder = index,
}, {
Text = e("TextLabel", {
BackgroundTransparency = 1,
Position = springs[index].position,
Size = UDim2.fromScale(1, 1),
Font = Enum.Font.GothamBlack,
TextColor3 = Color3.fromRGB(0, 0, 0),
TextTransparency = springs[index].transparency,
TextSize = 100,
TextXAlignment = Enum.TextXAlignment.Left,
Text = text,
}, {
Cover = e("Frame", {
AnchorPoint = Vector2.new(0, 1),
Position = UDim2.new(0, 0, 1, 7),
Size = springs[index].size,
BackgroundColor3 = Color3.fromRGB(240, 240, 240),
BorderSizePixel = 0,
}),
}),
})
end
return e("TextButton", {
BackgroundColor3 = Color3.fromRGB(240, 240, 240),
Size = UDim2.fromScale(1, 1),
AutoButtonColor = false,
Text = "",
[React.Event.Activated] = function()
setToggle(function(prevState)
return not prevState
end)
end,
}, {
Frame = e("Frame", {
AnchorPoint = Vector2.new(0.5, 0.5),
Position = UDim2.fromScale(0.5, 0.5),
Size = UDim2.fromOffset(300, 320),
BackgroundTransparency = 1,
}, {
UIListLayout = e("UIListLayout", {
SortOrder = Enum.SortOrder.LayoutOrder,
}),
Text = e(React.Fragment, nil, contents),
}),
})
end
return function(target)
local root = ReactRoblox.createRoot(Instance.new("Folder"))
root:render(ReactRoblox.createPortal({
App = e(Button),
}, target))
return function()
root:unmount()
end
end