Main locomotive javascript

<link rel="stylesheet" href="<https://cdn.jsdelivr.net/npm/[email protected]/dist/locomotive-scroll.css>">
<script src="<https://cdn.jsdelivr.net/npm/[email protected]/dist/locomotive-scroll.min.js>"></script>
<script>
const locoScroll = new LocomotiveScroll({
  el: document.querySelector(".locomotive-scroll"),
  smooth: true,
  multiplier: 1.0,
}); 

// Wait 2 seconds then calculate the new page height
setTimeout(() => {  
	locoScroll.update();
}, 2000);
</script>

Or use the version below to keep all Locomotive interactions on mobile

<link rel="stylesheet" href="<https://cdn.jsdelivr.net/npm/[email protected]/dist/locomotive-scroll.css>">
<script src="<https://cdn.jsdelivr.net/npm/[email protected]/dist/locomotive-scroll.min.js>"></script>
<script>
const locoScroll = new LocomotiveScroll({
  el: document.querySelector(".locomotive-scroll"),
  smooth: true,
  smartphone: {
      smooth: true
  },
  tablet: {
      smooth: true
  },
	smoothMobile: 1,
  multiplier: 1.0,
});

// Wait 2 seconds then calculate the new page height
setTimeout(() => {  
	locoScroll.update();
}, 2000);
</script>

Optional code for allowing anchor links

<script>
// Optional Script for Anchor Links
$('.nav__link.is--first').on('click', function() {
		const slider = document.querySelector('#about');
    locoScroll.scrollTo(slider)
});

$('.nav__link.is--second').on('click', function() {
		const slider = document.querySelector('#sticky2');
    locoScroll.scrollTo(slider)
});

$('.nav__link.is--third').on('click', function() {
		const slider = document.querySelector('#photos');
    locoScroll.scrollTo(slider)
});

</script>

Optional CSS to prevent elements from temporarily disappearing when scrolling back up

<style>
html.has-scroll-smooth {
    overflow: hidden;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;  
}
</style>

Add and remove class from nav based on if locomotive is scrolled down at all

<script>
// Scroll Navbar
locoScroll.on('scroll', (args) => {
    // Get all current elements : args.currentElements
    if(typeof args.currentElements['scroll-trigger'] === 'object') {
        $('.nav').removeClass('is--filled');
  } else {
		$('.nav').addClass('is--filled');
  }
});
</script>