New, trying to animate my imageLabel

[zinc pawn]

local image = script.Parent
local tweenService = game:GetService("TweenService")


local originalPosition = image.Position
local originalRotation = image.Rotation


local floatHeight = 0.015
local floatTime = 4
local tiltAngle = 5
local tiltTime = 5


local floatTween = TweenInfo.new(floatTime, Enum.EasingStyle.Sine, Enum.EasingDirection.InOut, -1, true)
local floatGoal = {Position = UDim2.new(originalPosition.X.Scale, 0, originalPosition.Y.Scale - floatHeight, 0)}

local tiltTween = TweenInfo.new(tiltTime, Enum.EasingStyle.Sine, Enum.EasingDirection.InOut, -1, true)
local tiltGoal = {Rotation = tiltAngle}


tweenService:Create(image, floatTween, floatGoal):Play()
tweenService:Create(image, tiltTween, tiltGoal):Play()

Im new and im trying to animate my imageLabel to go up and down and tilt to the side as well as repeat, but the animation is very choppy aka not smooth at all.

[ornate sonnet]

is it being done on a local or server script

[zinc pawn]

if im gonna be honest with you i have no clue its just a imageLabel with a localscript

[ornate sonnet]

alr cause the server runs at 30 fps i think so that may have been a cause, but it isnt, since the choppy nature is in the float tween, you may want to keep the rotation tween but manually create the float tween

for example:

local increment=1
game:GetService("RunService").RenderStepped:Connect(function(dt) --dt is the time between frames so you can make it move more distance per frame on low framerates for equal movement per second on all framerates
if image.Position<0.2 or image.Position>0.8 then increment*=-1 end
image.Position+=UDim2.FromScale(0,increment*dt)
end)

[zinc pawn]

server as in studio server?

[cursive delta]

** You are now Level 1! **

[zinc pawn]

if so i tried it in-game and it was still choppy

[ornate sonnet]

server as in being run by a regular script instead of a local script

[zinc pawn]

ah

i just started learning everything today so im still pretty lost so bare with me lol

[ornate sonnet]

local means to run on your machine (such as movement controls, as to why you move with 0 ping on your screen), and server means its being ran by the roblox machine hosting that server (such as npc logic, physics, etc)

[zinc pawn]

ye i understand that part

im moving from minecraft so i have basic knowledge

im also using AI for it too so i can help understand it but it doesnt seem to be fixing even with your input

[ornate sonnet]

ai is good for explaining services and documentation, and providing help articles, etc, but the code it writes is usually really unnecessarily complicated, it's good as a tool but you will have to learn to code for yourself, you can surpass it in 0.5-3 months, although again it does help for starting off to explain different services and code to you so you can write it yourself

[zinc pawn]

yeah im using it for this, and it just cant fix it at all

local image = script.Parent
local runService = game:GetService("RunService")
local tweenService = game:GetService("TweenService")

-- Store the image's original position and rotation
local originalPosition = image.Position
local originalRotation = image.Rotation

-- Animation properties
local floatHeight = 0.015 -- How high the image floats up and down (in scale)
local floatSpeed = 1 -- Controls the speed of the floating motion
local tiltAngle = 5 -- The maximum angle the image tilts (in degrees)
local tiltTime = 5 -- The time it takes for one side-to-side tilt cycle

-- Define the key animation points
local tiltTween = TweenInfo.new(tiltTime, Enum.EasingStyle.Sine, Enum.EasingDirection.InOut, -1, true)
local tiltGoal = {Rotation = tiltAngle}

-- This variable will track the passage of time
local time = 0

-- This loop will run every frame and manually update the position
runService.RenderStepped:Connect(function(dt)
    -- Update the time variable
    time = time + dt * floatSpeed

    -- Use a sine wave to create a smooth, repeating up and down motion
    local newY = originalPosition.Y.Scale + math.sin(time) * floatHeight

    -- Update the image's position directly, without a tween
    image.Position = UDim2.new(originalPosition.X.Scale, 0, newY, 0)
end)

