I am learning how this water bottle slider Codepen by Chris Gannon works. I created my own SVGs and tried animating it myself and I was able to replicate it fairly well.
However, there is a part of code that I still do not understand. They all have similar pattern and I think I know what they do, but I can't wrap my head around how they work.
TweenMax.to(this.follower, 1, {
x:'+=1',
repeat:-1,
modifiers:{
x: (x, target) => {
followerVX += (this.bottle._gsTransform.x - this.follower.x) * 0.08;
followerVX *= 0.79;
return this.follower.x + followerVX;
}
}
})
TweenMax.to(this.liquidFollower, 1, {
x:'+=1',
repeat:-1,
modifiers:{
x: (x, target) => {
liquidFollowerY += (this.bottle._gsTransform.x - this.liquidFollower.x) * 0.8;
liquidFollowerY *= 0.7;
return this.follower.x + liquidFollowerY;
}
}
})
TweenMax.to(this.bottleLiquid, 1, {
rotation: '+=0',
repeat: -1,
modifiers: {
rotation: (rotation, target) => {
let val = rotation + liquidFollowerY * 0.5;
return val
}
}
})
I think this code above rotates the water level based on how fast the dragger goes. If I drag it super quickly, it will create higher rotation. If I drag it verrryyy slowly, it would hardly make any rotation.
Therefore, the rotation value depends on draggable speed.
However, I can't figure out why the code above helps us to find draggable speed. Is this a somewhat common pattern to find draggable speed? If not, is there a more convenient way to find how fast a user drags an object/ what would you do to find how fast a draggable object is being dragged? I have checked out both draggable and modifiers plugin, but didn't find any clue.