I am trying to get a drawing animation effect similar to (Preview: ) to load when the user scrolls to this section of the page. It's intended to add multiple of these drawing boxes as the user navigates the page.

I realize that jQuery is sort of outdated now, but this is on a WordPress website that already utilizes this framework.

jQuery

<script type='text/javascript'> 
    $(document).ready(function(){
        $('.thisisatest').addClass('draw');
    });
</script>

HTML

<div class="thisisatest"></div>

I've tried replacing the .ready() with:

onload - .asp

.scroll() - /

Any help would be greatly appreciated.

I am trying to get a drawing animation effect similar to https://stackoverflow./a/45378478 (Preview: https://codepen.io/jbanegas/pen/LjpXom) to load when the user scrolls to this section of the page. It's intended to add multiple of these drawing boxes as the user navigates the page.

I realize that jQuery is sort of outdated now, but this is on a WordPress website that already utilizes this framework.

jQuery

<script type='text/javascript'> 
    $(document).ready(function(){
        $('.thisisatest').addClass('draw');
    });
</script>

HTML

<div class="thisisatest"></div>

I've tried replacing the .ready() with:

onload - https://www.w3schools./jsref/event_onload.asp

.scroll() - https://api.jquery./scroll/

Any help would be greatly appreciated.

• javascript
• jquery
• scrollview
• viewport
• jquery-events

• jquery is not yet outdated, but it is slowly-slowly dying :) do you need this animation when scrolling to a specific container? – s.kuznetsov Commented Aug 12, 2020 at 19:35
• That's correct, but there will be a few of these on a single page. I would imagine once one is working, it's just changing the classes being called @sergeykuznetsov. – nickhiebertdev Commented Aug 12, 2020 at 19:44
• please insert your code with many blocks here, and I will help you – s.kuznetsov Commented Aug 12, 2020 at 20:05

1 Answer 1

You are missing the basics. Apart from adding on scroll event you need to find out if element is in view port obviously.

Here is vanilla JS solution...

It will work on all div's with content and .thisisatest class.

References Read the link on how the isInViewport function work.

var isInViewport = function(elem) {
  var distance = elem.getBoundingClientRect();
  return (
    distance.top >= 0 &&
    distance.left >= 0 &&
    distance.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    distance.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
};
// read the link on how above code works

var findMe = document.querySelectorAll('.thisisatest');

window.addEventListener('scroll', function(event) {
// add event on scroll
findMe.forEach(element => {
    //for each .thisisatest
    if (isInViewport(element)) {
      //if in Viewport
      element.classList.add("draw");
    }
});
}, false);

EXAMPLE: jsfiddle