Function fxIntro

js/index.js:537–592

(itemElement, options)

// First animation effect
const fxIntro = (itemElement, options) => {
	// Set up the animation settings
	const settings = setupAnimationDefaults(itemElement, options);
	// Select the elements to animate
	const imageElement = itemElement.querySelector('.content__img');
	const inner = imageElement.querySelector('.content__img-inner');
	
	// Define and return the GSAP timeline for the animation
	return gsap.timeline({
		// Default easing for all animations in this timeline
		defaults: {
			ease: 'none'
		},
		// Event hook for when the timeline starts
		onStart: () => {
			// Apply perspective if specified
			if ( settings.perspective ) {
				gsap.set(imageElement, {
					perspective: settings.perspective
				});
			}
		},
		// ScrollTrigger configuration for this timeline
		scrollTrigger: settings.scrollTrigger
	})
	// The sequence of animation steps
	.fromTo(imageElement, {
		scale: 1,
		xPercent: 0,
		filter: 'brightness(100%)',
		'clip-path': settings.clipPaths.step1.initial
	}, {
		scale: 0.5,
		xPercent: -50,
		'clip-path': settings.clipPaths.step1.final,
		filter: 'brightness(500%)',
	}, 0)
	.to(inner, {
		rotationY: -40,
		scale: 1.4,
	}, 0)
	.to(imageElement, {
		startAt: {
			'clip-path': settings.clipPaths.step2.initial
		},
		scale: 0,
		xPercent: -100,
		'clip-path': settings.clipPaths.step2.final,
		filter: 'brightness(100%)'
	})
	.to(inner, {
		startAt: {rotationY: 40},
		rotationY: 0,
		scale: 1,
	}, '<');
}

// Main function to apply scroll-triggered animations