Fight section

V000-41

Een preview om een afbeelding met daaronder tekstuele content weer te geven. Plus een mogelijkheid om de afbeelding te animeren via GSAP.

Hoe te gebruiken?

Kopieer onderstaande code in je template. Als je GSAP wil gebruiken moet dit ook nog in de config aangegeven worden. Dit kan door gsap op "true" te zetten in plaats van "false"

Voorvertoning

Alvast beginnen met een basis opmaak?

HTML
Kopiëren<div class="bg-tertiary">
	<nc-image name="image-wide" width="1440" ratio="1" attributes="class=image-scroll-animation"></nc-image>
</div>

<section class="fight-section bg-tertiary">
	<div class="container">
		<div class="row">
			<div class="col-12 col-lg-8">
				<nc-text name="fight-partner"></nc-text>
			</div>
			<div class="col-12 col-lg-4 pl-lg-5">
				<nc-text name="fight-usps"></nc-text>
			</div>
		</div>
	</div>
</section>

CSS
Kopiëren.fight-section {
	padding: 2rem 0;
}

.image-scroll-animation img {
	object-fit: cover;
	clip-path: inset(0 calc(((100vw - var(--container-width)) / 2) + 15px) round 40px);
	aspect-ratio: 5/3;
}

JS
Kopiërenif (document.querySelector('.image-scroll-animation')) {
	gsap.to('.image-scroll-animation img', {
		clipPath: 'inset(0px 0px round 0px)',
		scrollTrigger: {
			trigger: '.image-scroll-animation',
			scrub: true,
			start: "top 40%",
			end: "center 55%",
		}
	});
}