11

I have spend all day looking for an easy way to make my animation start after I have scrolled to a specific place on the page.

My css

.animation {
 width: 50%; 
 float: left; 
 position: relative; 
 -webkit-animation-name: test; 
 -webkit-animation-duration: 4s; 
 -webkit-animation-iteration-count: 3;
 -webkit-animation-fill-mode: forwards; 
 animation-name: test; 
 animation-duration: 4s; 
 animation-iteration-count: 1; 
 animation-fill-mode: forwards; }

And my HTML

<div class="container">

<div class="animation">

Content goes here...

</div>

</div>

I wonder how to make the animation start when I scroll to the class container.

WeBWeB
  • 173
  • 1
  • 1
  • 6
  • 2
    use js and add class to div when it is visible on the screen: http://stackoverflow.com/questions/487073/check-if-element-is-visible-after-scrolling – krzysiej Jun 12 '15 at 11:14
  • 1
    You could use a library like https://github.com/customd/jquery-visible instead of trying to figure it out yourself – huysentruitw Jun 12 '15 at 11:33

6 Answers6

13

Javascript

var $window = $(window);
var $elem = $(".animation")

function isScrolledIntoView($elem, $window) {
    var docViewTop = $window.scrollTop();
    var docViewBottom = docViewTop + $window.height();

    var elemTop = $elem.offset().top;
    var elemBottom = elemTop + $elem.height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}
$(document).on("scroll", function () {
    if (isScrolledIntoView($elem, $window)) {
        $elem.addClass("animate")
    }
});

HTML

<div class="container">
    <div class="animation">Content goes here...</div>
</div>

CSS

.animation.animate {
    animation: pulse 5s infinite;//change this to whatever you want
}

JSFiddle to play with (don't forget to scroll)

Bobby Tables
  • 2,774
  • 7
  • 24
  • 48
3

@WebWeb , you can try this simple formula : 

$(window).on('scroll' , function(){
    scroll_pos = $(window).scrollTop() + $(window).height();
    element_pos = $(yourelement).offset().top + $(yourelement).height() ;
    if (scroll_pos > element_pos) {
        $(yourelement).addClass('add-anim');
    };

})

It is basically checking if the windows scroll position is higher than that of the elements offset from the top of the document(plus the element's height) . It is an age-old formula.

FIDDLE AND DEMO HERE

If you are lazy like me though, you can go for waypoints.js an amazing library.

Giannis Dallas
  • 549
  • 2
  • 8
  • 22
Alexander Solonik
  • 8,718
  • 13
  • 56
  • 133
3

no need to wonder about it... just use it

GITHUB

download animate.css and implement this in 

<script src="http://mynameismatthieu.com/WOW/dist/wow.min.js"></script>
<link rel="stylesheet" href="css/animate.css">
<script>
new WOW().init();
</script>


<div class="wow bounceInLeft animated">
              <h2>animated heading</h2>
</div>

try this code...

this link for more

(these classes can be used)

bounce
flash
pulse
rubberBand
shake
headShake
swing
tada
wobble
jello
bounceIn
bounceInDown
bounceInLeft
bounceInRight
bounceInUp
bounceOut
bounceOutDown
bounceOutLeft
bounceOutRight
bounceOutUp
fadeIn
fadeInDown
fadeInDownBig
fadeInLeft
fadeInLeftBig
fadeInRight
fadeInRightBig
fadeInUp
fadeInUpBig
fadeOut
fadeOutDown
fadeOutDownBig
fadeOutLeft
fadeOutLeftBig
fadeOutRight
fadeOutRightBig
fadeOutUp
fadeOutUpBig
flipInX
flipInY
flipOutX
flipOutY
lightSpeedIn
lightSpeedOut
rotateIn
rotateInDownLeft
rotateInDownRight
rotateInUpLeft
rotateInUpRight
rotateOut
rotateOutDownLeft
rotateOutDownRight
rotateOutUpLeft
rotateOutUpRight
hinge
rollIn
rollOut
zoomIn
zoomInDown
zoomInLeft
zoomInRight
zoomInUp
zoomOut
zoomOutDown
zoomOutLeft
zoomOutRight
zoomOutUp
slideInDown
slideInLeft
slideInRight
slideInUp
slideOutDown
slideOutLeft
slideOutRight
slideOutUp
Gautam Jha
  • 1,370
  • 1
  • 10
  • 23
2

You can try wow.js it's quick and simple for integrate animation on scroll when element is visible on page. I create simple demo.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>
    <link rel="stylesheet" href="http://mynameismatthieu.com/WOW/css/libs/animate.css">
    <style>

body {
  padding-bottom: 200px;
}

    </style>
  </head>
  <body>

<div style="height: 110vh">
</div>

<div class="wow bounceInLeft">
  Animation start when Visible
</div>

<div data-wow-delay=".5s" class="wow bounceInLeft">
  Animation start when Visible after .5s delay
</div>

<div data-wow-delay="1s" class="wow bounceInLeft">
  Animation start when Visible after 1s delay
</div>

<div data-wow-delay="2s" class="wow bounceInLeft">
  Animation start when Visible after 2s delay
</div>

<div style="text-align: center; margin-top: 300px;">
  <span data-wow-delay="" class="wow bounceInDown">Link 1</span>
  <span data-wow-delay=".1s" class="wow bounceInDown">Link 3</span>
  <span data-wow-delay=".2s" class="wow bounceInDown">Link 3</span>
  <span data-wow-delay=".3s" class="wow bounceInDown">Link 4</span>
</div>


<script src="http://mynameismatthieu.com/WOW/dist/wow.min.js"></script>
<script>
 new WOW().init();
</script>

  </body>
</html>
Usman Arshad
  • 828
  • 5
  • 19
0

If there is anyone wants to use this for an animation that should run when you open the page, hover it, when you scroll and run again when you scroll back, here is how I solved it.

I used what @robert used and added some refinements.

I made this fiddle for this https://jsfiddle.net/hassench/rre4qxhf/

So there you go:

var $window = $(window);
var $elem = $(".my-image-container");
var $gotOutOfFrame = false;

function isScrolledIntoView($elem, $window) {
  var docViewTop = $window.scrollTop();
  var docViewBottom = docViewTop + $window.height();

  var elemTop = $elem.offset().top;
  var elemBottom = elemTop + $elem.height();

  return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop) && $gotOutOfFrame);
}

