Interpolation aka LERPing functionality

[jssee]

Is there an easy way to lerp from -> to ? would be an awesome feature if not. Its a simple function, but I'm not sure where if the basicScroll accepts functions as object values.

for reference: https://codepen.io/rachsmith/pen/yYZapV

[electerious]

The timing property accepts a function you can use to change the interpolation between from and to: https://github.com/electerious/basicScroll#animation-timing

[jssee]

interesting, I didn't know this. could you perhaps tell me what this would look like? I tried to do this using the demo codependent but it doesnt seem to work as expected.

for example, given this basic leap function: const lerp = (min, max, t) => min * (1 - t) + max * t;

shouldn't this work in basic scroll? :

    props: {
      '--ty': {
        from: '0',
        to: '100px',
        timing: (t) => {
          lerp(0, 100, t)
        }
      }
    }
  }))

but for some reason it doesnt. What am I doing wrong?

[electerious]

basicScroll interpolates between from and to using the timing function. Your lerp function works, but it returns the interpolated values instead of just the timing. The timing function must return a value between 0 and 1.

With other words: The lerp happens in basicScroll, what you can specify using timing is just the timing.

Here're a few examples: https://gist.github.com/gre/1650294