I'm currently implementing a JS animation that changes an image's width and height according to scroll depth. I have created a linear function that generates the image height from the scroll depth. I want to change it to a non-linear function I can define using keyframes (as I am used to in video editing software).
I imagine a software where I can set keyframes for the animation duration from 0 to 1 like that:
0: 400px height
0.5: 400px height
0.75: 200px height
0.95 150px height
1: 150px height
It would be best if the library would allow for setting the function in between these keyframes – for example, if I would like to have an exponentially decreasing function between .5 and .75.
Is there a simple way to do something like that?