I am working on a CSS animation that I want to trigger when the page is visible in the browser. To achieve this, I am using a function that determines the position (referred to as "posish"). The animation should run once when the page comes into view or when posish is true (13900), and once again when posish becomes false.
However, my issue arises when both true and false conditions trigger the animation continuously while scrolling. I want the animation to only run once for each condition change before switching to the opposite state. Additionally, I have two classes applying the same animation, allowing me to add and remove them accordingly. I hope this explanation clarifies the situation! Below is the code snippet:
if (posish(13900)) {
$('.shadow').removeClass('shrink-2');
$('.shadow').addClass('shrink-1');
} else {
$('.shadow').removeClass('shrink-1');
$('.shadow').addClass('shrink-2');
}
Here is the code for the posish function
function posish(pos) {
pos-=19;
if (scrolled-viewport/4 < pos) {
return false;
} else if (scrolled > pos+viewport/2) {
return true;
} else {
return (scrolled-viewport/4-pos)/(viewport/4);
}
}
If you require any additional information, please let me know. Thank you for any assistance!