https://stoupbrewing.com/js/beer-hero-can-scroll-section.js?u=1787793607

1document.addEventListener("DOMContentLoaded", function(event) {
2	let matchMedia = gsap.matchMedia();
3
4	matchMedia.add("(min-width: 769px)", () => {
5		var canScroll = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
6		let canWidth = 258;
7		let canTotal = document.querySelectorAll(".template-beer-hero-can-scroll-section .cans-and-images .cans").length;
8		let canScrollWidth = canWidth * canTotal;
9		let canDuration = (canScrollWidth/canScroll) * 10; //using seconds per page width
10		console.log("canDuration"+canDuration);
11		canScroll = (canScroll - canScrollWidth);
12		gsap.to(".template-beer-hero-can-scroll-section .cans-and-images", {x: canScroll, duration: canDuration, delay: 2, autoAlpha: 1, ease: "linear"});
13	});
14	/* mobile */
15	matchMedia.add("(max-width: 768px)", () => {
16		var canScroll = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
17		let canWidth = 200;
18		let canTotal = document.querySelectorAll(".template-beer-hero-can-scroll-section .cans-and-images .cans").length;
19		let canScrollWidth = canWidth * canTotal;
20		let canDuration = (canScrollWidth/canScroll) * 10; //using seconds per page width
21		console.log("canDuration"+canDuration);
22		canScroll = (canScroll - canScrollWidth);
23		gsap.to(".template-beer-hero-can-scroll-section .cans-and-images", {x: canScroll, duration: canDuration, delay: 2, autoAlpha: 1, ease: "linear"});
24	});
25});