Can someone help me with my animate.css effects timings?

1

I have put an animate.css (https://daneden.github.io/animate.css/) effect on my section two title text and hr element (line). However, the effect on these elements activates when the page loads on my section one which is known as #part1. When the user goes to my section 2 which is known as #part2 I want the effect then to take place. Not to sure how to make this type of “delay” happen.

HTML

      <!-- SECTION2 -->
      <section id="part2">
         <div class="container">
            <div class="row">
               <div class="col-lg-12 text-center">
                  <h2 class="slideInRight animated" id="title4">about</h2>
                  <hr class="line2 slideInRight animated">
                  <div class="row">
                  </div>
               </div>
            </div>
         </div>
      </section>

Site code

2

I did something similar on my portfolio page. Not sure if my implementation is the best one, but the idea is to add a scroll listener which checks whether the target element is in view on every scroll event. If it is, the animated and slideInRight classes are added to the element and the listener is removed so that it only runs once.

I wrapped your <h2> and <hr> elements in a <div id="about-heading-container"> to move both elements as one. Then I added the following to your jQuery $(document).ready() callback:

  const hasBeenAnimated = el => el.classList.contains('animated')

  const isInView = (el) => {
    const top = el.getBoundingClientRect().top
    return top <= window.innerHeight - 100
  }
  
  const aboutHeading = document.getElementById('about-heading-container')
  aboutHeading.style.opacity = 0

  const animateHeading = () => {
    if (hasBeenAnimated(aboutHeading)) {
      return window.removeEventListener('scroll', animateHeading)
    }
    if (isInView(aboutHeading) && !hasBeenAnimated(aboutHeading)) {
      aboutHeading.classList.add('animated', 'slideInRight')
      aboutHeading.style.opacity = 1
    }
  }

  window.addEventListener('scroll', animateHeading)

The updated JSFiddle is here. I didn’t use jQuery when writing the original code, so I apologize for the style being inconsistent with yours. It shouldn’t be too difficult to translate, though. :grinning: Please let me know if you have any questions!

2 Likes