Play CSS animation when scrolled to the view port

Question

While I can play the animation when scrolled to the view/section, the animated elements first appear and then start animation from opacity 0 to 1. It looks a bit awkward.

What have I missed in making the elements in the section to be hidden and then animate to appear when scrolled to the viewport?

<div class="myDiv"><img src="some image"></div>

.myDiv.animate .animateFromRight {
    animation: fadeInRight4 1.2s both 600ms;
}

$(window).scroll(function() {
        var windowBottom = $(this).scrollTop() + $(this).height();
        $('.myDiv').each(function() {
            var sectionTop = $(this).offset().top;
            if (windowBottom > sectionTop) {
                $(this).addClass('animate');
            }
        });
    });

Maybe use the Intersection API? [An article](https://www.itzami.com/blog/boost-your-css-animations-with-intersection-observer-api) on how to use it with CSS animations. — Andy, May 03 '23 at 12:49
What exactly does the original styling for the animated element look like? And what do the `fadeInRight4` keyframes do? The issue you're describing sounds more like it's an animation issue rather than the JS triggering it. — DBS, May 03 '23 at 12:52
You could use the proper technology instead: https://stackoverflow.com/a/27462500/383904 — Roko C. Buljan, May 03 '23 at 13:38

jyangca · Answer 1 · 2023-05-03T13:04:04.887

You need to set initial opacity to 0 and add a "hidden" class to them that sets their initial display to "none".

Then, you can add an "animate" class to these elements when they come into view using JavaScript. The "animate" class should include an animation that fades the elements in from opacity 0 to 1.

Example:

css

.myDiv.hidden {
    display: none;
}
.myDiv.animate .animateFromRight {
    opacity: 0;
    animation: fadeInRight4 1.2s both 600ms;
}

javascript

$(window).scroll(function() {
    var windowBottom = $(this).scrollTop() + $(this).height();
    $('.myDiv').each(function() {
        var sectionTop = $(this).offset().top;
        if (windowBottom > sectionTop) {
            $(this).removeClass('hidden').addClass('animate');
        }
    });
});

Hope it helps!

score 0 · Answer 2 · answered May 03 '23 at 13:35

Try adjusting the opacity with @keyframes.

$(window).scroll(function() {
  var windowBottom = $(this).scrollTop() + $(this).height();
  $('.myDiv').each(function() {
    var sectionTop = $(this).offset().top;
    if (windowBottom > sectionTop && $(this).hasClass('hidden')) {
      $(this).removeClass('hidden').addClass('animate');
    }
  });
});

@-webkit-keyframes fadeInRight {
    0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes fadeInRight {
    0% { opacity: 0; }
  100% { opacity: 1; }
}

.myDiv.hidden {
  opacity: 0;
}

.myDiv.animate {
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="myDiv"><img src="http://placekitten.com/200/100"></div>
<div class="myDiv hidden"><img src="https://dummyimage.com/200x200/F00/FFF.png&text=RED"></div>
<div class="myDiv hidden"><img src="https://dummyimage.com/200x200/0F0/FFF.png&text=GRN"></div>
<div class="myDiv hidden"><img src="https://dummyimage.com/200x200/00F/FFF.png&text=BLU"></div>
<div class="myDiv"><img src="http://placekitten.com/200/100"></div>

Play CSS animation when scrolled to the view port

2 Answers2

Example: