Need help with tweening images infinitely

I’m trying to make it so that images on a surfaceGui infinitely loop but i dont want them to go offscreen I want it so that when 1 goes off it comes back on the other side, but I’ve only managed to make it do this so far:

icXViYea

Can anyone help?

4 Likes

I think to tween images like that; if you’re using a SurfaceGui, you should have another ‘cloned’ image that comes from the opposite side onto the screen so it gives the effect that it’s repeating itself.

I’ve made an example for you to demonstrate this,

--> Client script
local tweenService = game:GetService("TweenService")

local surface = workspace:WaitForChild("Surface")
local image = surface:WaitForChild("SurfaceGui").ImageLabel

local double = image:Clone()
double.Parent = image.Parent

local tweenInfo = TweenInfo.new(3, Enum.EasingStyle.Linear, Enum.EasingDirection.In)

while true do
	
	--# Position the extra image to the right  
	double.Position = UDim2.new(1, 0, 0, 0)
	
	--# First sequence of the original image coming off the screen
	local offScreenLeft = tweenService:Create(image, tweenInfo, {Position = UDim2.new(-1, 0, 0, 0)})
	offScreenLeft:Play()
	
	--# Extra image coming on the screen
	local onScreenLeft = tweenService:Create(double, tweenInfo, {Position = UDim2.new(0, 0, 0, 0)})
	onScreenLeft:Play()
	
	task.wait(tweenInfo.Time)
	
	--# Position the original image to the right
	image.Position = UDim2.new(1, 0, 0, 0)
	
	--# Sequence of the extra image coming off the screen
	offScreenLeft = tweenService:Create(double, tweenInfo, {Position = UDim2.new(-1, 0, 0, 0)})
	offScreenLeft:Play()
	
	--# Original image coming on the screen
	onScreenLeft = tweenService:Create(image, tweenInfo, {Position = UDim2.new(0, 0, 0, 0)})
	onScreenLeft:Play()
	
	task.wait(tweenInfo.Time)
end

I have attached the example model of this if you’d like to check it out.
Repeating Objects.rbxl (31.6 KB)

Simply enough it just tweens the original image to the left as you’ve shown, but it brings another image from the right onto the screen. It then does the opposite. Doing this gives a ‘infinite loop’ feel not only because its in a loop, but it being managed off-screen as well.

It looks like something like this;
hi

Giving the effect you exactly want.

I will say, another way to do this is to mess with a Texture and the OffsetStudsU and OffsetStudsV properties since the images already repeat itself, but if you want to handle this in a SurfaceGui this is the way to go.

4 Likes

I think a MUCH easier way to do what you’re trying to do is beams. I don’t know what your game requires but in my opinion using beams would make your life x100 easier.

I’m sure you know how beams work but if not you can always check out the Beam API here

1 Like

I have a question that I want to ask. So I had made the gif animated images on the part for the first time. And it works great. But the thing is, I wanted to make the gif image more brighter with surface gui on the part. Instead of screen gui. How can I edited that type of script on the part brick as a brighten image screen?