Don't start animation until in view

Question

I was wondering how I could stop an animation from starting until it has been scrolled in to full view. I am using a plugin, animate.css by Dan Eden to animate my elements. I have added the animation and it works perfectly but I need to know how to make it only start once it is in full view.

This is the code for the element I have animated using class:

<div class="animated fadeInUp" id="enter-title"><img src="/images/welcome-text/enter.png" width="473" height="227"/></div>

This is the animation code:

@-webkit-keyframes fadeInUp {
0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
}

100% {
    opacity: 1;
    -webkit-transform: translateY(0);
}

.animated.fadeInUp {
-webkit-animation-name: fadeInUp;
-moz-animation-name: fadeInUp;
-o-animation-name: fadeInUp;
animation-name: fadeInUp;
}

Welcome to Stack Overflow user2287630! Although you did describe your problem, it is difficult to help you without knowing what your code looks like. Visit [here](http://stackoverflow.com/editing-help) for help with formatting code into your question. It may also be helpful to use a [jsFiddle](http://jsfiddle.net) to help illustrate your point. — Cody Guldner, Jul 31 '13 at 23:06
as agreed with the above, you will need to show some of the code you have tried, but normally you could look at something like but please provide some code. — Pogrindis, Jul 31 '13 at 23:08
you have updated the html. but what is the JS you would like to add to it ? What is your animation code ? — Pogrindis, Jul 31 '13 at 23:24
Related: http://stackoverflow.com/questions/15798360/show-div-on-scrolldown-after-800px/15800696#15800696 — apaul, Feb 19 '15 at 16:39

apaul · Accepted Answer · 2013-08-01T00:33:53.770

If you're looking to hold back the animation until the image is scrolled into view you could use a little jQuery like so:

Working Example

jQuery

$(window).scroll(function () {
    var y = $(window).scrollTop(),
        x = $('.animated').offset().top - 200;
    if (y > x) {
        $('.animated').addClass('fadeInUp').removeClass('fadeOutDown');
    } else {
        $('.animated').removeClass('fadeInUp').addClass('fadeOutDown');
    }
});

CSS

.animated {
    -webkit-animation-fill-mode:both;
    -moz-animation-fill-mode:both;
    -ms-animation-fill-mode:both;
    -o-animation-fill-mode:both;
    animation-fill-mode:both;
    -webkit-animation-duration:1s;
    -moz-animation-duration:1s;
    -ms-animation-duration:1s;
    -o-animation-duration:1s;
    animation-duration:1s;
    opacity:0;                /*** Important Bit ***/
}
.animated.hinge {
    -webkit-animation-duration:2s;
    -moz-animation-duration:2s;
    -ms-animation-duration:2s;
    -o-animation-duration:2s;
    animation-duration:2s;
}
@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(20px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}
@-moz-keyframes fadeInUp {
    0% {
        opacity: 0;
        -moz-transform: translateY(20px);
    }
    100% {
        opacity: 1;
        -moz-transform: translateY(0);
    }
}
@-o-keyframes fadeInUp {
    0% {
        opacity: 0;
        -o-transform: translateY(20px);
    }
    100% {
        opacity: 1;
        -o-transform: translateY(0);
    }
}
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
.fadeInUp {
    -webkit-animation-name: fadeInUp;
    -moz-animation-name: fadeInUp;
    -o-animation-name: fadeInUp;
    animation-name: fadeInUp;
}
@-webkit-keyframes fadeOutDown {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(20px);
    }
}
@-moz-keyframes fadeOutDown {
    0% {
        opacity: 1;
        -moz-transform: translateY(0);
    }
    100% {
        opacity: 0;
        -moz-transform: translateY(20px);
    }
}
@-o-keyframes fadeOutDown {
    0% {
        opacity: 1;
        -o-transform: translateY(0);
    }
    100% {
        opacity: 0;
        -o-transform: translateY(20px);
    }
}
@keyframes fadeOutDown {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(20px);
    }
}
.fadeOutDown {
    -webkit-animation-name: fadeOutDown;
    -moz-animation-name: fadeOutDown;
    -o-animation-name: fadeOutDown;
    animation-name: fadeOutDown;
}

I added an additional animation to fade the image back out when you scroll back up, its optional, but I think it makes for a nice effect.

score 1 · Answer 2 · answered Jul 31 '13 at 23:09

1

You need to constantly check if the element is in view each time the page is scrolled. There is this neat jQuery plugin called Bullseye which might help you.

answered Jul 31 '13 at 23:09

Samer

973
1
6
15

This is not entirely true. Without any further info from the OP its impossible to say. Also its not about if it is scrolled, there is no mention of this. In fact there is only a mention of after the view is rendered. – Pogrindis Jul 31 '13 at 23:14

Don't start animation until in view

2 Answers2