macl

thanks for the response. I've been bad about doing codepens in my posts here but in my defense on this thread the codebase I'd be extracting from is pretty complex with 3d wind simulation particle engines using GPGPU in threejs and webgl and it would have taken a while so I'm sorry and will try to do better moving forward Thanks for the response. you put me onto the utils.interpolate() which seemed to be only linear however I did dig deeper on this and found elsewhere on the forums that I can just use the "EasingEquation" as a function to return a scalar float which I can use as a multiplier for my 3d vector like so. this now works perfectly and is drawing awesome curved lines to show the animation paths of my particles let EasingEquation = CustomEase.create("custom", "M0,0 C0.33,0.024 0.396,1.258 0.658,1.15 0.777,1.1 0.804,1 1,1 "); let from = new THREE.Vector3(100,100,100); let to = new THREE.Vector3(10,10,10); let linevertices = []; //3d vector distance let distance = to.clone().sub(from); //loop steps for(let j = 0; j < 10; j ++) { //create a float to represent the eased value of the line let easingVal = EasingEquation(j*(1/lineVertices)); //create a new vector position and apply the float value as a multiplier let newpos = distance.clone().multiplyScalar(easingVal) //push the value into the vertex array linevertices.push(newpos.add(frompos)); } Thank you for your help!

Hi there, I have a custom ease function which I am using to animate particles within a 3d space. I am trying to draw a line between the start point and end point using three.js My easing equation looks like this let EasingEquation = CustomEase.create("custom", "M0,0 C0.33,0.024 0.396,1.258 0.658,1.15 0.777,1.1 0.804,1 1,1 "); currently I am able to create a straight line between the points with simple linear interpolation (lerping the 3d vector values) like this: let from = [100,100,100]; let to = [10,10,10]; let linevertices = []; let newpos = new THREE.Vector3(); for(let j = 0; j < 10; j ++) { //this loop runs 10 times for 10 points along the line to build linear geometry newpos.lerpVectors(new THREE.Vector3(from[0],from[1],from[2]),new THREE.Vector3(to[0],to[1],to[2]),(1.0/10)*j); linevertices.push(newpos); } //this sucessfully outputs the linearly interpolated values What I am trying to achieve is: instead of simply drawing a straight line with the linear interpolation, i would like to draw the animation path which is created using the custome EasingEquation but so far all I have managed to create is NaNs and Errors. Does anyone know how this might be achieved? Thanks very much

you nailed it first time this is perfect

Hi there, I want to use GSAP to sync animations with WebGL shaders and dom elements. In order to do so I would like to use easing equations to interpolate long floats between -1 to 1.0000 (for example) I have seen some examples using utils/interpolate to do simple lerps such as: however this does not address the question of easing functions (beyond lerps, perhaps even custom easing), as well as pause/resume/cancel/update and all the other good stuff you expect from GSAP. Is there a way to get all of this animation ability but simply when the target endpoint is a Float ? Thanks very much