Moving multiple buttons smoothly together using blueprints

Code is here: GitHub: Let’s build from here · GitHub
pls if you fixed it do a pull request.
I have 5 buttons on the screen. I want to move all of them smoothly 200 units in the X axis, so all of them advance one block

I created the widget and added all of the buttons in an array as a canvas slot.
I used a timeline, a lerp function, and a foreach loop to create the animation effect. The problem I’m having with the animation code I wrote is that it moves all the buttons to the 200 axis on the canvas instead of moving all of them 200 unit away from their position.

I would put them in a horizontal box so you don’t have to bother working with the individual buttons.
Then to move it, make an animation track and key frame it.

I want to make it a loop so those have to be seprated

I am not sure if I totally understand what is the end goal here. Do you want to move all five buttons on the screen by 200 on x? Something like this?

Just do what @IndieGameCove suggested.

Wrap your buttons in Horizontal Box and a size box then add animation, select the Size Box and hit the key frame button. After that set the end time for animation, then change the position of the size box to 200 and hit the add key frame icon.


yes, I want to move them by 200 on x. That’s it, but I have to do it using a blueprint for the purpose of making a loop scroll bar

when you say loop i’m not sure if you mean you want the animation to loop or if you are referring wanting the for each loop. either way i’m not sure why a horizontal box would be an issue.

since i’m not sure what you’re going for I’ll just point out some things more generally. first, your loop is running again and again every time the timeline updates. second, the get position node is returning whatever value the button is currently at, and since that location is moving that value is not returning the initial location of the buttons.
maybe something like running the loop prior to the timeline and setting the position to a variable would work. i’m not sure that the would move them together or if it would move it one after the next.

Sorry for the inconvenience. The purpose of this widget is to make loop scroll bar so when the items move to the right, the last button will spawn in the first column to create the illusion of a loop

So I come up with this but there is another issue. Only the last button moves. The others stay firm. I did some debugging and noticed the timeline skips the first 4 items and only updates the last item. What could be the issue?

Ultimately I want to create this

Ultimately I want to create this YouTube

Yeah I got that. I’m trying to make something like this, I let you know if I come up with anything.

Have you had any success with this yet? I been sitting on this for better part of the day and so far the only thing I can do is move buttons from left to right, but it’s instant no animations. I would post a video I have made but youtube seems to be down.

Not yet, I haven’t been working on it. I had an issue with the timeline. Are you interested in this? If you interested just follow the repository. I’ll update the code. GitHub: Let’s build from here · GitHub

I’m gonna try the pure animation method. Maybe it worked

Here is the video, couldn’t upload it earlier, problems on youtube.

Right now I’m working on a different approach with animations but I don’t think it will work all the way. I will play with this tomorrow again.

I’m not sure how to do that offhand.
you can use clipping: clip to bounds, to make the buttons disappear on the edges.

idk, Maybe if you mapped the positions into an array it would return all the positions??

I already did this, animations are the hard part

not sure how that helps

I uploaded the code here. Maybe you can figure out what the issue is