jlmakes / scrollreveal

Animate elements as they scroll into view.
https://scrollrevealjs.org/
22.3k stars 2.26k forks source link

Footer won't load #544

Open niftyphil opened 2 years ago

niftyphil commented 2 years ago

I wanted to have a very subtle entrance effect on all elements, and this solved it perfectly. One minor issue I have though, is that it only loads the footer about 25% of the time. The rest of the time the newsletter block in my footer just doesn't load. Is there any way I can exclude a single element, rather than having to manually add each element type on a pretty big site? I currently have it set to affect .sqs-block-content, .Index-gallery-item-content, and would like to exclude .newsletter-block

As it stands, I have this in the header code:

<script src="https://unpkg.com/scrollreveal@4"></script>
<script>
window.sr = ScrollReveal();
</script>
<style>
/*ensure elements load hidden before scrollreveal runs */
  html.sr body:not(.sqs-edit-mode).sqs-block-content, html.sr body:not(.sqs-edit-mode).Index-gallery-item-content {
    visibility: hidden;
  }
</style>

And this in the footer:

<script>
  sr.reveal ('.sqs-block-content, .Index-gallery-item-content, .Index-gallery-item-image ', {
    origin: 'bottom',
    distance: '50px',
    duration: 1000,
    easing: 'ease',
    mobile: true,
    reset: false,
    viewFactor: .2,
  });
</script>

Can anybody help with this? It's probably a pretty simple fix but I'm still fairly new to some aspects of coding

niftyphil commented 2 years ago

I just discovered that the footer content is there, it just isn't visible...I have a newsletter form in the footer, and the autofill tries to autofill, and my mouse turns into a text cursor where the text boxes should be, I just can't see them...