@Zimroy (Zimroy) posted a new topic, subject "Why does this pattern not loop how i want it to?". It read:

   Hi everyone! so ive been trying to make a menu with a background/pattern looping forever but its not working how i wanted it to
    
    ####  This is when i play in studio
    
    //devforum-uploads.s3.dualstack.us-east-2.amazonaws.com/uploads/original/4X/8/d/8/8d8de1d909427a96df73233c1028b4ea2ae57b5c.mp4
    
    ####  And this is when i play in the game
    
    //devforum-uploads.s3.dualstack.us-east-2.amazonaws.com/uploads/original/4X/0/3/d/03d8099e7eb0870f85c4012c03e5b45e4c79f66c.mp4
    
      
    how do i fix this?  
    also, heres the script i used:
    [code] 
        local MovingImage = script.Parent
        
        while true do
        	MovingImage:TweenPosition(UDim2.new(0, -5, -0.137, 0),"Out","Linear",2,true)
        	wait(1)
        	MovingImage:TweenPosition(UDim2.new(-0.075, 0, -0.25, 0),"Out","Linear",0,true)
        	wait(0)
        end
        
    [/code]
    
    **Thank you for reading**

Then @kilesix (kilesix) said

    I believe it's due to the second tween playing before the first tween is completed  
    In order to do them asynchronously, you should use TweenService, (this is preferred)  
    Example :
    [code] 
        while true do
            local firstTween = TweenService:Create(movingImage, TweenInfo.new(timeDuration, style, direction, ...), { -- table of all the properties to tween
                Position = Udim2.new(0, -5, -0.137, 0),
            })
            firstTween:Play()
            firstTween.Completed:Wait()
            -- same thing with the second tween
        end
        
    [/code]
    
    See all arguments that TweenService:Create take.  
    See all arguments that TweenInfo take.

@Zimroy (Zimroy) replied

    so, i did what you told me ( _well atleast i think i did_ ) but it doesn't work
    [code] 
        local TweenService = game:GetService("TweenService")
        
        while true do
        	local MovingImage = script.Parent
            local firstTween = TweenService:Create(MovingImage, TweenInfo.new(1, "Linear", "Out"), {
                Position = Udim2.new(0, -5, -0.137, 0),
            })
            firstTween:Play()
        	firstTween.Completed:Wait()
        	
        	local secondTween = TweenService:Create(MovingImage, TweenInfo.new(1, "Linear", "Out"), {
        		Position = Udim2.new(-0.075, 0, -0.25, 0),
        	})
        	secondTween:Play()
        	secondTween.Completed:Wait()
        end
        
    [/code]
    
    and heres the error  
      
    also, the Udim2 had a blue line under it but idk if that helps or not

After which, @kilesix (kilesix) added

    You must use Enumerations in TweenInfo, e.g `Enum.EasingStyle.Linear` instead of `"Linear"` and `Enum.EasingDirection.Out` instead of `"Out"`

@D0RYU (nici) replied

    [code]
        local TweenService = game:GetService("TweenService")
        local MovingImage = script.Parent
        
        function CreateTween(Object, Info, Properties)
            local Tween = TweenService:Create(Object, Info, Properties)
        
            Tween:Play()
            Tween.Completed:Wait()
        end
        
        while true do
            CreateTween(MovingImage, TweenInfo.new(1, Enum.EasingStyle.Linear), {
                Position = UDim2.fromScale(0, -0.135)
            })
        
            MovingImage.Position = Udim2.fromScale(-0.075, -0.25)
        end
        
    [/code]
    
    you got an error because you need to use the global Enum  
    anyways I made a function that works like TweenService:Create, except is also plays the tween and waits for it to finish
    
    also I didn't use EasingDirection because Enum.EasingDirection.Out is in there by default

Then @Forummer (Forummer) said

    [code]
        local MovingImage = script.Parent
        
        while true do
        	MovingImage:TweenPosition(UDim2.new(0, -5, -0.137, 0),"Out","Linear",2,true)
        	task.wait(2)
        	MovingImage:TweenPosition(UDim2.new(-0.075, 0, -0.25, 0),"Out","Linear",0.5,true)
        	task.wait(0.5)
        end
        
    [/code]
    
    You set the length of time the tween plays for to two seconds but only wait 1 second before playing the next tween, you also didn't specify a length of time that the second tween should play for and wait that length of time too so I've used 0.5 as an example.

So @Zimroy (Zimroy) replied

    im not sure what to do, but the Udim2 has blue line under it and has an error  
    
    
    it also has this error in the output when i play the game  
    
    
    image895×18 2.14 KB

@D0RYU (nici) replied

    that's my fault, I over looked this  
    try UDim2.new instead
    
    you have to capitalize “U” and “D”

Then @Zimroy (Zimroy) said

    it works now, but it goes in both directions and not in a loop

Then @DaCrazyDev (Username) said

    The fact that it works in studio, and does also work in game but not as expected, leads me to think that the problem could possibly be the image aspect ratio scaling. You can see that the studio window size is a different, skinnier size than the game window.

So @D0RYU (nici) replied

    one problem I see is the fact that you were using `0, -5, -0.137, 0`  
    use scale for both, not scale and offset
    
    `ScaleX, OffsetX, ScaleY, OffsetY`
    
    scale should work for all devices
    
    there is also a problem with TweenInfo that I am going to fix in my original code

@DaCrazyDev (Username) replied

    I would also recommend using `UDim2.fromScale(xScale, yScale)`

Then @Zimroy (Zimroy) said

    i fixed that and it works, but it goes in both directions at the same speed, what i want is for it to go in one direction and then instantly teleport back to its original position so it looks like it loops forever.

