Tweening Surface GUI Loop

Help and Feedback Scripting Support
#1

I recently got back into programming after a 4 month break so sorry if I seem dumb, but how would I go about tweening multiple images into a loop on a SurfaceGui?

image \

Should I use a singular image and move the image to the side or should I use a table to store all of the images? I am kind of clueless.

#2

I will be using this for a bank which shows different stock prices and have the images in a looped line.

image
image904Ă—313 37.7 KB

#3

You would need two ImageLabel’s in your SurfaceGui to make this work. Assuming both have their anchor point set to (0, 0,), you would start one at Position UDim2(-1, 0, 0, 0) and the other at UDim2(0, 0, 0, 0). Tween the first to UDim2(0, 0, 0, 0) and the second to UDim2(1, 0, 0, 0). Once these tweens have finished, move the second to UDim(-1, 0, 0, 0), change its Image to the next Image, and you’re ready to tween them to their next spot.

Roughly, this could look like:

local CachedFirst = SurfaceGui:FindFirstChild("First")
local CachedSecond = SurfaceGui:FindFirstChild("Second")

local FirstImage = CachedFirst
local SecondImage = CachedSecond

while true do
	FirstImage:TweenPosition(UDim2.new(0, 0, 0, 0), Enum.EasingDirection.Out, Enum.EasingStyle.Linear,
		2, false, nil)
	SecondImage:TweenPosition(UDim2.new(1, 0, 0, 0), Enum.EasingDirection.Out, Enum.EasingStyle.Linear,
		2, false, nil)
	
	wait(2)
	
	if FirstImage == CachedFirst then
		FirstImage = CachedSecond
		SecondImage = CachedFirst
	else
		FirstImage = CachedFirst
		SecondImage = CachedSecond
	end
	
	FirstImage.Position = UDim2.new(-1, 0, 0, 0)
	FirstImage.Image = ...
end
1 Like
#4

What would this do? I tried setting the image id to all of the images but it just ends up looping the same image.

#5

I deleted this line

And it works better

image
image707Ă—368 79.3 KB

but then it will stop after a random amount of time and look like this image
and then the loop resets and looks like this and the cycle continues
image

#6

You could try using a Beam, this would handle all of the scrolling for you.

#7

Ok I will try using that! Any suggestions why the UI isn’t working?

#8

I was just giving you an idea of how you would change the Image of the label that just got shifted over, so you could support a variety of different images, instead of having the same image repeating over again.

I’m not sure why your loop stopped working, if you post the code that you have right now, I can diagnose it.

1 Like
#9

I will send it!

local CachedFirst = script.Parent:FindFirstChild("First")
local CachedSecond = script.Parent:FindFirstChild("Second")

local FirstImage = CachedFirst
local SecondImage = CachedSecond

while true do
	FirstImage:TweenPosition(UDim2.new(0, 0, 0, 0), Enum.EasingDirection.Out, Enum.EasingStyle.Linear,
		4, false, nil)
	SecondImage:TweenPosition(UDim2.new(1, 0, 0, 0), Enum.EasingDirection.Out, Enum.EasingStyle.Linear,
		4, false, nil)

	wait(4)

	if FirstImage == CachedFirst then
		FirstImage = CachedSecond
		SecondImage = CachedFirst
	else
		FirstImage = CachedFirst
		SecondImage = CachedSecond
	end

	FirstImage.Position = UDim2.new(-1, 0, 0, 0)
end
#10

Alright, so I noticed pretty quickly that the loop I hastily wrote wasn’t functioning as expected and was quite literally making a mistake immediately. However, after I swapped out the code for something that I knew worked, I also noticed that using the ImageLabel’s TweenPosition function was not firing each time, which led to random points where both Image’s would stop moving.

local TweenService = game:GetService("TweenService")

local FirstImage = script.Parent:FindFirstChild("First")
local SecondImage = script.Parent:FindFirstChild("Second")

while true do	
	TweenService:Create(FirstImage, TweenInfo.new(4, Enum.EasingStyle.Linear), 
		{Position = UDim2.new(1, 0, 0, 0)}):Play()
	TweenService:Create(SecondImage, TweenInfo.new(4, Enum.EasingStyle.Linear),
		{Position = UDim2.new(0, 0, 0, 0)}):Play()

	wait(4)
	
	FirstImage.Position = UDim2.new(-1, 0, 0, 0)
	
	TweenService:Create(FirstImage, TweenInfo.new(4, Enum.EasingStyle.Linear), 
		{Position = UDim2.new(0, 0, 0, 0)}):Play()
	TweenService:Create(SecondImage, TweenInfo.new(4, Enum.EasingStyle.Linear),
		{Position = UDim2.new(1, 0, 0, 0)}):Play()

	wait(4)
	
	SecondImage.Position = UDim2.new(-1, 0, 0, 0)
end

This should be correct. Make sure that First starts at position (0, 0, 0, 0), Second starts at position (-1, 0, 0, 0).

1 Like