Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • Content Count

  • Joined

  • Last visited

Community Reputation

2 Newbie

About 321dev

  • Rank
  1. I'm using gsap.interpolate to perform some kind of keyframe-animation. But gsap.interpolate interpolates linearly between the values, based on their position in the array. E.g: gsap.utils.interpolate([0, 50, 100], 0.5); // 50 I'd like to place the keyframes at specific positions, e.g. i want to map: 0 -> 0 0.3 -> 50 1 -> 100 Is there an easy way to achieve this?
  2. The purpose is to enable gsap.utils.interpolate() to interpolate values it can't interpolate (correctly) otherwise, in my example a THREE.Quaternion
  3. So this would first interpolate between items 0 and 1, then 1 and 2, and so on. That's what i planed to do, but i wasn't sure if the transitions were smooth (enough). I'll try it out tomorrow. BTW: Maybe gsap.utils.interpolate() could be expanded so that you could pass a custom function that interpolates between two elements? Thanks a lot for your time and effort!
  4. In an ideal world, i 'd like to use gsap.utils.interpolate like this: let q1 = new THREE.Quaternion() q1.setFromEuler(new THREE.Euler( THREE.Math.degToRad(0), THREE.Math.degToRad(45), THREE.Math.degToRad(0), 'XYZ' )) let q2 = new THREE.Quaternion() q2.setFromEuler(new THREE.Euler( THREE.Math.degToRad(45), THREE.Math.degToRad(0), THREE.Math.degToRad(90), 'XYZ' )) let q3 = new THREE.Quaternion() q3.setFromEuler(new THREE.Euler( THREE.Math.degToRad(90), THREE.Math.degToRad(90), THREE.Math.degToRad(90), 'XYZ' )) var interp = gsap.utils.interpolate([q1, q2, q3]); let qx = interp(0.3
  5. Yes, thanks. But as i mentioned in my OP, i know how to interpolate between two Quaternions using three.js method. But i need to interpolate between more values, but i don't think just interpolating between 0 and 1, then 1 and 2, etc. will give a smooth result. But maybe i should try it out and check how bad it looks.
  6. That was just an example showing why the "normal" interpolation doesn't work with angles. I don't have code for this.
  7. The modifiers might work, if i knew how to interpolate quaternions at low level - which i don't. For now, i'll try to use "normal" Euler rotations like i found here: https://codepen.io/ste-vg/pen/GRooLza and see how it goes. Thanks for your help.
  8. Thanks for your response, but unfortunately that does not help. Interpolating any linear values (like a 3D position) with GSAP is not a problem, but Quaternions can't be interpolated that way. The interpolating code must be aware of the meaning of the values. E.g. when you wanted to interpolate a rotation in degrees from 350 to 10, the code should go from 350...359..0...10, instead of going backwards from 350 to 10.
  9. There are quite a few posts about this, but they're many years old, and many of them mention a plugin that can handle quaternions. What's the state today? Can GSAP tween quaternions, or do we still need a plugin? Specifically, i'd like to use interpolate() with three.js quaternions. (I know about three.js quaternion.slerp, but i need to interpolate over a dynamic number of values.)
  10. It's a little hard to explain in words what i want to achieve. When you look at the codepen, you see that the animation starts after scrolling down 100 pixels. I want something like a "deadzone" for the scrolltrigger (what "pin" does when using scrub based animations). When the user scrolls down, nothing should happen in the beginning. After scrolling down 100 pixel the animation should trigger. The content itself should still not scroll. After scrolling down 100 more pixels, the page should start scrolling normally. I hope this was somewhat u
  11. Hi all, i'm experimenting with the combination vue + aframe + gsap + scrolltrigger. I built a small demo that rotates a cube based on the scroll position. This works fine. But when i set pin=true, somehow the a-frame scene gets messed up (several objects get copied and multiplied). The two added screenshots show the "bad" and the "good" version of the object structure. (Unfortunately they are directly on top of each other, so they appear as one. Each image starts with <div class="spacer") I have no idea what's going on, or what 'pin' does in the backgroun