Roact Tweening?

Help and Feedback Scripting Support
#1

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?

#2

Have you tried Refs in the Roact library? They can point to Roblox instances when you pass Roact.Ref as an index to your ref inside of the props that you assign in Roact.createElement. Useful for when you want direct access to instances.

You can create a ref with Roact.createRef as shown below:

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, call function getValue on the Ref to get its pointed instance
print(frameRef:getValue().Name) --> Frame
frameRef:getValue():TweenPosition(UDim2.fromScale(0.25, 0.25))

With stateful components in action, 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
		}, {
			
		})
	})
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

I recommend you to only call getValue on a Ref when you surely know that it has been pointed to, utilize stateful lifecycle methods (didMount, didUpdate…) to your advantage

If you would like to see some libraries instead, from what I know of there’s Otter and Flipper for you to explore. Let me know if you need anything

3 Likes