Upon reviewing your blitz, I noticed a recurring issue that I have encountered multiple times. The problem lies in how you are calculating values on a per-frame basis. In simpler terms:
Avoid basing your calculations on values that will be altered by the outcome.
More specifically, in your scenario, the challenge arises from the correlation between rect.bot and this.height. With each invocation of your onscroll function, the height of your section is adjusted. However, this modification impacts the value of rect.bot as well. Consequently, during the next scroll event, the height gets altered from a different starting point, leading to the oscillation you observed.
To tackle this issue, ensure that all your calculations rely on values unaffected by the result. In this case, I suggest utilizing rect.top, which remains constant regardless of the section's height.
Additionally, incorporating interpolation grants you more flexibility. The key is to determine:
- When should the reveal process begin relative to the window height (essentially,
this.height = 0)
- At what point should the section be entirely revealed in relation to the window height (
this.height = offsetHeight)
- What method should be employed for interpolation? (linear interpolation is the simplest)
In my revised version of your blitz, I have included the clamp and invlerp functions sourced from this link:
You can explore these interpolation functions and their applications through the provided resource.
I have introduced two variables named "startPercentage" and "endPercentage", reflecting the value of rect.top as a percentage of the window's innerHeight. Experiment with these parameters to achieve various speeds or qualities of parallax, tailoring the effect to your preferences.
Here is the modified version:
https://stackblitz.com/edit/angular-lcyc4q?file=src%2Fapp%2Fapp.component.ts
If inclined, delve into alternate interpolation functions to explore ease-in and ease-out dynamics for diverse effects.