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?

1 Like
#2

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