I'm utilizing React and Bootstrap in this project.
Here's an overview of my code: I have an element with height set to 0, in rem. My goal is to make the height of this element increase as I scroll down the page, creating the illusion that it is appearing out of nowhere.
The handleWorksTitle function essentially takes the element and calculates the height it should have based on the position of its bottom rectangle within the window. Once the bottom rectangle comes into view, the "animation" starts by calculating the height as "by this point you must reach 100% of the target height". The target point is determined by the bottomPivot.current, which is a percentage of the screen height starting from the bottom.
The code encounters issues if the window height is too small or if the value of bottomPivot.current is too low. Essentially, if the distance between the bottom of the screen and the bottom pivot is too short, the code breaks.
This is how the function works:
function handleWorksTitle() {
//get the container that we will modify
const titleCont = document.querySelector("#works-title-cont");
// get the current position (bottom) of the container
const currY = titleCont.getBoundingClientRect().bottom;
// check if the containers bottom is within the screen boundaries
if(currY <= window.innerHeight) {
// calculate the target height based on screen breakpoint
const heightTarget = breakpointStateRef.current == breakpoints.lg ? worksTitleMovLg : (breakpointStateRef.current == breakpoints.md ? worksTitleMovMd : worksTitleMovSm);
// calculate the desired height (in percentage)
// bottomPivot.current is 30 in this example
const percentage = GetPerCurrToTarget_Bottom(currY, bottomPivot.current);
// convert the percentage to a real value (in css rem units)
const value = heightTarget / 100 * percentage;
// apply the height value
titleCont.style.height = `${value <= heightTarget ? value : heightTarget }rem`;
}
};
This function is triggered by the window's "scroll" event:
// added line inside useEffect([])
window.addEventListener("scroll", handleWorksTitle);
Here is the GetPerCurrToTarget_Bottom function:
export function GetPerCurrToTarget_Bottom(currLoc, targetLoc) {
const rangeVal = window.innerHeight - targetLoc;
const valInRange = window.innerHeight - currLoc;
const percentage = (100 / rangeVal) * valInRange;
return percentage;
}
The code functions correctly on most standard sized screens, but it starts breaking as the screen height decreases without any apparent reason. After reaching a certain height, the element's Y value begins to oscillate between two numbers, causing the element to jump back and forth on the screen.
Here's part of my JSX and some CSS for reference:
<div className="col">
<div id="works-title-cont">
<p id="works-title" className={CalculateWorksTitleSize(breakpointState)}>Works</p>
</div>
</div>
/* styles specific to the Works title text */
#works-title-cont {
display: flex;
justify-content: center;
width: 100%;
height: 0rem; /* manipulated dynamically in code */
max-height: 100%;
overflow-y: hidden;
}
Do you have any insights or suggestions?
Thank you!
I expected the code to work consistently regardless of the screen's height or the value of bottomPivot.current (which also causes the code to break when too low).