I have the following problem.
I am doing an appearance on the left animation.
And some elements on the page (regardless of whether they were in the viewport earlier or the page was just loaded) are in their standard position while they are outside the viewport, and some elements work correctly and wait their turn somewhere to the left of its standard position.
What is the problem: the second elements work correctly. But the first, at the moment of their appearance in the viewport, momentarily appear in their standard position, then abruptly fly away to the left, and begin to move out smoothly. And it looks ugly.
In the firebug, I see that the reason is that the problematic elements have zero values for the transform: translate3d(0px, 0px, 0px) all the time while they are out of viewport, and at the moment they appear in the viewport they sharply become transform: translate3d(-100px, 0px, 0px).
Healthy elements have a value transform: translate3d(-1500px, 0px, 0px) from the very beginning, and then gradually change it, moving towards a zero value.
In both cases, the settings are as follows:
data-when="enter" data-easing="linear" data-from="1" data-to="0" data-translatex="-100"
The only difference is that the problem is observed for small elements with a small value of data-translatex. But I'm not completely sure that the problem is this.
KitDevUA
commented
4 years ago
Hi
I have the following problem. I am doing an appearance on the left animation. And some elements on the page (regardless of whether they were in the viewport earlier or the page was just loaded) are in their standard position while they are outside the viewport, and some elements work correctly and wait their turn somewhere to the left of its standard position.
What is the problem: the second elements work correctly. But the first, at the moment of their appearance in the viewport, momentarily appear in their standard position, then abruptly fly away to the left, and begin to move out smoothly. And it looks ugly.
In the firebug, I see that the reason is that the problematic elements have zero values for the transform: translate3d(0px, 0px, 0px) all the time while they are out of viewport, and at the moment they appear in the viewport they sharply become transform: translate3d(-100px, 0px, 0px).
Healthy elements have a value transform: translate3d(-1500px, 0px, 0px) from the very beginning, and then gradually change it, moving towards a zero value.
In both cases, the settings are as follows:
data-when="enter" data-easing="linear" data-from="1" data-to="0" data-translatex="-100"The only difference is that the problem is observed for small elements with a small value of data-translatex. But I'm not completely sure that the problem is this.