How to add offset to the tile image?

[bolev98]

how to make this constantly moving stripes effect on background? is there any property or method to add offset to the tile image?

[Crygen54 (Crygen)]

Main Frame

The main frame have “Clip Descendant” enabled.

Stripes Image

2 stripes images are inside this frame.
Both Images size are at (1, 0, 1, 0) scale.
First Image position is at the middle (0, 0, 0, 0) and the second is to the left of the frame (-1, 0, 0, 0) so it is invisible.

Moving Stripes

Now, to make these 2 images move in loop, you have to use a tween service.

At first, you need to clone the left image (the invisible one).
Next, you are going to tween both images to the right at same time, the middle stripe image to position (1, 0, 0, 0) and the left stripes image to position (0, 0, 0, 0).

Once the tweens are finished, the middle stripes image become right stripes and the left stripes image become the middle stripes image.
So we are going to delete the right stripes (previously middle stripes) as it is no more used and rename the clone (previously left stripes) to “Middle-Stripes”

Then, repeat the process again.

Local script inside the ScreenGui

--[[ Roblox Services ]]--
local TweenService = game:GetService("TweenService")

--[[ Main Instances ]]--
local Frame = script.Parent:WaitForChild("Frame")

--[[ Tweens Settings ]]--
local StripeTweenInfo = TweenInfo.new(2, Enum.EasingStyle.Linear)

--------------------------------------------------------------------------------------------

--[[ Local Functions ]]--
local function MoveStripes()
	local MiddleStripes = Frame:FindFirstChild("Middle_Stripes") --Find Middle Image
	local LeftStripes = Frame:FindFirstChild("Left_Stripes") --Find Left Image
	
	if MiddleStripes and LeftStripes then
		local Clone = LeftStripes:Clone() --Clone Left Image
		
		Clone.Parent = Frame
		TweenService:Create(MiddleStripes, StripeTweenInfo, {Position = UDim2.fromScale(1, 0)}):Play() --Tween Images to the right
		TweenService:Create(Clone, StripeTweenInfo, {Position = UDim2.fromScale(0, 0)}):Play() --Tween Images to the right
		task.wait(1.95) --Wait a bit less than the tween time (2) so it move continuously and never stop
		MiddleStripes:Destroy() --Destroy Middle Stripes Image (Right Stripes)
		Clone.Name = "Middle_Stripes" --Left Stripes Image > Become Middle Stripes Image
	end
end

--------------------------------------------------------------------------------------------

--[[ Main Setup ]]--
while Frame.Visible == true do
	MoveStripes()
end

[bolev98]

thanks! I wanted to to this but decided to check if there’s more simple way of doing it.