MrMateo7 Posted May 13, 2021 Share Posted May 13, 2021 Hi everyone! I was user of tween, there I can do something like this. Where e is the current value throung the time... so if I log in onUpdate the e value logs the exactly value in time. const n2bt = new TWEEN.Tween({x: 0}) .to({x:1}, 1650) .onUpdate((e) => { console.log(e.x) }) .start() } How can I do this with gsap? Link to comment Share on other sites More sharing options...
OSUblake Posted May 13, 2021 Share Posted May 13, 2021 Like this... const obj = { x: 0 }; gsap.to(obj, { x: 1, duration: 1.65, onUpdate() { console.log(obj.x); } }); Or this... const obj = { x: 0 }; gsap.to(obj, { x: 1, duration: 1.65, onUpdate() { console.log(this.targets()[0].x); } }); Note that's assuming the obj is not an element. 5 1 Link to comment Share on other sites More sharing options...
MrMateo7 Posted May 14, 2021 Author Share Posted May 14, 2021 This works, thanks! I'm doing an Threejs project, so I use a lot tween in the next way... Is possible to tween multiple values as an obj/array? I used to do this on tween, how to do this on gsap? const n3i = [ n3cameras[target].target.x, n3cameras[target].target.y, n3cameras[target].target.z, n3cameras[target].camera.x, n3cameras[target].camera.y, n3cameras[target].camera.z, camera.far ] const n3f = [ entrada.camera.target.x, entrada.camera.target.y, entrada.camera.target.z, entrada.camera.final.x, entrada.camera.final.y, entrada.camera.final.z, fars.n2 ] const n3Tween = new TWEEN.Tween(n3i) .to(n3f, 1500) .easing(TWEEN.Easing.Sinusoidal.InOut) .onUpdate((e) => { camera.position.x = e[3] camera.position.y = e[4] camera.position.z = e[5] camera.lookAt( e[0], e[1], e[2] ) camera.far = e[6] camera.updateProjectionMatrix() }) .start() Thanks for help! Link to comment Share on other sites More sharing options...
Solution OSUblake Posted May 14, 2021 Solution Share Posted May 14, 2021 Elements are little different because the value is part of the style object. GSAP has a helper to get those style values for you. https://greensock.com/docs/v3/GSAP/gsap.getProperty() gsap.to("#Poker_presentaciones", { duration: 5, x: 500, onUpdate() { console.log(gsap.getProperty(this.targets()[0], "x")); } }); Using the getter function. const element = document.querySelector("#Poker_presentaciones"); const getter = gsap.getProperty(element); gsap.to(element, { duration: 5, x: 500, onUpdate() { console.log(getter("x")); } }); If you're animating an array of values, this should work for you. gsap.to(n3i, { endArray: n3f, duration: 1.5, ease: "sine.inOut", onUpdate() { camera.position.x = n3i[3]; camera.position.y = n3i[4]; camera.position.z = n3i[5]; camera.lookAt(n3i[0], n3i[1], n3i[2]); camera.far = n3i[6]; camera.updateProjectionMatrix(); } }); 1 Link to comment Share on other sites More sharing options...
OSUblake Posted May 14, 2021 Share Posted May 14, 2021 13 minutes ago, OSUblake said: Elements are little different because the value is part of the style object. GSAP has a helper to get those style values for you. But you usually don't need to access those values because the CSSPlugin automatically applies them for you. tween.js const box = document.querySelector("#box"); const coords = {x: 0, y: 0}; const tween = new TWEEN.Tween(coords) .to({x: 300, y: 200}, 1000) .easing(TWEEN.Easing.Sinusoidal.Out) .onUpdate(() => { box.style.setProperty('transform', `translate(${coords.x}px, ${coords.y}px)`) }) .start(); gsap gsap.to("#box", { x: 300, y: 200, duration: 1, ease: "sine" }); 2 Link to comment Share on other sites More sharing options...
goooon Posted May 15, 2021 Share Posted May 15, 2021 var photoArr = gsap.utils.toArray('#section2 .photo'); gsap.to(photoArr, { x:`${(i-(photoArr.length-1))*100}%`}) I know it's not the same, but I was wondering how do I get the interaction value when I use an array in a Tween? I tried with i, but it always returns the value length. Link to comment Share on other sites More sharing options...
akapowl Posted May 15, 2021 Share Posted May 15, 2021 Hello there @goooon You are probably looking for function based values See the Pen vKpRWA by GreenSock (@GreenSock) on CodePen 4 Link to comment Share on other sites More sharing options...
goooon Posted May 16, 2021 Share Posted May 16, 2021 Thank you again!! @akapowl 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