Moving a DIV off screen and back with a dynamic width.

[Anthony_McEvilly]

Hi, I am  wondering if their is a better/ dynamic way of doing this code.
(so I dont have to clear the timeline/call the script more than once.)
 

function buildA1Animation() {
    tl_headder.clear();
    let _w = document.getElementById("A1").offsetWidth;
  
    tl_headder.set("#A1", {x: "-" + _w });
    tl_headder.set("#A1", { opacity: 1 });
    tl_headder.to("#A1", { duration: 2, x: "+=" + _w });
    tl_headder.addPause(2)
    tl_headder.to("#A1", { duration: 2, x: "-" + _w });
    tl_headder.set("#A1", { opacity: 0 });

}

Something like this, So I only need to call "buildA1Animation();" Once 

function buildA1Animation() {
    tl_headder.set("#A1", {x: "-" + document.getElementById("A1").offsetWidth });
    tl_headder.set("#A1", { opacity: 1 });
    tl_headder.to("#A1", { duration: 2, x: "+=" + document.getElementById("A1").offsetWidth });
    tl_headder.addPause(2)
    tl_headder.to("#A1", { duration: 2, x: "-" + document.getElementById("A1").offsetWidth });
    tl_headder.set("#A1", { opacity: 0 });
}

Any help would be appreciated.
Thanks.

[elegantseagulls]

I think this would be a good use case for function-based values:

 

[Anthony_McEvilly]

I will give this a try thanks