GSAP Testing

by andyjh07

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.4/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.4/ScrollTrigger.min.js"></script>
<script src="https://cdn.tailwindcss.com"></script>
<section class="h-screen w-full max-w-[1200px] mx-auto flex justify-between items-center gap-16"></section>
<section class="h-screen w-full max-w-[1200px] mx-auto flex justify-between items-center gap-16 animated">
  <img class="h-[500px] w-[300px] object-cover" src="https://images.unsplash.com/photo-1510798831971-661eb04b3739?q=80&w=3677&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" data-speed="0.75" alt="" />
  <img class="h-[500px] w-[300px] object-cover" src="https://images.unsplash.com/photo-1605298679374-1bdbd145f2be?q=80&w=3648&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" data-speed="1" alt="" />
  <img class="h-[500px] w-[300px] object-cover" src="https://images.unsplash.com/photo-1516108317508-6788f6a160e4?q=80&w=3648&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" data-speed="1.25" alt="" />
</section>
<section class="h-screen w-full max-w-[1200px] mx-auto flex justify-between items-center gap-16"></section>

JavaScript

let images = gsap.utils.toArray('img')
let text = gsap.utils.toArray('.cls-1')

let timeline = gsap.timeline({
	scrollTrigger: {
		trigger: '.animated',
		start: 'top center',
		end: 'bottom bottom',
		scrub: 2,
		markers: false
	}
})

images.forEach(image => {
	gsap.to(image, {
		yPercent: -100 * image.dataset.speed,
		xPercent: -100 * image.dataset.speed,
		ease: 'none',
		scrollTrigger: {
			scrub: image.dataset.speed
		}
	})
})