How to update position X (to) after animation complete?

[lwmirkk]

Hi!

 

I tryed some things, but the X position never update, just a example:

 

animatedHeadline = gsap.fromTo(element, {x:0}, {
	    x: getDinamicX(), //normal value
		ease: 'none',
	    duration: getDinamicDuration(),
		onComplete: function(){
			console.log('Animation finished!');
				animatedHeadline.progress(0);
				animatedHeadline.vars.x = getDinamicX();//this not work - tryed other ways and nothing worked yet
				animatedHeadline.duration(getDinamicDuration());//this seems to be work
				animatedHeadline.invalidate();
				animatedHeadline.restart();
		}
	});

 

I need to update the X destination because the element width change after each animation complete.

 

Thanks a lot!

 

[GreenSock]

It's tough to diagnose without a minimal demo (can you provide a CodePen?) but I think you're overcomplicating things a bit. Why not use a function-based value, like x: getDinamicX (don't put () at the end which just invokes it immediately). And maybe you could repeat: -1 and repeatRefresh: true? Honestly, though, I'd probably just use a recursive function like: 

function animateHeadline() {
  gsap.fromTo(element, {x:0}, {
	    x: getDinamicX,
	    ease: 'none',
	    duration: getDinamicDuration(),
	    onComplete: animateHeadline
	});
};
animateHeadline();

Does that give you what you wanted? 

[lwmirkk]

animatedHeadline = gsap.timeline().fromTo(element, {x:0}, {
	    x: getDinamicWidth, //normal value
		ease: 'none',
		repeatRefresh: true,
	    duration: getHeadlineDuration(),
		onComplete: function(){
			console.log('Animation finished!');
				animatedHeadline.duration(getDinamicDuration());
				animatedHeadline.restart();
		}
	});

Unfortunely when calling the .restart(), the "getDinamicWidth" is not called again, so "repeatRefresh : true" only works if the timeline is setted to repeat, correct? Won`t have effect with .restart() ?

 

Using like your example will work, but its some... overload/overhead, not? Because it will create the timeline/tween again from zero...

I can not set "repeat:-1", because before the .restart(), when the Animation is finished I make some changes to the element before I can animate it again and these changes have effect on final destination (x) because some other widths, this is why I have the "getDinamicWidth()" function.

 

In last case, your example is the way, but I had thought that I could change the target X position before asking the timeline to restart, as I am doing with its duration, so I would avoid re-creating the timeline every time I iteration (your example).

 

Thanks for the exaplantion and example

 

[GSAP Helper]

Without a minimal demo, it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependencies as possible. Start minimal and then incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen.

that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import GSAP as shown in the Install Helper in our Learning Center : 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. ✅

[lwmirkk]

Hi!

 

 

I just figured it out...

x : '-100%'

 

 

when calling .restart()

it will always get the current element width... not the initial one, even if now the element is bigger or thinner, correct?

I imagined that will store internally the element width as a static pre-calculated value...

 

Now I think this will works as expected and now I can change the HTML in element after the loop and later repeat the timeline without re-creating it...

 

Thanks a lot!

Edited September 13, 2025 by lwmirkk
mistake...

[GreenSock]

11 hours ago, lwmirkk said:

it will always get the current element width... not the initial one, even if now the element is bigger or thinner, correct?

I imagined that will store internally the element width as a static pre-calculated value...

It doesn't store it internally, no - it simply animates the transform to a translateX of -100% and that's how percentage-based transforms work in browsers; they're based on the width of the element itself. 

 

You could animate to xPercent: 100 which would do essentially the same thing. And yes, repeatRefresh is only for animations that have a repeat value which isn't necessary if you're using a recursive function. 

 

Maybe you're trying to do something like this?: 

See the Pen qEOzPXw?editors=1010 by GreenSock (@GreenSock) on CodePen.

[lwmirkk]

24 minutes ago, GreenSock said:

It doesn't store it internally, no - it simply animates the transform to a translateX of -100% and that's how percentage-based transforms work in browsers; they're based on the width of the element itself. 

 

You could animate to xPercent: 100 which would do essentially the same thing. And yes, repeatRefresh is only for animations that have a repeat value which isn't necessary if you're using a recursive function. 

 

Maybe you're trying to do something like this?: 

 

Excelent explanation and clean example, thanks a lot! 👏