Conflict between Bootstrap 4 and Animate.css/Waipoints.js

JavaScript
1

Are there any known conflicts between Bootstrap 4 and Animate.css/Waypoints.js?

I am using the following CSS/JS combination:

CSS

.animate-box {
    opacity: 0;
}
.animate-box.animated {
    opacity: 1;
}

JS

<script>
$(function() {
	var contentWayPoint = function() {
		var i = 0;
		$('.animate-box').waypoint( function( direction ) {
			if( direction === 'down' && !$(this.element).hasClass('animated') ) {
				i++;
				$(this).addClass('item-animate');
				setTimeout(function(){
					$('body .animate-box.item-animate').each(function(k){
						var el = $(this);
						setTimeout( function () {
							el.addClass('fadeInUp animated');
							el.removeClass('item-animate');
						},  k * 750, 'easeInOutExpo' );
					});
				}, 150);
			}
    	} , { offset: '80%' } );
	};
	contentWayPoint();	
});
</script>

which works perfectely well with Bootstrap 3.+ But as soon If I use Bootstrap 4 it’s not working at all

Any suggestions? Thank you in advance

2

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.