When my page loads, the content in the viewport is displayed (content not in view get's a hidden
class on the container) and does an animation (flipInX
). Then when the user scrolls down the page the hidden
class is removed from the container and the content fade's (using fadeIn()
) onto the page and is supposed to then do the animation.
My problem is that it's fading (fadeIn()
) onto the page, doing the animation, and then doing the fadeIn()
again.
EDIT: I found on some browsers (Firefox and Chrome) it does an extra "bounce" at the end, instead of fading in the second time (Safari)
HTML
<body class="homepage">
<main id="main" class="main" role="main" tabindex="-1">
<div class="main-3">
<article class="post flipInX animated" data-delay="2">
<h1 class="h-1">Service 1</h1>
<div class="entry">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vestibulum, lectus id sollicitudin mattis, quam tortor lobortis orci, sed iaculis mi nulla non ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec non felis mollis, congue neque eu, rhoncus libero. Nunc ut mattis ante.</div>
</article>
<article class="post flipInX animated" data-delay="4">
<h1 class="h-1">Service 2</h1>
<div class="entry">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vestibulum, lectus id sollicitudin mattis, quam tortor lobortis orci, sed iaculis mi nulla non ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec non felis mollis, congue neque eu, rhoncus libero. Nunc ut mattis ante.</div>
</article>
<article class="post flipInX animated" data-delay="6">
<h1 class="h-1">Service 3</h1>
<div class="entry">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vestibulum, lectus id sollicitudin mattis, quam tortor lobortis orci, sed iaculis mi nulla non ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec non felis mollis, congue neque eu, rhoncus libero. Nunc ut mattis ante.</div>
</article>
<article class="post flipInX animated" data-delay="8">
<h1 class="h-1">Service 4</h1>
<div class="entry">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vestibulum, lectus id sollicitudin mattis, quam tortor lobortis orci, sed iaculis mi nulla non ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec non felis mollis, congue neque eu, rhoncus libero. Nunc ut mattis ante.</div>
</article>
<article class="post flipInX animated" data-delay="10">
<h1 class="h-1">Service 5</h1>
<div class="entry">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vestibulum, lectus id sollicitudin mattis, quam tortor lobortis orci, sed iaculis mi nulla non ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec non felis mollis, congue neque eu, rhoncus libero. Nunc ut mattis ante.</div>
</article>
<article class="post flipInX animated" data-delay="12">
<h1 class="h-1">Service 6</h1>
<div class="entry">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vestibulum, lectus id sollicitudin mattis, quam tortor lobortis orci, sed iaculis mi nulla non ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec non felis mollis, congue neque eu, rhoncus libero. Nunc ut mattis ante.</div>
</article>
</div>
</main>
</body>
CSS
* {
border: 0;
margin: 0;
padding: 0;
-webkit-appearance: none;
-webkit-border-radius: 0;
}
*,
*:before,
*:after {
box-sizing: border-box;
}
.hidden {
visibility: hidden;
}
.main {
position: relative;
display: inline-block;
height: auto;
width: 98%;
margin: 40px auto 0 auto;
text-align: left;
}
.main.minify {
margin-top: 150px;
}
.main-3 {
min-height: 400px;
font-size: 16px;
line-height: 24px;
}
[class|=h] {
margin-bottom: 42px;
font-size: 30px;
font-weight: normal;
line-height: 1;
}
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both
}
.animated.bounceIn,
.animated.bounceOut,
.animated.flipOutX,
.animated.flipOutY {
-webkit-animation-duration: .75s;
animation-duration: .75s
}
@-webkit-keyframes flipInX {
0% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0
}
40% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in
}
60% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
opacity: 1
}
80% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
transform: perspective(400px) rotate3d(1, 0, 0, -5deg)
}
100% {
-webkit-transform: perspective(400px);
transform: perspective(400px)
}
}
@keyframes flipInX {
0% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0
}
40% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in
}
60% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
opacity: 1
}
80% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
transform: perspective(400px) rotate3d(1, 0, 0, -5deg)
}
100% {
-webkit-transform: perspective(400px);
transform: perspective(400px)
}
}
.flipInX {
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation-name: flipInX;
animation-name: flipInX
}
.homepage .main-3 {
width: 80%;
margin: 0 auto;
text-align: center;
}
.homepage .post {
display: inline-block;
width: 49%;
margin-bottom: 40px;
vertical-align: top;
-webkit-text-stroke: 0.5px;
}
.homepage .post .h-1 {
font-size: 26px;
line-height: 110%;
margin: 14px 0 10px;
text-align: center;
}
.homepage .post .entry {
padding: 0 10%
}
JS
function isScrolledIntoView(elem) {
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).ready(function() {
$('.post').each(function(index) {
var delay = $(this).attr('data-delay');
if (typeof delay !== typeof undefined && delay !== false) {
$(this).css('animation', 'flipInX 2s .' + delay + 's');
$(this).css('-webkit-animation', 'flipInX 2s .' + delay + 's');
}
});
$('.post').not('.post:first').each(function() {
if (!isScrolledIntoView($(this))) {
$(this).addClass('hidden');
}
});
$(document).on('scroll', function() {
$('.post.hidden').each(function() {
if (isScrolledIntoView($(this))) {
$(this).removeClass('hidden').css({
'display': 'none'
}).fadeIn();
}
});
});
});