Timeline in UI

[Frigon_Tech]

Hello everyone,
I have a UI and I want to use a timeline for moving an image is there a way, plz help

[Mind-Brain]

Hey @Frigon_Tech!

So Widgets can’t use timelines. However, they can be ANIMATED to do exactly what you’re wanting to do! Check out this documentation and if you have any questions after you give it a shot, get back to us with some visuals and we’ll see if we can figure out any issues you might have!

Animation

[Frigon_Tech]

I think you didn’t get my point

I want to change the values in the timeline to move that spider logo from one option to another in runltime

[Mind-Brain]

Okay, yeah there was a bit of a misunderstanding! Typically the question people ask with widgets is about the timeline NODE on the event graph, which is unavailable in UI blueprints.

So you’ll right click and add two keyframes. One for the beginning, and one for the end point. Then on that keyframe, you need to go down the list on your window there beneath offsets -of which you’ll likely just change the Y value- and input the spot you want it to move to. Now if this is going to be for each option, you’re going to have to have a separate animation for each one, I believe. Alternatively, I think you can use “On Mouse Hover” on each button, and set the values for the keyframes of the animation on the fly, then have the spider image play that animation with it’s current location as start and the spot next to the button as end. Let me test some things, UMG is so different from standard blueprint. I’ll be back momentarily!

Edit: Okay I had an issue and am currently reinstalling UE5.1. Just to be clear… You need this to slide up and down, just instantly moving the spider to a spot next to the button would be unacceptable? Because it would be WAY easier and I could tell you how to do that without having to wait on the installation.

[Frigon_Tech]

You can take your time, but till then I’m just moving spider with some fixed animations. Initially it would be null, on pressed settings it slides next to settings button (plays a premade animation, there are total 5 of em’) and sets enumeration value to “settings”, after clicking on another option it checks the enumeration value and plays the same animation in reverse and goes to null and then goes to the next option. All animations are 0.5 seconds long

[Everynone]

You can do it with widget animations. Look into how repeaters work. You treat an animation progress as alpha, animation produces a curve, you pipe data in. It works exactly like a timeline, with curve graph an all.

Example:

Lerp in UMG (instead of animations)

To make it work with Tick, you’d need to get closer to this pseudoscript: [image] The working script for the Repeater could look like this: [image] Which produces this behaviour… …which you can feed any values now. Double click to create an event with the correct signature, you can then cut / paste it to another graph if that’s more convenient. [image] If the animation duration is not 1s, you need to translate it into the 0-1 range Lerp can use as alpha.

---

Alternatively, have the underlying actor drive the widget position with an actual timeline.

---

The thing is that for something that was demonstrated in the vid, I wouldn’t use an animation. A simple interpolation could work better and would be easier to set up.

Give the canvas slot a target location and have it arrive there during Tick. Much more natural and handles interrupts. You can hard-code locations or get them from widgets’ geometry.

If you use a timeline, you will need to faff around with TL playrate - TLs and Anims are time based and going from 1st menu option to the last takes more time than going from 1st to 2nd.

My advice is: let Tick interpolate it for you.

[Supremative]

I suggest the following solution:

1. Create a macro like the one below:
   

   

2. Use it:
   

Example:

My Products

[Frigon_Tech]

I did the same thing, thanks!