function isScrolledOutView($elem, $window) {
  var docViewTop = $window.scrollTop();
  var docViewBottom = docViewTop + $window.height();

  var elemTop = $elem.offset().top;
  var elemBottom = elemTop + $elem.height();

  return ((elemBottom < docViewBottom) && (elemTop < docViewTop));
}
$(document).on("scroll", function() {
  if (isScrolledIntoView($elem, $window)) {
    $gotOutOfFrame = false;
    $elem.addClass("animate");
    $(function() {
      setTimeout(function() {
        $elem.removeClass("animate");

      }, 1500);
    });
  }
  if (isScrolledOutView($elem, $window)) {
    $gotOutOfFrame = true;
    $elem.removeClass("animate");
  }
});
.my-image-container {
  top: 50px;
  max-width: 22%;
}

.my-image-container:hover {
  animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

.my-image-container .my-image {
  animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  -moz-animation-delay: 1s;
  -webkit-animation-delay: 1s;
  -o-animation-delay: 1s;
  animation-delay: 1s;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
  width: 100%;
}

.animate {
  animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  -moz-animation-delay: 0.5s;
  -webkit-animation-delay: 0.5s;
  -o-animation-delay: 0.5s;
  animation-delay: 0.5s;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

@keyframes shake {
  10%,
  90% {
    transform: translate3d(-1px, 0, 0);
  }
  20%,
  80% {
    transform: translate3d(2px, 0, 0);
  }
  30%,
  50%,
  70% {
    transform: translate3d(-4px, 0, 0);
  }
  40%,
  60% {
    transform: translate3d(4px, 0, 0);
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
The animation will run when you firt open the page,<br> 

and when you hover it,<br> 

and when you scroll out then in. <br>

<div class="my-image-container">
  <img class="my-image" 
  src="http://www.lifeofpix.com/wp-content/uploads/2017/05/img-5831.jpg">
</div>
<br> Scroll down then back up
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
scroll up
Hassen Ch.
  • 1,225
  • 13
  • 27
0

$(window).scroll(function(event) { 
if ($(".container").offset().top < $(window).scrollTop() + $(window).outerHeight()) {
$('.animation').addClass('triggerAnim');
} 
else {
$('.animation').removeClass('triggerAnim');
}
});
.animation {
 width: 50%; 
 float: left; 
 position: relative; 
/*I took out from here to pass it to .triggerAnim*/
 -webkit-animation-duration: 4s; 
 -webkit-animation-iteration-count: 3;
 -webkit-animation-fill-mode: forwards; 
/*I also took out from here (for the same purpose).*/
 animation-duration: 4s; 
 animation-iteration-count: 1; 
 animation-fill-mode: forwards; 
}
/*We also have to add the followings to call it "animation". Sure it could be "transition" too, but that won't be the thing.*/
@keyframes test{
  0%{
    opacity: 0;
    transform: scale(0.3) translate3d(0,0,0);
  }
  50%{
    opacity: 0.9;
    transform: scale(1.1);
  }
  80%{
    opacity: 1;
    transform: scale(0.89);
  }
  100%{
    opacity: 1;
    transform: scale(1) translate3d(0,0,0);
  }
}
 /*The most important part.*/  
 .triggerAnim{
 -webkit-animation-name: test;
  animation-name: test; 
 }
 /*To see things easier.*/
 .content-to-scroll{
 color: grey;
 } 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- the above is needed for the triggering to work -->

<div class="content-to-scroll"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris feugiat dolor vel quam consectetur, nec auctor metus faucibus. Integer suscipit urna et quam auctor efficitur. Donec luctus suscipit vestibulum. Nulla ultrices dapibus orci, id pharetra mauris tincidunt in. Proin ac luctus sem. Duis sit amet justo magna. Proin venenatis sapien urna, sit amet varius odio ullamcorper non. In viverra viverra dolor at venenatis. Morbi justo ex, feugiat facilisis quam id, tincidunt ullamcorper magna. Cras convallis elit in consectetur auctor. Sed gravida quam ac ornare vehicula. Pellentesque nec metus vitae purus blandit fringilla.

Nulla sem felis, dignissim at diam in, ornare mollis turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vel tellus id metus porttitor malesuada sit amet non velit. Vestibulum vehicula et leo a pulvinar. Maecenas tristique convallis efficitur. Nam sed euismod eros. Cras pretium molestie laoreet. Suspendisse at placerat sem. Duis in magna eu mauris pharetra sagittis. Integer ac sem eleifend, dictum lorem at, faucibus sem. Integer efficitur sapien nunc, nec luctus dolor maximus interdum. Proin finibus odio eget orci mattis, vehicula tincidunt tortor imperdiet.

Cras suscipit sapien nisl, sit amet mattis nulla lobortis eu. In hac habitasse platea dictumst. Vestibulum hendrerit quis dui bibendum lobortis. Pellentesque eget sapien lorem. Vivamus nunc elit, laoreet vitae tortor non, mattis cursus enim. Phasellus vehicula facilisis ante id suscipit. Donec tempus, neque vitae placerat vestibulum, eros tortor malesuada libero, vitae hendrerit nibh tortor sed dolor. In suscipit tincidunt felis quis fermentum. Curabitur at ultricies purus, ac ultricies leo. Quisque accumsan augue ac tortor fringilla, volutpat facilisis ligula bibendum. Curabitur velit justo, ultricies eget lectus id, mattis convallis erat. Morbi vitae elit ut leo fringilla faucibus in ut neque. Proin vulputate magna massa, ut tristique orci ultrices sed.

Mauris at volutpat nunc, at tristique augue. Curabitur ac consequat eros. Nullam volutpat vulputate velit eu semper. Morbi bibendum turpis nisl, laoreet tincidunt turpis eleifend sed. Cras maximus ante eu est aliquam gravida. Morbi consectetur porta auctor. Mauris lobortis consequat lorem, tincidunt ultricies elit varius eget. Integer efficitur non purus sit amet condimentum. Morbi sodales metus eu aliquet ullamcorper. Pellentesque at mollis ligula, a consequat justo. Ut aliquet mollis mi quis feugiat. Vivamus iaculis, lorem id feugiat mattis, leo felis ultricies tortor, et scelerisque nisi ligula a metus. Duis tincidunt, mi id faucibus rhoncus, nibh urna fringilla sapien, ac faucibus neque justo eget odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras sit amet molestie sem. Maecenas sed laoreet elit, in blandit sem.

Morbi venenatis porttitor consequat. Maecenas sodales arcu non neque ullamcorper, et facilisis diam auctor. Nulla lobortis, dui sed viverra venenatis, nisi sapien cursus ante, ac egestas tortor erat et justo. Quisque vel scelerisque diam. Maecenas ac lectus et odio suscipit aliquet quis a metus. In augue purus, rhoncus eu facilisis quis, pretium et risus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut dictum et nisi vel blandit. Fusce nec metus nec lorem imperdiet pharetra at eu enim. Curabitur mattis, nunc quis sagittis ornare, tortor ipsum dapibus lectus, a sagittis tortor ligula eu arcu. Duis quis velit non sem congue sollicitudin vitae a nunc. In vitae ligula eleifend erat fringilla egestas. Aliquam feugiat eleifend elit, sed blandit erat eleifend faucibus. Etiam et mattis justo, eget tempor neque. Donec ac euismod diam. Sed maximus in justo quis pellentesque. 
</div>
<div class="container">

<div class="animation">

Content goes here...

</div>

</div>
<div class="content-to-scroll"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris feugiat dolor vel quam consectetur, nec auctor metus faucibus. Integer suscipit urna et quam auctor efficitur. Donec luctus suscipit vestibulum. Nulla ultrices dapibus orci, id pharetra mauris tincidunt in. Proin ac luctus sem. Duis sit amet justo magna. Proin venenatis sapien urna, sit amet varius odio ullamcorper non. In viverra viverra dolor at venenatis. Morbi justo ex, feugiat facilisis quam id, tincidunt ullamcorper magna. Cras convallis elit in consectetur auctor. Sed gravida quam ac ornare vehicula. Pellentesque nec metus vitae purus blandit fringilla.

Nulla sem felis, dignissim at diam in, ornare mollis turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vel tellus id metus porttitor malesuada sit amet non velit. Vestibulum vehicula et leo a pulvinar. Maecenas tristique convallis efficitur. Nam sed euismod eros. Cras pretium molestie laoreet. Suspendisse at placerat sem. Duis in magna eu mauris pharetra sagittis. Integer ac sem eleifend, dictum lorem at, faucibus sem. Integer efficitur sapien nunc, nec luctus dolor maximus interdum. Proin finibus odio eget orci mattis, vehicula tincidunt tortor imperdiet.

Cras suscipit sapien nisl, sit amet mattis nulla lobortis eu. In hac habitasse platea dictumst. Vestibulum hendrerit quis dui bibendum lobortis. Pellentesque eget sapien lorem. Vivamus nunc elit, laoreet vitae tortor non, mattis cursus enim. Phasellus vehicula facilisis ante id suscipit. Donec tempus, neque vitae placerat vestibulum, eros tortor malesuada libero, vitae hendrerit nibh tortor sed dolor. In suscipit tincidunt felis quis fermentum. Curabitur at ultricies purus, ac ultricies leo. Quisque accumsan augue ac tortor fringilla, volutpat facilisis ligula bibendum. Curabitur velit justo, ultricies eget lectus id, mattis convallis erat. Morbi vitae elit ut leo fringilla faucibus in ut neque. Proin vulputate magna massa, ut tristique orci ultrices sed.

Mauris at volutpat nunc, at tristique augue. Curabitur ac consequat eros. Nullam volutpat vulputate velit eu semper. Morbi bibendum turpis nisl, laoreet tincidunt turpis eleifend sed. Cras maximus ante eu est aliquam gravida. Morbi consectetur porta auctor. Mauris lobortis consequat lorem, tincidunt ultricies elit varius eget. Integer efficitur non purus sit amet condimentum. Morbi sodales metus eu aliquet ullamcorper. Pellentesque at mollis ligula, a consequat justo. Ut aliquet mollis mi quis feugiat. Vivamus iaculis, lorem id feugiat mattis, leo felis ultricies tortor, et scelerisque nisi ligula a metus. Duis tincidunt, mi id faucibus rhoncus, nibh urna fringilla sapien, ac faucibus neque justo eget odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras sit amet molestie sem. Maecenas sed laoreet elit, in blandit sem.

Morbi venenatis porttitor consequat. Maecenas sodales arcu non neque ullamcorper, et facilisis diam auctor. Nulla lobortis, dui sed viverra venenatis, nisi sapien cursus ante, ac egestas tortor erat et justo. Quisque vel scelerisque diam. Maecenas ac lectus et odio suscipit aliquet quis a metus. In augue purus, rhoncus eu facilisis quis, pretium et risus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut dictum et nisi vel blandit. Fusce nec metus nec lorem imperdiet pharetra at eu enim. Curabitur mattis, nunc quis sagittis ornare, tortor ipsum dapibus lectus, a sagittis tortor ligula eu arcu. Duis quis velit non sem congue sollicitudin vitae a nunc. In vitae ligula eleifend erat fringilla egestas. Aliquam feugiat eleifend elit, sed blandit erat eleifend faucibus. Etiam et mattis justo, eget tempor neque. Donec ac euismod diam. Sed maximus in justo quis pellentesque. 
</div>
iorgu
  • 127
  • 1
  • 13