monema Posted November 15, 2020 Share Posted November 15, 2020 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 comment Share on other sites More sharing options...
akapowl Posted November 15, 2020 Share Posted November 15, 2020 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 3 Link to comment Share on other sites More sharing options...
monema Posted November 15, 2020 Author Share Posted November 15, 2020 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. Link to comment Share on other sites More sharing options...
akapowl Posted November 15, 2020 Share Posted November 15, 2020 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. 1 Link to comment Share on other sites More sharing options...
GreenSock Posted November 15, 2020 Share Posted November 15, 2020 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? 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now