0

I’ve been trying to make the animation start as soon as the user reaches a specific section of the page. But what’s happening is that the animation is starting as soon as the page loads, making it finish before the user has even reached to that section. Can anyone give me an example of how can I do that, please?

Rachel Basulto
  • 35
  • 6
  • May be this could help https://stackoverflow.com/questions/27404535/how-to-apply-animation-on-a-certain-div – Awais Dec 04 '19 at 07:55

2 Answers2

0

Using the CSS delay property sleeps the animation for a given amount of time 

div class="" {
  animation-delay: 3s;
}

Edit: I believe this question was answered here

Sean
  • 1
  • 1
0

You can use the native window scroll event, wait till the scrolling position reach the section position and then launch the animation by adding the css class with the animation.

You can add a callback on the window scroll like this:

var scroll_position = 0;
var section_position = 1000;

function startAnimation() {
   // Set the class with the animation to the element
   element.classList.add("run-animation");
}

window.addEventListener('scroll', function(e) {
  scroll_position = window.scrollY;
  if (scroll_position > section_position) {
    // Start the animation -> startAnimation()
  }
});

This is way easier with frameworks like Angular or JQuery. Here there is some information about the window scroll event. And here how to control animations from javascript.

Marcos Campos
  • 11
  • 3