Roblox studio How to make a frame bob up and down then land in a certain position

Question

I am trying to make a frame that bobs up and down when an event is triggered (already worked the event out and it works perfectly) however i have no idea how to work with frames and i would really like to make the frame do the effect mentioned above, an additional thing is can it then after another event is triggered slide down and off the screen?

Answer 1

Heyo, since you're trying to animate when a user hovers over a frame, follow these steps...

1) Create a ScreenGui in StarterGui.

2) Add a Frame to the ScreenGui, change its name to HoverFrame, we'll listen for mouse events on this to toggle the animation states.

3) Add another Frame to the ScreenGui, change its name to TweenFrame, add some stuff to it. Customize it, move it around, this is what we'll animate around the screen.

4) Add a LocalScript to the ScreenGui. Double click to open it, and add this to the script...

-- grab some UI Elements
local hoverFrame = script.Parent.HoverFrame
local testFrame = script.Parent.TweenFrame

-- make some variables
local TweenService = game:GetService("TweenService")
local currentTween
local onscreenPos = UDim2.new(0,0,0.443,0)
local offscreenPos = UDim2.new(0,0,0.914,0)

-- make a helper function for animating the frame
local function tweenToPos(thing, target)
    local tweenInfo = TweenInfo.new(0.5,  -- how long should this play (seconds)
        Enum.EasingStyle.Bounce, -- << This will give you the bounce in look
        Enum.EasingDirection.Out,
        0, -- number of times to repeat
        false, -- reverses
        0) -- how many seconds to delay the animation

    local propertyTable = {
        Position = target,
    }
    local tween = TweenService:Create(thing, tweenInfo, propertyTable)
    return tween
end

-- make another helper function for handling the animation tween
local function cancelTweenIfPlaying()
    if currentTween then
        if currentTween.PlaybackState == Enum.PlaybackState.Playing
            or currentTween.PlaybackState == Enum.PlaybackState.Delayed
            or currentTween.PlaybackState == Enum.PlaybackState.Paused then
            currentTween:Cancel()
        end
    end
end


-- listen for when the mouse hovers over the button, and animate the frame
hoverFrame.MouseEnter:Connect(function(x, y)
    -- if there is an animation playing, cancel it.
    cancelTweenIfPlaying()

    -- animate the frame to center stage
    currentTween = tweenToPos(testFrame, onscreenPos)
    currentTween:Play()
end)

-- listen for when the mouse stops hovering over the button
hoverFrame.MouseLeave:Connect(function(x, y)
    -- if the tween is already running, cancel it
    cancelTweenIfPlaying()

    -- animate to offscreen
    currentTween = tweenToPos(testFrame, offscreenPos)
    currentTween:Play()
end)

Hope this helped!

Answer 2

Heyo, the Developer Hub has great tutorials for working with with Frames and Guis! It sounds like TweenService is the thing that will solve your problem!

I don't know what signal you're tapping into but here's a simple example of the thing you want to do :

1) Create a ScreenGui in StarterGui.

2) Add a TextButton to the ScreenGui, we'll listen for clicks on this to toggle the frame open and close.

3) Add a Frame to the ScreenGui, add some stuff to it. Customize it, move it around.

4) Add a LocalScript to the ScreenGui. Add this to the script...

-- grab some UI Elements
local TweenService = game:GetService("TweenService")
local btn = script.Parent.TextButton
local testFrame = script.Parent.Frame

-- make some variables
local isVisible = false
local currentTween
local onscreenPos = testFrame.Position
local offscreenPos = UDim2.new(onscreenPos.X.Scale - 1,
    onscreenPos.X.Offset,
    onscreenPos.Y.Scale,
    onscreenPos.Y.Offset)

-- make a helper function for animating the frame
local function tweenToPos(thing, target)
    local tweenInfo = TweenInfo.new(0.5,  -- how long should this play (seconds)
        Enum.EasingStyle.Bounce, -- << This will give you the bounce in look
        Enum.EasingDirection.Out,
        0, -- number of times to repeat
        false, -- reverses
        0) -- how many seconds to delay the animation

    local propertyTable = {
        Position = target,
    }
    local tween = TweenService:Create(thing, tweenInfo, propertyTable)
    return tween
end

-- move the frame off-screen to begin with
testFrame.Position = offscreenPos

-- connect to the button and toggle between on/offscreen
btn.Activated:Connect(function(inputObj)
    -- if the tween is already running, cancel it
    if currentTween then
        if currentTween.PlaybackState == Enum.PlaybackState.Playing
            or currentTween.PlaybackState == Enum.PlaybackState.Delayed
            or currentTween.PlaybackState == Enum.PlaybackState.Paused then
            currentTween:Cancel()
        end
    end

    -- create a new tween to animate the frame
    if isVisible then
         currentTween = tweenToPos(testFrame, offscreenPos)
    else
         currentTween = tweenToPos(testFrame, onscreenPos)
    end

    -- play the animation
    currentTween:Play()

    -- toggle which tween to use next
    isVisible = not isVisible
end)

This should have a nice bounce effect for going in and out. You can swap out the btn.Activated:Connect with whatever signal you were listening to and this should work just fine.

Hope this helped!