I am trying to get this waypoints that is in woo theme (features tab) over to future2021 theme. The effect is the images ballon out and back in when scroll past it. However, I am unable to get it to work fully. I think I have added all the necessary files and css styles as it works when I manually add the classes animated pulseattributes. The jquery is being loaded first before waypoint.js as well.
I think the issue is in the main.js. Woo has it as below and I have paste them over to future theme main.js and changed the necessary classes to match my page. This code may not work over at future theme is what I suspect. The twig file is features.html.twig. It suppose to add classes animated pulse when scroll over the target element (ex: design, responsive, cross-browser, video) within the page.
$('.js .design').waypoint(function() {
$('.js .design .feature-media').addClass( 'animated pulse' );
}, { offset: 'bottom-in-view' });
$('.js .responsive').waypoint(function() {
$('.js .responsive .feature-media').addClass( 'animated pulse' );
}, { offset: 'bottom-in-view' });
$('.js .cross-browser').waypoint(function() {
$('.js .cross-browser .feature-media').addClass( 'animated pulse' );
}, { offset: 'bottom-in-view' });
$('.js .video').waypoint(function() {
$('.js .video .feature-media').addClass( 'animated pulse' );
}, { offset: 'bottom-in-view' });