0

I'm having issues with my InsersectionObserver code: The content of the .timeline-graphs class should be appearing from bellow (@keyframes animation in CSS), but only when the the viewport intersects with it, thanks to InsersectionObserver (JS). Simple enough, but I can't manage it to work. This is the code:

HTML, CSS and JAVASCRIPT:

const elementsToExpand = document.querySelectorAll('.timeline-graphs');

let expansionObserver = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.intersectionRatio > 0) {
      entry.target.classList.add('isVisible');
    } else {
      entry.target.classList.remove('isVisible');
    }
  });

});

elementsToExpand.forEach((element) => {
  expansionObserver.observe(element);
});
.timeline-graphs {
    display: flex;
    flex-flow: row no-wrap;
    justify-content: center;
    text-align: center;
    align-items: center;

}

.timeline-graphs.isVisible {
    
    animation-name: fadeIn;
    animation-duration: 2.5s;
    animation-fill-mode: both; 
}

@keyframes fadeIn {

    0% {
    opacity: 0;
    
    -webkit-transform: translate3d(0,40%,0);
    transform: translate3d(0,40%,0);
    }

    100% {
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    }
}
<section class="timeline-graph-section">
    <article class="timeline-graphs">
        <h1>This is a title</h1>
    </article>
</section>

I appreciate any support on this!

Ali Esmailpor
  • 1,209
  • 3
  • 11
  • 22
JS3DX
  • 11
  • 2
  • This is working for me. Can you elaborate more on what is going wrong? Is it triggering the animation too early? – rguttersohn Feb 12 '21 at 13:54
  • The code is exactly the same... but here it does work! Does this code inputs in stackoverflow run anything else than html, css, and vanilla js? Maybe jQuery? Or Bootstrap? I've tried in Firefox and Edge, but it's the exact same simple text wiithout animation. – JS3DX Feb 12 '21 at 20:24
  • Maybe something related to the script? I've tested with a few console.log outside the code ('Hello World!') and totally logs the text, but inside the "if... else" statements it just doesn't read those same console.log tests. There aren't even any error messages! – JS3DX Feb 12 '21 at 20:32
  • Any luck yet? I ran it locally and it worked. Is the class being added upon observation? – rguttersohn Feb 12 '21 at 21:33

2 Answers2

0

As per your current implementation, the viewport is always intersecting with your timeline-graphs element.

To mimic proper working add a good amount of margin-top to this element and try to bring the timeline-graphs in and out of the view via scroll.

Lakshya Thakur
  • 8,030
  • 1
  • 12
  • 39
  • You are totally right, I forgot to push away the element away from the viewport... but besides that, the code still doesn't work for me and I can't figure out why. I've tried on Edge and Firefox, but the text just stays there, without any kind of animation no matter where the viewport is. I've tried a few tests placing cosole.logs inside the if/else statements to see what's the problem... and not even those console.log get read by the browser. Any console.log outside the main Javascript code work, but not inside it. – JS3DX Feb 12 '21 at 20:44
  • Did you check for the support for your browser versions ? You can refer this - https://caniuse.com/?search=intersection%20observer Specifically intersection ratio - https://caniuse.com/?search=intersectionratio – Lakshya Thakur Feb 12 '21 at 20:50
  • Firefox 85, Edge 88... both have total support of Intersection Observer and also Intersection Ratio :( – JS3DX Feb 12 '21 at 21:05
  • Are a subset of your properties working ? Like opacity ? Or the whole key frame doesn’t get applied ? Can you try translate instead of translate3d too ? – Lakshya Thakur Feb 12 '21 at 21:16
  • I checked the properties (ran the animation with pure CSS - took out the JS - and worked fine) so doesn't seem to be a problem with the keyframe, opacity, or even the translate3d... unless there's a conflict I'm not seeing when JS is also in play. I think something is wrong with the script, as if it isn't running the expansionObserver bit for some reason – JS3DX Feb 15 '21 at 19:43
0

Solved! After seeing the code working everywhere for everybody (including seeing it work in Codepen with my own eyes) but never in my local ropository, I suspected it had to be one of two things: There was an implicit library/framework at work in stackOverflow/CodePen that I wasn't using... or something was up with the HTML code I didn't include in here.

And that was exactly it: I took the script out of the head element and placed it on the last line inside the body element, right before the closing tag. Now the code works! Thank you all for you help with this!

JS3DX
  • 11
  • 2