Image Mask On Scroll

미리보기 안의 버튼·입력·포인터로 모션을 확인하세요. 실행 방식은 아래 활용 메모를 참고하세요.

<!doctype html>
<!-- Archived from GSAP Demo Hub / image-mask-on-scroll
Original editor: https://codepen.io/GreenSock/pen/oNjgEjm
HTML/CSS/JS source panels are preserved separately. Runtime GSAP: 3.15.0 official distribution. -->
<html lang="en" class=""><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Image Mask On Scroll</title>

<link rel="stylesheet" href="https://asset.wemashup.com/wp-content/uploads/wm-asset-library/gsap/shared/wvZQKQP.css">
<style>
body {
  height: 300vh;
  overflow-x: hidden;
}

h1,
h2 {
  font-weight: 400;
  max-width: none;
}

.comparisonSection {
  position: relative;
  padding-bottom: 56.25%; /* to maintain aspect ratio (responsive!) */
}
.comparisonImage {
  width: 100%;
  height: 100%;
}
.afterImage {
  position: absolute;
  overflow: hidden;
  top: 0;
  transform: translate(100%, 0px);
}
.afterImage img {
  transform: translate(-100%, 0px);
}
.comparisonImage img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
}
.panel {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 90vh;
}

</style></head><body>
<section class="panel">
  <h4 class="header-section">Scroll to see the before/after</h4>
</section>

<section class="comparisonSection">
  <div class="comparisonImage beforeImage">
    <img src="https://assets.codepen.io/16327/before.jpg" alt="before">
  </div>
  <div class="comparisonImage afterImage">
    <img src="https://assets.codepen.io/16327/after.jpg" alt="after">
  </div>
</section>

<script src="https://asset.wemashup.com/wp-content/uploads/wm-asset-library/gsap/shared/gsap-3.15.0-gsap.min.js"></script>
<script src="https://asset.wemashup.com/wp-content/uploads/wm-asset-library/gsap/shared/gsap-3.15.0-ScrollTrigger.min.js"></script>
<script>
gsap.utils.toArray(".comparisonSection").forEach(section => {
	let tl = gsap.timeline({
			scrollTrigger: {
				trigger: section,
				start: "center center",
        // makes the height of the scrolling (while pinning) match the width, thus the speed remains constant (vertical/horizontal)
				end: () => "+=" + section.offsetWidth, 
				scrub: true,
				pin: true,
        anticipatePin: 1
			},
			defaults: {ease: "none"}
		});
	// animate the container one way...
	tl.fromTo(section.querySelector(".afterImage"), { xPercent: 100, x: 0}, {xPercent: 0})
	  // ...and the image the opposite way (at the same time)
	  .fromTo(section.querySelector(".afterImage img"), {xPercent: -100, x: 0}, {xPercent: 0}, 0);
});


</script>
</body></html>

<section class="panel">
  <h4 class="header-section">Scroll to see the before/after</h4>
</section>

<section class="comparisonSection">
  <div class="comparisonImage beforeImage">
    <img src="https://assets.codepen.io/16327/before.jpg" alt="before">
  </div>
  <div class="comparisonImage afterImage">
    <img src="https://assets.codepen.io/16327/after.jpg" alt="after">
  </div>
</section>

body {
  height: 300vh;
  overflow-x: hidden;
}

h1,
h2 {
  font-weight: 400;
  max-width: none;
}

.comparisonSection {
  position: relative;
  padding-bottom: 56.25%; /* to maintain aspect ratio (responsive!) */
}
.comparisonImage {
  width: 100%;
  height: 100%;
}
.afterImage {
  position: absolute;
  overflow: hidden;
  top: 0;
  transform: translate(100%, 0px);
}
.afterImage img {
  transform: translate(-100%, 0px);
}
.comparisonImage img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
}
.panel {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 90vh;
}

gsap.utils.toArray(".comparisonSection").forEach(section => {
	let tl = gsap.timeline({
			scrollTrigger: {
				trigger: section,
				start: "center center",
        // makes the height of the scrolling (while pinning) match the width, thus the speed remains constant (vertical/horizontal)
				end: () => "+=" + section.offsetWidth, 
				scrub: true,
				pin: true,
        anticipatePin: 1
			},
			defaults: {ease: "none"}
		});
	// animate the container one way...
	tl.fromTo(section.querySelector(".afterImage"), { xPercent: 100, x: 0}, {xPercent: 0})
	  // ...and the image the opposite way (at the same time)
	  .fromTo(section.querySelector(".afterImage img"), {xPercent: -100, x: 0}, {xPercent: 0}, 0);
});