I'm currently working on animating content as it enters the viewport. However, I've encountered an issue where jQuery (used to check if the content is in the viewport) isn't functioning properly alongside pagepiling.js (). I suspect this might be due to the positioning of different pages created by pagepiling.js.
Is there a solution for this? Essentially, I want something similar to this example.
<link rel="stylesheet" type="text/css" href="animate.css" /> <!-- animate.css css3 library -->
<script src="viewportchecker.js"></script> <!-- viewportchecker plugin -->
<script type="text/javascript" src="jquery.pagepiling.min.js"></script>
<style>
.hidden{
opacity:0;
}
.visible{
opacity:1;
}
</style>
<script>
var deleteLog = false;
$(document).ready(function() {
$('#pagepiling').pagepiling({
menu: '#menu',
anchors: ['page1', 'page2', 'page3'],
sectionsColor: ['#bfda00', '#693575', '#2C3E50', '#51bec4'],
easing: 'linear'
});
});
jQuery(document).ready(function() {
jQuery('.post').addClass("hidden").viewportChecker({
classToAdd: 'visible animated fadeIn',
offset: 100
});
});
</script>
<div id="pagepiling">
<div class="section" id="section1">
<div class="intro">
<div class="post"> <!-- Post content goes here --> </div>
</div>
</div>
<div class="section" id="section2">
<div class="intro">
<div class="post"> <!-- Post content goes here --> </div>
</div>
</div>
</div>