The one’s online seem a little hacky, is there any good way to tween Roact with TweenService? Or is there a good alternative module?
1 Like
Have you tried Refs in the Roact library? They can point to specific instances that you want to keep a reference of. It’s main purpose is for when you want direct access to instances, like in your case using TweenService
You can create a ref with Roact.createRef
local frameRef = Roact.createRef()
local handle = Roact.createElement("ScreenGui", {}, {
Frame = Roact.createElement("Frame", {
[Roact.Ref] = frameRef, -- point this Instance created by Roact to frameRef
AnchorPoint = Vector2.new(0.5, 0.5),
Position = UDim2.fromScale(0.5, 0.5),
Size = UDim2.fromScale(0.5, 0.5),
BorderSizePixel = 0,
}, {})
})
Roact.mount(handle, game.Players.PlayerGui)
-- Since the ref has now been pointed to the Frame, use getValue on the Ref to get its pointed instance
print(frameRef:getValue().Name) --> Frame
-- For tweening:
frameRef:getValue():TweenPosition(UDim2.fromScale(0.25, 0.25))
With stateful components, you might want to index the component’s refs into self
:
local Username = Roact.Component:extend("Username")
function Username:init()
-- intially create the refs and index them into self:
self.nameRef = Roact.createRef()
self.frame = Roact.createRef()
end
function Username:render()
return Roact.createElement("Frame", {
[Roact.Ref] = self.frame,
AnchorPoint = Vector2.new(0.5, 0.5),
Position = UDim2.fromScale(0.5, 0.1),
Size = UDim2.fromScale(0.7, 0.1),
}, {
UsernameLabel = Roact.createElement("TextLabel", {
[Roact.Ref] = self.nameRef,
Text = game.Players.LocalPlayer.DisplayName,
Size = UDim2.fromScale(1, 1),
AnchorPoint = Vector2.new(0.5, 0.5),
Position = UDim2.fromScale(0.5, 0.5),
BackgroundTransparency = 1,
TextScaled = true,
Font = Enum.Font.GothamBlack
}, {
})
})
-- you cannot use a ref at this stage, only when the component is mounted
end
function Username:didMount()
-- get the Instance of whatever the ref is pointing to
print(self.nameRef:getValue().Text, "'s Username component has been mounted")
end
You should call getValue on a ref when it has been set. You have to use methods like didMount
, didUpdate
to access the refs from there.
Other than using TweenService, you can use some libraries:
Otter
Flipper
7 Likes