Vector3.lerp causes gameobject to move thousands of pixels away from where it's mean to go

I am creating a sport training app and I’m trying to create a box that moves behind the text of whatever mode clicked. It is a 2d project but I watched a tutorial and they used Vector3.lerp. I’m not sure whether this is right?

My questions is that when I tell the box to Vector3.lerp to (-249, 97, 0) it goes to (-24880.36, 9692.35, -8992.907).

The box is a sprite imported from photoshop as an image in a canvas.

Here is my code. I am just trying to get the lerp to work before incorporating button triggers.

Any help would be amazing.

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class ButtonHighlight : MonoBehaviour
{
    private Vector3 endPosition = new Vector3(-249f, 97f, 0f);
    private Vector3 startposition;
    private float desiredDuration = 3f;
    private float elapsedTime;

    // Start is called before the first frame update
    void Start()
    {
        startposition = transform.position;
    }

    // Update is called once per frame
    void Update()
    {
        elapsedTime += Time.deltaTime;
        float percentageComplete = elapsedTime / desiredDuration;

        transform.position = Vector3.Lerp(startposition, endPosition, Mathf.SmoothStep(0, 1, percentageComplete));
    }
}

@unity_KSBOMhWytx1Guw

I copied your code and attached it to an Image UI component to see what would happen. The image does actually move to (-249, 97, 0), but this is a world coordinate because you are modifying transform.position. UI elements all have a RectTransform component, which you should use instead. These use screen coordinates rather than world coordinates, which will give you the movement you’re trying to acheive. The anchoredPosition property used in the code below is in pixel units relative to the position of the anchor for your UI element.


The anchor is shown by this symbol: 194575-anchor.png
The documentation on RectTransform is here.


 using UnityEngine;
 
 public class ButtonHighlight : MonoBehaviour
 {
     [SerializeField] private RectTransform _transform;
     
     private Vector2 endPosition = new Vector2(-249f, 97f);
     private Vector2 startposition;
     private float desiredDuration = 3f;
     private float elapsedTime;
 
     void Awake()
     {
         if (!_transform)
         {
             Debug.LogWarning($"Don't forget to assign field {nameof(_transform)} on the {nameof(ButtonHighlight)} component for {gameObject.name}");
             if(!TryGetComponent(out _transform))
                _transform = gameObject.AddComponent<RectTransform>();
         }
         startposition = _transform.anchoredPosition;
     }
 
     // Update is called once per frame
     void Update()
     {
         elapsedTime += Time.deltaTime;
         float percentageComplete = elapsedTime / desiredDuration;
 
         _transform.anchoredPosition = Vector2.Lerp(startposition, endPosition, Mathf.SmoothStep(0, 1, percentageComplete));
        Debug.Log(_transform.anchoredPosition);
     }
 }