restart a timeline with parameters updated on click

[monema]

Ok hi evryone...i'm definetly a "nubbio" as we say in Italian.

I've red almost avery post about the subject...so i think i'm missing something big here...
Aniway i'm trying to do a very simple thing:
 

I have an animation that uses some .getBoundingClientRect in order to get some positioning parameter.

 

Now by click on a button i need to update the position on the animation. just because the object may need to change position.
 

the animation is:
xpos is the variable

 

   let xPos = document.querySelector('.we h1').getBoundingClientRect().left 

 

const animazioneImgBack = gsap.timeline({ paused: true, xPos: xPos });

    animazioneImgBack.fromTo(wrapper, { backgroundColor: "#8099b7" }, { backgroundColor: "#EFDB59" }, console.log('test', xPos))

    animazioneImgBack.to(".backtop", { delay: 0.3, duration: 0.3, autoAlpha: 0.4 })

    animazioneImgBack.to(".backtop", { width: 500, height: 500, duration: 0.5, left: (xPos + 350),autoAlpha: 1,  ease: "power3.out" })

    animazioneImgBack.to(".we>h1", { color: "rgb(247 228 99)" })

    animazioneImgBack.to(".backtop", { width: 400, height: 400, delay: 0.3, left: (xPos - 80), borderRadius: "50%", ease: "back.out(1.7)" })

    animazioneImgBack.fromTo(".textinner.ecommerce", { autoAlpha: 0 }, { autoAlpha: 1, ease: "back.out(1.7)" })

    animazioneImgBack.to(".backtexttop", { duration: 1, x: 0, autoAlpha: 1, ease: "back.out(1.7)" })

 

 

 

the point is: How can i update the xPos variable by clickin on a button?

 

As you can see i console.log in the first line of the animation. I discovered that the value is acquired at runtime and never updated.

the timeline is not going to update the value when i play the animation. It's keepin the same value.

 

I hope this make a sort of sense. Thank ou so much.

 

[akapowl]

 

Hey @monema - welcome to the forums.

 

You could for example use function-based values for your tween/timeline for this, combined with .invalidate() and .restart() instead of .play()  on click of the button, something like this maybe:

 

See the Pen 8b02e72665ae5ff65b62892cb93136c3 by akapowl (@akapowl) on CodePen

 

 

 

You find more info on .invalidate() in the docs:

https://greensock.com/docs/v3/GSAP/Timeline/invalidate()

 

As the example in the docs (and the commented out part of the timeline in my demo here) shows, depending on the exact outcome you wish, your tween might even work without function based values.

 

Hope this helps.

 

And just for future reference:

If you need more help with your specific setup, please make a minimal demo - it always makes it easier for others to help you.

 

Cheers,

Paul

 

 

[monema]

ok the problem was the anonfunc. to return the value updated...

why do i need to do this? Just curiosity...

Aniway, GRAZIE MILLE!!!

is exactly what i was looking for. Thank you so much.

[akapowl]

 

I'm probably not the one you should ask about the why, but if I am not totally mistaken, it is because for performance reasons, GSAP records the timeline when it is created with the values you feed it with, so it can instantly fire away, when you need it to, without having to calculate things over and over again.

 

Thus, if you want to change values on the fly, you'd have to communicate that in some sort of way, and that is, where the function-based values come into play.

[GreenSock]

Yep, @akapowl is correct - GSAP is built for optimal performance, so the first time a tween renders it records the starting and ending values so that it can very quickly interpolate between them over the course of the tween. It'd be horribly inefficient if it constantly had to check the starting values over and over again on every tick. The invalidate() method flushes out the starting values so that it re-records them on the next render (which is almost never needed, hence the default behavior). Does that clear things up?