locomotivemtl / locomotive-scroll

🛤 Detection of elements in viewport & smooth scrolling with parallax.
https://locomotivemtl.github.io/locomotive-scroll
MIT License
7.98k stars 1.12k forks source link

infinite looped animation apparition #530

Open Cliff-FK opened 1 year ago

Cliff-FK commented 1 year ago

Hello 👋 There seems to be a problem with certain scroll levels when you animate elements vertically to make them appear: https://sharing.clickup.com/clip/p/t20411414/088df0cf-42e4-4c43-9ea1-5a7675b38766/screen-recording-2023-11-21-11%3A32.webm

To Reproduce DOM element with attrs: data-scroll data-scroll-repeat data-scroll-class="u-fade-down"

Custom CSS (similar at AOS.js):

[data-scroll-class^=u-fade] {
    transition-timing-function: 400ms;
    transition-duration: cubic-bezier(0.165, 0.84, 0.44, 1);
    transition-property: opacity, transform;
    opacity: 0.005;
}
[data-scroll-class^=u-fade-down] {
    transform: translate3d(0, -6.25rem, 0);
}
[data-scroll-class^=u-fade][class*=u-fade] {
    transform: translateZ(0);
    opacity: 1;
}

Thank you 👊