UI UNICORN

this seems to work: var ten = {value: 0}; gsap.to((object.translateZ(ten.value), ten), { duration: 0.6, value: -10, onUpdate: function() { object.translateZ(ten.value); }, }); console.log(object.translateZ(ten.value));

Hi guys so I am looking for a way to animate translateZ ( i use gsap also but doesn't have to be gsap but probably prefered as the rest of my animations use it). **What i'm trying to do**..... so I am trying to have my character face the enemy character on a collision then rotate the player to the opposite rotation of the enemy so its basically facing the opposite way to the enemy character so the player can be repelled backwards when its hit from the enemy... **Where im up to....** so I have managed to do it all basically and it works just fine but without animation: ``` const dirToPlayer = this._FindPlayer(); const controlObject = object; const controlObject2 = this._target; const _R = controlObject.quaternion.clone(); const m = new THREE.Matrix4(); m.lookAt( new THREE.Vector3(0, 0, 0), dirToPlayer.negate(), new THREE.Vector3(0, 1, 0)); _R.setFromRotationMatrix(m); controlObject.quaternion.copy(_R); // console.log(dir); controlObject.translateZ( -10 ); now im not strong in three nor gsap so here's what i did to try and animate translateZ: let position = new THREE.Vector3(); object.getWorldPosition(position); position.add(new THREE.Vector3(0, 0, -10)); gsap.to(object.position, { duration: 0.6, z: position.z, onUpdate: function() { }, }); the above will work but only goes along the positive z axis so sometimes it gets pushed forwards rather than back ... So what i really need is to animate the TRUE translateZ property any idea's? thanks

So I am using gsap and three js my aim is to animate a light I have an array of colors i wish to use i have code set up so 1 of these colors are picked randomly now i can get it to pick random colors and repeat infinity ... this is what I want ..... now when I use onCompleteAll: change, this works all good and fine BUT it doesn't animate the colors it just "jumps" to the next color when the duration is done so no animation it just changes straight away when the time is up so I thought Oh well easy enough to fix i will use onComplete: change, instead now this never fires tho? so what ends up happening is the colors change and animate perfectly but only 2 of the colors from the array because the change(); function never gets fired so either does the new random value Math.floor(Math.random() * std.length) can anyone spot any obvious mistakes or know of any fixes? here is my code: var std = [new THREE.Color().setHex(0x009dff), new THREE.Color().setHex(0x001aff), new THREE.Color().setHex(0x4000ff), new THREE.Color().setHex(0x7300ff)]; var randomIndex, randomColor, tempColor, camlight3; randomIndex = Math.floor(Math.random() * std.length); randomColor = std[randomIndex]; tempColor = randomColor; // Three.js camera /* camlight3 = new THREE.PointLight(tempColor, 60, 80, 0.0); camlight3.power = 60; camlight3.position.x += 10; camlight3.position.y += 25; camlight3.position.z -= 120; this._camera.add(camlight3); */ gsap.to(camlight3.color, { duration: 2, r: tempColor.r, g: tempColor.g, b: tempColor.b, onCompleteAll: change, yoyo: true, repeat: -1, repeatRefresh: true, }); function change() { randomIndex = Math.floor(Math.random() * std.length); randomColor = std[randomIndex]; tempColor = randomColor; camlight3.color = tempColor; console.log(tempColor); } thanks for any help EDIT i should mention I have other animations doing on that use the oncomplete and onupdate if that matters non of the other though call change or are associated with the light

Hi so I am trying to get an on complete call back when the animation is finished but it just won't work when i do this: gsap.to(water.position, { duration: 1.6, y: -3, ease: Quad.easeOut, onComplete:console.log('finish'), }); the animation works perfectly but I never get the on complete call back ... something was telling me maybe the oncomplete and ease weren't in the right code block so I did this: gsap.to(water.position, { duration: 1.6, y: -3, }, { ease: Quad.easeOut, onComplete:console.log('finish'), }); funny enough the water moves to the position but it jumps and there isn't an animation but now i get a call back from onComplete? the synx must be wrong but i don't know where? thanks for reading

i've installed that plugin doesn't seem to change anything https://codepen.io/uiunicorn/pen/ZEeBQGz

Here's what i have now as you can see the model kinda floats up and down on Y and the auto rotate is completed screwed: https://codepen.io/uiunicorn/pen/ZEeBQGz

i tried: gsap.to(model5.position, { duration: 10, repeat: -1, ease:Linear.easeNone, motionPath: { path, // equivalent to path: path autoRotate: true, useRadians: true }, onUpdate: updateMesh }); seems i forgot .position now i have no errors but! now my model is gone lol pen: https://codepen.io/uiunicorn/pen/eYvBpaq

Updated post now the pen should only contain the gsap error in console

So i would like to animate this model along a path: https://codepen.io/uiunicorn/pen/abJmVwo but it doesn't seem to work and i am getting this in console: Uncaught TypeError: Cannot assign to read only property 'rotation' of object '#<Group>' at Plugin._setterPlain [as rSet] (gsap-core.js:3367) at PropTween.render [as r] (MotionPathPlugin.js:301) at Tween.render (gsap-core.js:3163) at _lazyRender (gsap-core.js:187) at _lazySafeRender (gsap-core.js:193) at Array.updateRoot (gsap-core.js:2564) at _tick (gsap-core.js:1252) and ideas of what the problem is? here is the original pen that works: (my pen uses modules): https://codepen.io/uiunicorn/pen/zYZoYpV