Animation triggering example

Offset

Here is some text

Dolore aliquam sunt cupiditate perferendis. Consequatur aperiam ducimus modi non laboriosam aut recusandae sed. Laborum rem amet qui ea et ut nobis. Veritatis corrupti et ipsum debitis odio veniam. Atque aut nam unde consequuntur est maiores. Vitae porro nam dolor delectus.

Other

Other

Other

Offset

Offset

        
<html>
	<head>
		<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/>
		<link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.min.css">
		<style>
body {
	margin: 0;
	padding: 0;
}

#scroll-trigger-container {
  position: relative;
}

.circle-background {
  overflow: hidden;
  position: sticky;
  top: 0;
  width: 100vw;
  height: 100vh;
}

.pinned-circle {
  fill: pink;
}

.text-part {
  padding-top: 50vh;
  position: relative;
  min-height: 100vh;
  z-index: 99;
}
		</style>
	</head>
	<body>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-gpx/1.7.0/gpx.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/ScrollTrigger.min.js"></script>
		<article class="container"><h1>Animation triggering example</h1></article>
		<article class="container"><h1>Offset</h1></article>
                <div id="scroll-trigger-container">
                  <div class="circle-background">
                    <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
                      <circle class="pinned-circle" cx="50" cy="50" r="0" />
                    </svg>
                  </div>
                  <div class="text-part">
                    <h1>Here is some text</h1>
                    <p> Dolore aliquam sunt cupiditate perferendis. Consequatur aperiam ducimus modi non laboriosam aut recusandae sed. Laborum rem amet qui ea et ut nobis. Veritatis corrupti et ipsum debitis odio veniam. Atque aut nam unde consequuntur est maiores. Vitae porro nam dolor delectus.</p>
                    <article class="container"><h1>Other</h1></article>
                    <article class="container"><h1>Other</h1></article>
                    <article class="container"><h1>Other</h1></article>
                  </div>
                </div>
		<article class="container"><h1>Offset</h1></article>
		<article class="container"><h1>Offset</h1></article>
	</body>
</html>

<script>
	gsap.registerPlugin(ScrollTrigger);
	const progressRef = document.querySelector('progress');

	const timeline = gsap.timeline({
			scrollTrigger: {
					trigger: "#scroll-trigger-container",
					markers: true,
					scrub: true,
					start: "top top", 
                                        end: `50% top`, 
                        }});

        timeline.to('.pinned-circle', { r: 75 })
</script>