ScrollReveal gets more and more delayed as you scroll

Question

Can anyone explain why this home page, the scroll reveal gets slowly worse as worse as you scroll.

https://www.zedmed.com.au/

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

you delay's are increasing ... so ... naturally the delay before revealing is longer for the longer delays ... it's kind of obvious ... 800 is 4 times longer than 200 — Bravo, May 03 '22 at 04:26
The main classes are content-scroll-left/right. Delay would still reveal the content if I stopped scrolling (After certain time) but the scroll trigger point is in fact what is shifting further and further away. — MomasVII, May 03 '22 at 04:29
But that's in seconds. I could wait 10 minutes and the content would not load. The issue is the trigger position. — MomasVII, May 03 '22 at 04:35
if `delay:700` means you're delaying 11 minutes and 40 seconds - then, yes, you could wait 10 minutes and the content would not load for another 1 minute 40 seconds - try not to delay that long if that's the issue - of course, you're wrong about the delay being in seconds — Bravo, May 03 '22 at 04:42
`The number passed to options.delay is a measure of time in milliseconds.` Please stop. It is not delay. — MomasVII, May 03 '22 at 04:48
The issue is with the triggering, not the delay. Have you passed any options to the constructor, to overwrite the default values? Like: `ScollReveal({someOptopm: 'someVaue'});` — André Pereira, May 03 '22 at 05:08
@MomasVII - you just said it was seconds, and it is `delay` ... since that's the name of the property ... quite clearly `delay:700` means a delay of 700 miliseconds - sure, it's not the delay you're talking about, but your question is vague - you said the bottom sections are delayed - they aren't, it's the trigger not happening at the right scroll depth - that's NOTHING to do with delay - which is what you've stated in your question. — Bravo, May 03 '22 at 05:12
Seem like to you didn't look at the website example issue at all. — MomasVII, May 03 '22 at 05:17
Couldn't find the cause, but running `ScrollReveal().sync();` in the middle of the page solves the problem for the rest of the page. I hope someone can discover the issue. Good luck :) — André Pereira, May 03 '22 at 05:24

score 0 · Accepted Answer · answered May 03 '22 at 05:57

0

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.

answered May 03 '22 at 05:57

MomasVII

4,641
5
35
52

What does this mean? How can .practiceImage cause an issue in ScrollReveal? – Akshay K Nair Aug 17 '22 at 12:13

ScrollReveal gets more and more delayed as you scroll

1 Answers1