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.