<script src="https://unpkg.co/gsap@3/dist/gsap.min.js"></script>
<script src="https://unpkg.com/gsap@3/dist/ScrollTrigger.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.0"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/ScrollToPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
<script>
// GSAP script for Features
gsap.registerPlugin(ScrollTrigger, ScrollToPlugin);
 
let slider = document.querySelector(".horizontal_slider");
let list = document.querySelector(".horizontal_slider_list");
let items = document.querySelectorAll(".horizontal_slider_item");
 
const horitl = gsap.timeline({
	defaults: { ease: "none" },
	scrollTrigger: {
		trigger: slider,
		scrub: 1,
		pin: true,
		start: "top top",
		scroller: "body",
		end: `+=${items.length - 1}00%`,
		snap: {
			snapTo: "labels",
			duration: 0.2,
			delay: 0,
			ease: "power4.inOut"
		}
	}
});
horitl.addLabel(`l0`);
 
items.forEach((el, index) => {
	if (index > 0) {
		horitl.to(list, { xPercent: -100.5 * index });
		horitl.addLabel(`l${index}`);
	}
});
</script>
<script>
// GSAP script for How it works
ScrollTrigger.defaults({
  markers:false
})
 
var points = gsap.utils.toArray('.point');
var imgs = gsap.utils.toArray('.point img');
var indicators = gsap.utils.toArray('.indicator');
var indicator = gsap.utils.toArray('.indicator a');
var desc = gsap.utils.toArray('.indicator .ci-desc');
 
var height = 100 * points.length;
 
gsap.set('.indicators', {display: "block"});
 
var tl = gsap.timeline({
  duration: points.length,
  scrollTrigger: {
    trigger: ".philosophie",
    start: "top center",
    end: "+="+height+"%",
    scrub: true,
    id: "points",
  }
})
 
var pinner = gsap.timeline({
  scrollTrigger: {
    trigger: ".philosophie",
    start: "top top",
    end: "+="+height+"%",
    scrub: true,
    pin: ".philosophie",
    pinSpacing: true,
    id: "pinning"
  }
})
 
points.forEach(function(elem, i) {
  gsap.set(elem, {position: "absolute", top: 0});
  tl.from(indicators[i], {className: "indicator"}, i)
  tl.to(indicators[i], {className: "indicator active"}, i)
  tl.to(indicators[i], {borderLeft: "3px solid #EFF7FE", padding: "0 0 0 35px", duration: 0.25}, i)
  tl.to(indicator[i], {color: "#EFF7FE", duration: 0.25}, i)
  tl.to(desc[i], {display: "block"}, i)
  tl.from(elem.querySelector('img'), {autoAlpha:0}, i)
	
  if (i != points.length-1) {
  	tl.to(indicators[i], {className: "indicator"}, i+1)
    tl.to(indicators[i], {borderLeft: "3px solid #23329a", padding: "15px 0 30px 35px", duration: 0.25}, i+0.75)
    tl.to(indicator[i], {color: "#23329a", duration: 0.25}, i+0.75)
 	tl.to(desc[i], {display: "none"}, i+0.5)
    tl.to(elem.querySelector('img'), {autoAlpha:0}, i + 0.75)
  }
});
	
indicators.forEach(function(elem, i) {
	elem.addEventListener('click', function(e){
		e.preventDefault();
		var totalitems = points.length;
		var scope = $('#food-howitwork').height() / totalitems;
		var scrollto = scope * i;
 		$("html, body").animate({scrollTop: $('#food-howitwork').offset().top + scrollto}, 1000);
	});  
});
</script>