You need to animate the landing sections using animate.css, so that when you scroll to the section, the animation of the elements starts. All connected, but waypoints.js does not want to work normally. The HEAD page includes scripts:

<link rel="stylesheet" media="all" href="css/animate.css"> <script src="libs/jquery-3.2.1.min/jquery-3.2.1.min.js"></script> <script src="libs/waypoints/src/waypoint.js"></script>

At the end of the page, the following script is executed:

  <script> $(function(){ $('.adv-img-cont').waypoint(function() { $('.advantages-section .adv-img-cont').addClass('animated zoomIn').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () { $(this).removeClass('animated zoomIn') }) }, { offset: '50%'}) }); </script>

At the output I get the message:

 jquery-3.2.1.min.js:2 Uncaught TypeError: $(...).waypoint is not a function at HTMLDocument.<anonymous> (sunny-turkey.html:278) at j (jquery-3.2.1.min.js:2) at k (jquery-3.2.1.min.js:2)

Connecting scripts and styles in a different order gives nothing. Tell me what's the problem? Thank you in advance!

  • Is the script in the specified path? + in the latest waypoints version (if I google the right script) it is used without jquery - br3t
  • Yes, all scripts are connected correctly, otherwise there would be a corresponding message in the console. Most likely you are right, it seems that they have removed the support of jquery. Strange decision. - Alex

0