Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

restart a timeline with parameters updated on click

Recommended Posts

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.


Link to post
Share on other sites


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 XWKOvzB by akapowl (@akapowl) on CodePen




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



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.






  • Like 3
Link to post
Share on other sites

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

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


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

Link to post
Share on other sites


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.

  • Like 1
Link to post
Share on other sites

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? 

  • Like 1
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.