Then @DaCrazyDev (Username) said

    That seems to be caused by using the same TweenInfo with a Time parameter of 1 twice instead of 0 the second time. At that point you could just set the Position as well instead of tweening. Can you please reply with the latest script?

@D0RYU (nici) replied

    I just fixed TweenInfo, you have to fix `UDim2.new(0, -5, -0.137, 0)`
    
    you can look at my code again
    
    EDIT:  
    fixed it myself since you showed what it was

To which @Zimroy (Zimroy) replied

    [code]
        local TweenService = game:GetService("TweenService")
        local MovingImage = script.Parent
        local TweenInfo = TweenInfo.new(1, Enum.EasingStyle.Linear)
        
        function CreateTween(Object, Info, Properties)
        	local Tween  = TweenService:Create(Object, Info, Properties)
        
        	Tween:Play()
        	Tween.Completed:Wait()
        end
        
        while true do
        	CreateTween(MovingImage, TweenInfo, {
        		Position = UDim2.new(0, 0, -0.135, 0)
        	})
        	CreateTween(MovingImage, TweenInfo, {
        		Position = UDim2.new(-0.075, 0, -0.25, 0)
        	})
        end
        
    [/code]

Then @D0RYU (nici) said

    use my newer code instead of this

To which @DaCrazyDev (Username) replied

    Try this? Curious to see if it works
    [code] 
        local TweenService = game:GetService("TweenService")
        local MovingImage = script.Parent
        local TweenInfo = TweenInfo.new(1, Enum.EasingStyle.Linear)
        
        function CreateTween(Object, Info, Properties)
        	local Tween  = TweenService:Create(Object, Info, Properties)
        
        	Tween:Play()
        	Tween.Completed:Wait()
        end
        
        while true do
        	CreateTween(MovingImage, TweenInfo, {
        		Position = UDim2.new(0, 0, -0.135, 0)
        	})
        
        	MovingImage.Position = UDim2.new(-0.075, 0, -0.25, 0)
        end
        
    [/code]

After which, @Zimroy (Zimroy) added

    it works in studio and looks good, but in-game it still glitches a little bit  
    
    
    //devforum-uploads.s3.dualstack.us-east-2.amazonaws.com/uploads/original/4X/1/c/5/1c584258e94e00e8d85d7d360078025abad92b74.mp4

Then @DaCrazyDev (Username) said

    Possibly because you originally used -0.137 and somewhere it changed to -0.135. Changed it back to -0.137.
    [code] 
        local TweenService = game:GetService("TweenService")
        local MovingImage = script.Parent
        local TweenInfo = TweenInfo.new(1, Enum.EasingStyle.Linear)
        
        function CreateTween(Object, Info, Properties)
        	local Tween  = TweenService:Create(Object, Info, Properties)
        
        	Tween:Play()
        	Tween.Completed:Wait()
        end
        
        while true do
        	CreateTween(MovingImage, TweenInfo, {
        		Position = UDim2.new(0, 0, -0.137, 0)
        	})
        
        	MovingImage.Position = UDim2.new(-0.075, 0, -0.25, 0)
        end
        
    [/code]

To which @Zimroy (Zimroy) replied

    it works and looks good in studio but glitches a little bit like in my other post

So @D0RYU (nici) replied

    if this doesn't work maybe the problem is the AnchorPoint

@Zimroy (Zimroy) replied

    i tried it and it works the same as the last one, aka it still glitches in-game

Then @Luacrative (Username) said

    Would you mind sending a place file with just the UI and your script? If that's too much to ask for, some additional properties like the AnchorPoint, image size, & explorer set up would help.

Then @D0RYU (nici) said

    is studio glitching?  
    or is it only in game

@Zimroy (Zimroy) replied

    heres the link to the game:  
    LoopingUI.rbxl (106.2 KB)

Then @Zimroy (Zimroy) said

    i dont think studio is glitching, its only in-game, also if you need it heres the link to the game:  
    LoopingUI.rbxl (106.2 KB)  
    also, the in-game screen size compared to the studio screen size is much bigger, which could be why its not working correctly

After which, @Luacrative (Username) added

    Alright, this should work.  
    LoopingUIFixed.rbxl (106.1 KB)

After which, @Zimroy (Zimroy) added

    so i moved the script to the game and it works in studio, but i haven't tested in-game yet because:  
    
    
    //devforum-uploads.s3.dualstack.us-east-2.amazonaws.com/uploads/original/4X/1/3/4/1344a7f1732a3cf368e4f5bbd08ddc45f875f76b.mp4
    
      
    ( _the cyan color is the background_ )

To which @Luacrative (Username) replied

    > so i moved the script to the game
    
    I also changed the image size in my version to `{2, 0},{2, 0}` and the position to `{0, 0},{0, 0}`. Once you change those it should work


{'source': 'discourse', 'url': 'https://devforum.roblox.com/t/why-does-this-pattern-not-loop-how-i-want-it-to/1565056', 'title': 'Why does this pattern not loop how i want it to?', 'views': 716, 'has_accepted_answer': True, 'word_count': 1339, 'like_count': 14, 'reply_count': 26, 'participant_count': 5, 'posts': 30, 'tags': 'scripting studio gui', 'author': '@Zimroy (Zimroy)', 'participants': '@Zimroy (Zimroy), @kilesix (kilesix), @D0RYU (nici), @Forummer (Forummer), @DaCrazyDev (Username), @Luacrative (Username)', 'image_url': [None], 'created_at': '2021-11-25T22:24:20.892Z', 'last_posted_at': '2021-11-26T01:10:18.855Z'}