Can anyone explain why this home page, the scroll reveal gets slowly worse as worse as you scroll.
Things at the bottom are easily on the screen but do not show until you scroll a bit further. While ones at the top work perfect/better. Here are the classes I set up:
ScrollReveal().reveal(".content-scroll-delay1", {
delay: 200,
duration: 750,
distance: "30px",
reset: false,
});
ScrollReveal().reveal(".content-scroll-left", {
delay: 500,
duration: 750,
distance: "30px",
reset: false,
origin: "left",
});
ScrollReveal().reveal(".content-scroll-right", {
delay: 500,
duration: 750,
distance: "30px",
reset: false,
origin: "right",
});
ScrollReveal().reveal(".content-scroll-fade-up", {
delay: 0,
duration: 2000,
scale: 0.7,
reset: false,
});
ScrollReveal().reveal(".content-scroll-home-content", {
delay: 700,
duration: 3000,
scale: 0,
reset: false,
});
Seems like a simply implementation but I can't figure this out.
Here is ScrollReveal starting defaults:
var ScrollReveal = (function () {
"use strict";
var r = {
delay: 0,
distance: "0",
duration: 600,
easing: "cubic-bezier(0.5, 0, 0, 1)",
interval: 0,
opacity: 0,
origin: "bottom",
rotate: { x: 0, y: 0, z: 0 },
scale: 1,
cleanup: !1,
container: document.documentElement,
desktop: !0,
mobile: !0,
reset: !1,
useDelay: "always",
viewFactor: 0,
viewOffset: { top: 0, right: 0, bottom: 0, left: 0 },
afterReset: function () {},
afterReveal: function () {},
beforeReset: function () {},
beforeReveal: function () {},
};
......
THanks
Probably not worth a full answer but I tracked it down to this one CSS value....
.imageContent .practiceImage {
width: 100%;
border-radius: 10px;
}
changing it to max-width:100%
fixes it. No idea why, also don't care.
Thanks for the help. That was a really strange one.