locomotivemtl / locomotive-scroll

πŸ›€ Detection of elements in viewport & smooth scrolling with parallax.

Home Page:https://locomotivemtl.github.io/locomotive-scroll

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

infinite looped animation apparition

Cliff-FK opened this issue Β· comments

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;
}
  • Windows 11
  • Latest Chrome version

Thank you πŸ‘Š