-- Start the rotation animation with TweenService
tweenService:Create(image, tiltTween, tiltGoal):Play()
``` i gave it your advice and its still pretty choppy

this is my file pathing im not sure if theres anything else i need to do as i followed about 50 tutorials

[ornate sonnet]

copy and paste the size and position of the image rq

[zinc pawn]

okay

pos: {0.5, 0},{0.277, 0}
size: {0, 600},{0, 600}

[ornate sonnet]

udim2s work this way
horizontal size scale (0 being 0% the size of the screen, 1 being 100% the size of the screen)
horizontal size pixels (each number being 1 pixel in size, on devices with lower resolution it appears bigger because it has a fixed pixel count no matter the resolution)

vertical size scale
vertical size pixels

try setting the size to use scale instead of pixels (like 0.2 in each)

[zinc pawn]

so 0.2, 0.2?

[ornate sonnet]

0.2,0,0.2,0

0.2 size in x and y on scale, and 0 in pixels for both

[zinc pawn]

okay i understand that now, it works the same foor JSON UI on mc

stil cant figure out the choppy anim tho

[ornate sonnet]

local image = script.Parent
local tweenService = game:GetService("TweenService")

local originalPosition = image.Position


local TInfo = TweenInfo.new(0.5, Enum.EasingStyle.Linear)

while task.wait(0.5) and image.Visible do
tweenService:Create(image, TInfo, {Position=originalPosition+UDim2.FromScale(0,math.sin(os.clock() )*0.1),Rotation=math.sin(os.clock()*3 )*5 }):Play()
end

maybe the tweens were interfering with eachother? i made it into 1 tween, see if that fixes

[zinc pawn]

floatTween isnt defined

[ornate sonnet]

replace it with TInfo

[zinc pawn]

gotcha

nothing seems to be happening image is just static

[cursive delta]

** You are now Level 2! **

[ornate sonnet]

check output log

and potentially remove the "and image.Visible" part

[zinc pawn]

i removed that and same result

[ornate sonnet]

fixed, the O in original position was supposed to be lowercase

[cursive delta]

** You are now Level 4! **

[zinc pawn]

i fixed that myself so the same result as last time

whys this gotta be so difficult 😭

im gonan head to bed its 5 20am ill try again tomorrow iappreciate the help though

[thin flume]

I'd just use math.sin and RunService's PreRender which calls just before the frame is rendered.

the beauty of Sine waves is that they naturally repeat.

So just by giving os.clock() or other time functions, it's going to naturally bob.

If you multiply the time value before you put it into math.sin, it'll make the bobbing faster

Sine has a range of -1 to 1, so you'll have to multiply the result of math.sin that to get your desired range, like using scale you may want something much smaller, so you might multiply it by 0.05 or whatever.

[zinc pawn]

local image = script.Parent
local runService = game:GetService("RunService")
local tweenService = game:GetService("TweenService")

-- Animation properties
local floatHeight = 0.015 -- How high the image floats up and down (in scale)
local floatSpeed = 1.5 -- Controls the speed of the floating motion (higher = faster)
local tiltAngle = 5 -- The maximum angle the image tilts (in degrees)
local tiltTime = 5 -- The time it takes for one side-to-side tilt cycle

-- Store the image's original position
local originalPosition = image.Position

-- Define the rotation animation with TweenService
local tiltTween = TweenInfo.new(tiltTime, Enum.EasingStyle.Sine, Enum.EasingDirection.InOut, -1, true)
local tiltGoal = {Rotation = tiltAngle}

-- Start the rotation animation with TweenService
tweenService:Create(image, tiltTween, tiltGoal):Play()

-- This loop will run just before the frame is rendered
runService.RenderStepped:Connect(function(dt)
    -- Use a time function to create a naturally repeating wave
    local newY = originalPosition.Y.Scale + math.sin(os.clock() * floatSpeed) * floatHeight

    -- Update the image's position directly every frame
    image.Position = UDim2.new(originalPosition.X.Scale, 0, newY, 0)
end)