Codrops 원본

Unreveal Effects for Content Previews

섹션 · MIT

섹션 더 보기

Unreveal Effects for Content Previews 정적 미리보기

갤러리 안에서는 화면을 벗어나거나 움직임을 멈추면 예제도 닫힙니다. 다시 재생할 때는 처음부터 시작해요.

큰 화면으로 보기

SOURCE FILES

원본 코드 읽기

13개 파일

수집한 원본 소스와 실행 안내를 함께 제공합니다.

src/css/base.css

파일 저장

*,
*::after,
*::before {
	box-sizing: border-box;
}

:root {
	font-size: 18px;
	--color-text: #20221f;
	--color-link: #000;
	--color-bg: #b9b3af;
	--color-bg-preview: #131312;
	--color-bg-overlay: #131312;
	--color-text-preview: #b3ac99;
	--color-title-preview: #923538;
	--page-padding: 1rem 2rem;
	--preview-padding: 0 2rem 1rem;
}

body #cdawrap {
	justify-self: start;
}

body {
	margin: 0;
	font-weight: 300;
	text-transform: uppercase;
	color: var(--color-text);
	background-color: var(--color-bg);
	font-family: acumin-pro, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

.demo-2 {
	--color-text: #332e1b;
	--color-text-inverted: #b3ac99;
	--color-bg: #e4e2d9;
	--color-bg-overlay: #3a3a2a;
	--color-text-preview: #fffaea;
	--color-title-preview: #ff9800;
}

.demo-3 {
	--color-text: #efe5e5;
	--color-link: #efe5e5;
    --color-text-inverted: #b3ac99;
    --color-bg: #42423e;
    --color-bg-overlay: #86412f;
    --color-text-preview: #fffaea;
    --color-title-preview: #eba089;
}

/* Page Loader */
.js .loading::before,
.js .loading::after {
	content: '';
	position: fixed;
	z-index: 1000;
}

.js .loading::before {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--color-bg);
}

.js .loading::after {
	top: 50%;
	left: 50%;
	width: 60px;
	height: 60px;
	margin: -30px 0 0 -30px;
	border-radius: 50%;
	opacity: 0.4;
	background: var(--color-link);
	animation: loaderAnim 0.7s linear infinite alternate forwards;

}

@keyframes loaderAnim {
	to {
		opacity: 1;
		transform: scale3d(0.5,0.5,1);
	}
}

a {
	text-decoration: none;
	color: var(--color-link);
	outline: none;
	cursor: pointer;
}

a:hover {
	color: var(--color-link);
	outline: none;
}

/* Better focus styles from https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible */
a:focus {
	/* Provide a fallback style for browsers
	 that don't support :focus-visible */
	outline: none;
	background: lightgrey;
}

a:focus:not(:focus-visible) {
	/* Remove the focus indicator on mouse-focus for browsers
	 that do support :focus-visible */
	background: transparent;
}

a:focus-visible {
	/* Draw a very noticeable focus style for
	 keyboard-focus on browsers that do support
	 :focus-visible */
	outline: 2px solid red;
	background: transparent;
}

.unbutton {
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	font: inherit;
	cursor: pointer;
}

.unbutton:focus {
	outline: none;
}

.oh {
	position: relative;
	overflow: hidden;
}

.oh__inner {
	will-change: transform;
	display: inline-block;
}

.line {
	transform-origin: 0;
	white-space: nowrap;
	will-change: transform;
}

main {
	display: grid;
	width: 100%;
	height: 100vh;
	grid-template-rows: auto auto;
	grid-template-columns: 100%;
}

.frame {
	color: var(--color-title);
	padding: var(--page-padding);
	position: relative;
	grid-gap: 0.5rem;
	z-index: 2;
	font-size: 0.75rem;
	pointer-events: none;
	grid-template-columns: 100%;
	grid-template-rows: auto auto auto auto;
	display: grid;
	grid-template-areas: 'title' 'prev' 'sponsor' 'nav';
	justify-content: start;
	justify-items: start;
	grid-area: 1 / 1 / 2 / 2;
	width: 100%;
}

.frame a {
	pointer-events: auto;
}

.frame a:not(.frame__title-back) {
	white-space: nowrap;
	overflow: hidden;
	position: relative;
}

.frame a:not(.frame__title-back)::before {
	content: '';
	height: 1px;
	width: 100%;
	background: currentColor;
	position: absolute;
	top: 90%;
	transition: transform 0.3s;
	transform-origin: 0% 50%;
}

.frame a:not(.frame__title-back):hover::before {
	transform: scaleX(0);
	transform-origin: 100% 50%;
}

.frame__title {
	grid-area: title;
	display: flex;
}

.frame__title-main {
	font-size: 0.75rem;
	margin: 0;
	font-weight: 300;
}

.frame__title-back {
	position: relative;
	display: flex;
	align-items: flex-end;
}

.frame__title-back span {
	display: none;
}

.frame__title-back svg {
	fill: currentColor;
}

.frame__prev {
	grid-area: prev;
}

.frame__demos {
	grid-area: nav;
	display: flex;
	flex-wrap: wrap;
	justify-self: stretch;
	gap: 1.5rem;
}

.content {
	line-height: 1;
	position: relative;
	z-index: 1;
	grid-row: 2;
}

.preview-open .content {
	pointer-events: none;
}

.demo-3.preview-open .content {
	z-index: 3;
}

.content__item {
	width: 100%;
	max-width: 500px;
	padding: calc(3rem + 5vh) 2rem 4rem;
	margin: 0;
}

.content__item:nth-child(even) {
	padding-top: calc(3rem + 15vh);
}

.content__item-img-wrap {
	overflow: hidden;
	position: relative;
	width: 100%;
	aspect-ratio: 0.75;
	cursor: pointer;
	will-change: transform;
}

.demo-3 .preview__item .content__item-img-wrap {
	width: auto;
	height: 100%;
	aspect-ratio: auto;
}

.content__item-img {
	background-size: cover;
	background-position: 50% 50%;
	width: 100%;
	height: 100%;
	will-change: transform;
}

.content__item-title {
	font-size: clamp(2rem, 3.25vw, 1.85rem);
	font-family: kudryashev-d-excontrast-sans, sans-serif;
	font-weight: 300;
	margin: 0 0 0.5rem;
}

.content__item-title .oh__inner {
	padding-top: 0.75vw;
	line-height: 1.2;
}

.content__item-caption {
	margin-top: 0.75rem;
}

.content__overlay {
	background: var(--color-bg-overlay);
	position: fixed;
	top: calc(50% - 75vmax);
	left: calc(50% - 75vmax);
	width: 150vmax;
	height: 150vmax;
	pointer-events: none;
	will-change: transform;
	z-index: 3;
}

.overlay__inner {
	background: var(--color-bg-overlay);
	width: 100%;
	height: 100%;
	position: relative;
}

.demo-1 .content__overlay {
	transform: rotate(45deg);
	background: transparent;
}

.demo-2 .content__overlay {
	border-radius: 50%;
	transform: scale(0);
}

.demo-3 .content__overlay {
	width: 100vw;
	height: 100%;
	transform: scaleY(0);
	top: 0;
	left: 0;
}

.preview {
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	display: grid;
	pointer-events: none;
	z-index: 4;
	color: var(--color-text-preview);
}

.preview__item {
	grid-area: 1 / 1 / -1 / -1;
	opacity: 0;
	pointer-events: none;
	display: grid;
	grid-gap: 1rem;
	padding-top: 2rem;
	grid-template-columns: 100%;
	grid-template-rows: auto auto auto auto auto 1fr;
	grid-template-areas: 'title' 'subtitle' 'meta' 'box-left' 'box-right' '...';
	will-change: clip-path;
}

.preview__item--current {
	opacity: 1;
	pointer-events: auto;
}

.preview__item-img-outer {
	align-self: center;
	justify-self: center;
	width: 60vw;
	max-width: 800px;
	justify-self: center;
	grid-area: 1 / 1 / -1 / -1;
}

.demo-1 .preview__item-img-outer {
	transform: rotate(45deg);
	aspect-ratio: 0.7;
	width: 33vw;
}

.demo-2 .preview__item-img-outer {
	height: 100%;
	width: 36vw;
}

.demo-3 .preview__item-img-outer {
	height: 100%;
	width: 36vw;
}

.preview__item-img-wrap {
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
	will-change: transform;
}

.preview__item-img {
	background-size: cover;
	background-position: 50% 50%;
	width: 100%;
	height: 100%;
	will-change: transform;
}

.preview__item-title {
	align-self: center;
	justify-self: center;
	grid-area: title;
	font-size: clamp(3rem, 24vw, 17rem);
	font-family: kudryashev-d-excontrast-sans, sans-serif;
	font-weight: 300;
	margin: 0;
	line-height: 1;
	will-change: transform;
	padding-top: 1vw;
}

.preview__item-subtitle {
	justify-self: center;
	position: relative;
	grid-area: subtitle;
	font-weight: 300;
	margin: 0;
	color: var(--color-title-preview);
}

.preview__item-meta {
	justify-self: center;
	position: relative;
	grid-area: meta;
}

.preview__item-box {
	padding: var(--preview-padding);
	position: relative;
	max-width: 450px;
	will-change: transform;
	justify-self: center;
	text-align: center;
}

.preview__item-box--right {
	grid-area: box-right;
}

.preview__item-box--left {
	grid-area: box-left;
}

.preview__item-box-title {
	margin: 0;
	font-weight: 400;
	color: var(--color-title-preview);
}

.preview__item-box-desc {
	will-change: transform, opacity;
}

.preview__back {
	cursor: pointer;
	position: absolute;
	bottom: 2.5rem;
	left: 50%;
	z-index: 300;
	opacity: 0;
	pointer-events: none;
	transform: translateX(-50%);
	will-change: transform, opacity;
}

.preview-open .preview__back {
	pointer-events: auto;
}

.preview__back svg {
	pointer-events: none;
	stroke: var(--color-text-preview);
	stroke-width: 1px;
	transition: stroke .3s;
}

@media screen and (min-width: 53em) {
	body {
		overflow: hidden;
	}
	main {
		grid-template-rows: 100%;
	}
	.frame {
		grid-area: 1 / 1 / -1 / -1;
		height: 100vh;
		grid-gap: 2rem;
		align-content: space-between;
		grid-template-columns: auto auto 1fr;
		grid-template-rows: auto auto;
		grid-template-areas: 'title prev sponsor' 'nav nav nav';
	}
	.content {
		height: 100vh;
		display: flex;
		align-items: center;
		align-content: center;
		grid-area: 1 / 1 / -1 / -1;
	}
	.content__item {
		height: 100%;
		width: 25%;
	}
	.preview__item {
		padding-top: 0;
		grid-template-columns: 30% 1fr 30%;
		grid-template-rows: 1fr auto auto auto;
		grid-template-areas:'title title title'
						'box-left subtitle box-right'
						'box-left meta box-right'
						'box-left ... box-right';
	}
	.preview__item-title {
		grid-row: 1 / span 4;
	}
	.preview__item-box--right {
		justify-self: end;
		text-align: right;
	}
	.preview__item-box--left {
		justify-self: start;
		text-align: left;
	}
	body #cdawrap {
		justify-self: end;
	}
}

src/index.html

파일 저장

<!DOCTYPE html>
<html lang="en" class="no-js">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Unreveal Effects for Content Previews | Demo 1 | Codrops</title>
		<meta name="description" content="Some explorations of page transitions using covering elements and CSS clip-paths." />
		<meta name="keywords" content="page transition, css, javascript, effect, animation" />
		<meta name="author" content="Codrops" />
		<link rel="shortcut icon" href="favicon.ico">
		<link rel="stylesheet" href="https://use.typekit.net/nfn5vax.css">
		<link rel="stylesheet" type="text/css" href="css/base.css" />
		<script>document.documentElement.className="js";var supportsCssVars=function(){var e,t=document.createElement("style");return t.innerHTML="root: { --tmp-var: bold; }",document.head.appendChild(t),e=!!(window.CSS&&window.CSS.supports&&window.CSS.supports("font-weight","var(--tmp-var)")),t.parentNode.removeChild(t),e};supportsCssVars()||alert("Please view this demo in a modern browser that supports CSS Variables.");</script>
	</head>
	<body class="demo-1 loading">
		<main>
			<div class="frame">
				<div class="frame__title"> 
					<h1 class="frame__title-main">Unreveal Effects</h1> 
					<a aria-label="Back to the article" class="frame__title-back" href="https://tympanus.net/codrops/?p=65427"> 
						<span class="oh__inner">Back to the article</span> 
						<svg width="16px" height="16px" viewBox="0 0 24 24"><path vector-effect="non-scaling-stroke" d="M18.25 15.5a.75.75 0 00.75-.75v-9a.75.75 0 00-.75-.75h-9a.75.75 0 000 1.5h7.19L6.22 16.72a.75.75 0 101.06 1.06L17.5 7.56v7.19c0 .414.336.75.75.75z"></path>
						</svg>
					</a>
				</div>
				<a class="frame__prev" href="http://tympanus.net/Development/ScrollPanels/">Previous demo</a>
				<nav class="frame__demos">
					<span class="frame__demos-item">Rotated</span>
					<a class="frame__demos-item" href="index2.html">Circle</a>
					<a class="frame__demos-item" href="index3.html">Strip</a>
				</nav>
			</div>
			<div class="content">
				<figure class="content__item">
					<h2 class="content__item-title oh"><span class="oh__inner">Olalla</span></h2>
					<div class="content__item-img-wrap">
						<div class="content__item-img" style="background-image: url(img/1.avif)"></div>
					</div>
					<figcaption class="content__item-caption">
						You could be my unintended
						Choice to live my life extended
						You could be the one I'll always love
					</figcaption>
				</figure>
				<figure class="content__item">
					<h2 class="content__item-title oh"><span class="oh__inner">El Búho</span></h2>
					<div class="content__item-img-wrap">
						<div class="content__item-img" style="background-image: url(img/2.avif)"></div>
					</div>
					<figcaption class="content__item-caption">
						You could be the one who listens
						To my deepest inquisitions
						You could be the one I'll always love
					</figcaption>
				</figure>
				<figure class="content__item">
					<h2 class="content__item-title oh"><span class="oh__inner">Nocturne</span></h2>
					<div class="content__item-img-wrap">
						<div class="content__item-img" style="background-image: url(img/3.avif)"></div>
					</div>
					<figcaption class="content__item-caption">
						I'll be there as soon as I can
						But I'm busy mending broken
						Pieces of the life I had before
					</figcaption>
				</figure>
				<figure class="content__item">
					<h2 class="content__item-title oh"><span class="oh__inner">Outsider</span></h2>
					<div class="content__item-img-wrap">
						<div class="content__item-img" style="background-image: url(img/4.avif)"></div>
					</div>
					<figcaption class="content__item-caption">
						First there was the one who challenged
						All my dreams and all my balance
						She could never be as good as you
					</figcaption>
				</figure>
			</div>
			<div class="content__overlay">
				<div class="overlay__inner"></div>
			</div>
			<div class="preview">
				<div class="preview__item">
					<div class="preview__item-img-outer">
						<div class="preview__item-img-wrap">
							<div class="preview__item-img" style="background-image: url(img/1.avif)"></div>
						</div>
					</div>
					<h2 class="preview__item-title oh"><span class="oh__inner">Love</span></h2>
					<h3 class="preview__item-subtitle oh"><span class="oh__inner">Olalla</span></h3>
					<span class="preview__item-meta oh"><span class="oh__inner">2003</span></span>
					<div class="preview__item-box preview__item-box--left">
						<h3 class="preview__item-box-title oh"><span class="oh__inner">Setting</span></h3>
						<p class="preview__item-box-desc">At the violet hour, when the eyes and back turn upward from the desk, when the human engine waits.</p>
					</div>
					<div class="preview__item-box preview__item-box--right">
						<h3 class="preview__item-box-title oh"><span class="oh__inner">Location</span></h3>
						<p class="preview__item-box-desc">April is the cruellest month, breeding lilacs out of the dead land, mixing memory and desire, stirring dull roots with spring rain.</p>
					</div>
				</div>
				<div class="preview__item">
					<div class="preview__item-img-outer">
						<div class="preview__item-img-wrap">
							<div class="preview__item-img" style="background-image: url(img/2.avif)"></div>
						</div>
					</div>
					<h2 class="preview__item-title oh"><span class="oh__inner">Brave</span></h2>
					<h3 class="preview__item-subtitle oh"><span class="oh__inner">El Búho</span></h3>
					<span class="preview__item-meta oh"><span class="oh__inner">2007</span></span>
					<div class="preview__item-box preview__item-box--left">
						<h3 class="preview__item-box-title oh"><span class="oh__inner">Setting</span></h3>
						<p class="preview__item-box-desc">Madame sosostris, famous clairvoyante, had a bad cold, nevertheless is known to be the wisest woman in europe.</p>
					</div>
					<div class="preview__item-box preview__item-box--right">
						<h3 class="preview__item-box-title oh"><span class="oh__inner">Location</span></h3>
						<p class="preview__item-box-desc">Winter kept us warm, covering earth in forgetful snow, feeding a little life with dried tubers.</p>
					</div>
				</div>
				<div class="preview__item">
					<div class="preview__item-img-outer">
						<div class="preview__item-img-wrap">
							<div class="preview__item-img" style="background-image: url(img/3.avif)"></div>
						</div>
					</div>
					<h2 class="preview__item-title oh"><span class="oh__inner">Rose</span></h2>
					<h3 class="preview__item-subtitle oh"><span class="oh__inner">Nocturne</span></h3>
					<span class="preview__item-meta oh"><span class="oh__inner">2010</span></span>
					<div class="preview__item-box preview__item-box--left">
						<h3 class="preview__item-box-title oh"><span class="oh__inner">Setting</span></h3>
						<p class="preview__item-box-desc">The chair she sat in, like a burnished throne, glowed on the marble, where the glass.</p>
					</div>
					<div class="preview__item-box preview__item-box--right">
						<h3 class="preview__item-box-title oh"><span class="oh__inner">Location</span></h3>
						<p class="preview__item-box-desc">Doubled the flames of sevenbranched candelabra reflecting light upon the table as the glitter of her jewels rose to meet it.</p>
					</div>
				</div>
				<div class="preview__item">
					<div class="preview__item-img-outer">
						<div class="preview__item-img-wrap">
							<div class="preview__item-img" style="background-image: url(img/4.avif)"></div>
						</div>
					</div>
					<h2 class="preview__item-title oh"><span class="oh__inner">Lily</span></h2>
					<h3 class="preview__item-subtitle oh"><span class="oh__inner">Outsider</span></h3>
					<span class="preview__item-meta oh"><span class="oh__inner">2021</span></span>
					<div class="preview__item-box preview__item-box--left">
						<h3 class="preview__item-box-title oh"><span class="oh__inner">Setting</span></h3>
						<p class="preview__item-box-desc">From satin cases poured in rich profusion; in vials of ivory and coloured glass.</p>
					</div>
					<div class="preview__item-box preview__item-box--right">
						<h3 class="preview__item-box-title oh"><span class="oh__inner">Location</span></h3>
						<p class="preview__item-box-desc">Huge sea-wood fed with copper burned green and orange, framed by the coloured stone, in which sad light a carvéd dolphin swam.</p>
					</div>
				</div>
				<button class="unbutton preview__back" aria-label="Back to content">
					<svg width="200px" height="36px" viewBox="0 0 50 9">
						<path vector-effect="non-scaling-stroke" d="m0 4.5 5-3m-5 3 5 3m45-3h-77"></path>
					</svg>
				</button>
			</div>
		</main>
		<script type="module" src="js/index.js"></script>
	</body>
</html>

함께 쓰는 파일 11개 보기

src/index2.html

파일 저장

<!DOCTYPE html>
<html lang="en" class="no-js">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Unreveal Effects for Content Previews | Demo 2 | Codrops</title>
		<meta name="description" content="Some explorations of page transitions using covering elements and CSS clip-paths." />
		<meta name="keywords" content="page transition, css, javascript, effect, animation" />
		<meta name="author" content="Codrops" />
		<link rel="shortcut icon" href="favicon.ico">
		<link rel="stylesheet" href="https://use.typekit.net/nfn5vax.css">
		<link rel="stylesheet" type="text/css" href="css/base.css" />
		<script>document.documentElement.className="js";var supportsCssVars=function(){var e,t=document.createElement("style");return t.innerHTML="root: { --tmp-var: bold; }",document.head.appendChild(t),e=!!(window.CSS&&window.CSS.supports&&window.CSS.supports("font-weight","var(--tmp-var)")),t.parentNode.removeChild(t),e};supportsCssVars()||alert("Please view this demo in a modern browser that supports CSS Variables.");</script>
	</head>
	<body class="demo-2 loading">
		<main>
			<div class="frame">
				<div class="frame__title"> 
					<h1 class="frame__title-main">Unreveal Effects</h1> 
					<a aria-label="Back to the article" class="frame__title-back" href="https://tympanus.net/codrops/?p=65427"> 
						<span class="oh__inner">Back to the article</span> 
						<svg width="16px" height="16px" viewBox="0 0 24 24"><path vector-effect="non-scaling-stroke" d="M18.25 15.5a.75.75 0 00.75-.75v-9a.75.75 0 00-.75-.75h-9a.75.75 0 000 1.5h7.19L6.22 16.72a.75.75 0 101.06 1.06L17.5 7.56v7.19c0 .414.336.75.75.75z"></path>
						</svg>
					</a>
				</div>
				<a class="frame__prev" href="http://tympanus.net/Development/ScrollPanels/">Previous demo</a>
				<nav class="frame__demos">
					<a class="frame__demos-item" href="index.html">Rotated</a>
					<span class="frame__demos-item">Circle</span>
					<a class="frame__demos-item" href="index3.html">Strip</a>
				</nav>
			</div>
			<div class="content">
				<figure class="content__item">
					<h2 class="content__item-title oh"><span class="oh__inner">El Amante</span></h2>
					<div class="content__item-img-wrap">
						<div class="content__item-img" style="background-image: url(img/5.avif)"></div>
					</div>
					<figcaption class="content__item-caption">
						You could be my unintended
						Choice to live my life extended
						You could be the one I'll always love
					</figcaption>
				</figure>
				<figure class="content__item">
					<h2 class="content__item-title oh"><span class="oh__inner">La Querida</span></h2>
					<div class="content__item-img-wrap">
						<div class="content__item-img" style="background-image: url(img/6.avif)"></div>
					</div>
					<figcaption class="content__item-caption">
						You could be the one who listens
						To my deepest inquisitions
						You could be the one I'll always love
					</figcaption>
				</figure>
				<figure class="content__item">
					<h2 class="content__item-title oh"><span class="oh__inner">El Héroe</span></h2>
					<div class="content__item-img-wrap">
						<div class="content__item-img" style="background-image: url(img/7.avif)"></div>
					</div>
					<figcaption class="content__item-caption">
						I'll be there as soon as I can
						But I'm busy mending broken
						Pieces of the life I had before
					</figcaption>
				</figure>
				<figure class="content__item">
					<h2 class="content__item-title oh"><span class="oh__inner">El Encaje</span></h2>
					<div class="content__item-img-wrap">
						<div class="content__item-img" style="background-image: url(img/8.avif)"></div>
					</div>
					<figcaption class="content__item-caption">
						First there was the one who challenged
						All my dreams and all my balance
						She could never be as good as you
					</figcaption>
				</figure>
			</div>
			<div class="content__overlay"></div>
			<div class="preview">
				<div class="preview__item">
					<div class="preview__item-img-outer">
						<div class="preview__item-img-wrap">
							<div class="preview__item-img" style="background-image: url(img/5.avif)"></div>
						</div>
					</div>
					<h2 class="preview__item-title oh"><span class="oh__inner">Lover</span></h2>
					<h3 class="preview__item-subtitle oh"><span class="oh__inner">El Amante</span></h3>
					<span class="preview__item-meta oh"><span class="oh__inner">2003</span></span>
					<div class="preview__item-box preview__item-box--left">
						<h3 class="preview__item-box-title oh"><span class="oh__inner">Setting</span></h3>
						<p class="preview__item-box-desc">At the violet hour, when the eyes and back turn upward from the desk, when the human engine waits.</p>
					</div>
					<div class="preview__item-box preview__item-box--right">
						<h3 class="preview__item-box-title oh"><span class="oh__inner">Location</span></h3>
						<p class="preview__item-box-desc">April is the cruellest month, breeding lilacs out of the dead land, mixing memory and desire, stirring dull roots with spring rain.</p>
					</div>
				</div>
				<div class="preview__item">
					<div class="preview__item-img-outer">
						<div class="preview__item-img-wrap">
							<div class="preview__item-img" style="background-image: url(img/6.avif)"></div>
						</div>
					</div>
					<h2 class="preview__item-title oh"><span class="oh__inner">Sweet</span></h2>
					<h3 class="preview__item-subtitle oh"><span class="oh__inner">La Querida</span></h3>
					<span class="preview__item-meta oh"><span class="oh__inner">2007</span></span>
					<div class="preview__item-box preview__item-box--left">
						<h3 class="preview__item-box-title oh"><span class="oh__inner">Setting</span></h3>
						<p class="preview__item-box-desc">Madame sosostris, famous clairvoyante, had a bad cold, nevertheless is known to be the wisest woman in europe.</p>
					</div>
					<div class="preview__item-box preview__item-box--right">
						<h3 class="preview__item-box-title oh"><span class="oh__inner">Location</span></h3>
						<p class="preview__item-box-desc">Winter kept us warm, covering earth in forgetful snow, feeding a little life with dried tubers.</p>
					</div>
				</div>
				<div class="preview__item">
					<div class="preview__item-img-outer">
						<div class="preview__item-img-wrap">
							<div class="preview__item-img" style="background-image: url(img/7.avif)"></div>
						</div>
					</div>
					<h2 class="preview__item-title oh"><span class="oh__inner">Hero</span></h2>
					<h3 class="preview__item-subtitle oh"><span class="oh__inner">El Héroe</span></h3>
					<span class="preview__item-meta oh"><span class="oh__inner">2010</span></span>
					<div class="preview__item-box preview__item-box--left">
						<h3 class="preview__item-box-title oh"><span class="oh__inner">Setting</span></h3>
						<p class="preview__item-box-desc">The chair she sat in, like a burnished throne, glowed on the marble, where the glass.</p>
					</div>
					<div class="preview__item-box preview__item-box--right">
						<h3 class="preview__item-box-title oh"><span class="oh__inner">Location</span></h3>
						<p class="preview__item-box-desc">Doubled the flames of sevenbranched candelabra reflecting light upon the table as the glitter of her jewels rose to meet it.</p>
					</div>
				</div>
				<div class="preview__item">
					<div class="preview__item-img-outer">
						<div class="preview__item-img-wrap">
							<div class="preview__item-img" style="background-image: url(img/8.avif)"></div>
						</div>
					</div>
					<h2 class="preview__item-title oh"><span class="oh__inner">Lace</span></h2>
					<h3 class="preview__item-subtitle oh"><span class="oh__inner">El Encaje</span></h3>
					<span class="preview__item-meta oh"><span class="oh__inner">2021</span></span>
					<div class="preview__item-box preview__item-box--left">
						<h3 class="preview__item-box-title oh"><span class="oh__inner">Setting</span></h3>
						<p class="preview__item-box-desc">From satin cases poured in rich profusion; in vials of ivory and coloured glass.</p>
					</div>
					<div class="preview__item-box preview__item-box--right">
						<h3 class="preview__item-box-title oh"><span class="oh__inner">Location</span></h3>
						<p class="preview__item-box-desc">Huge sea-wood fed with copper burned green and orange, framed by the coloured stone, in which sad light a carvéd dolphin swam.</p>
					</div>
				</div>
				<button class="unbutton preview__back" aria-label="Back to content">
					<svg width="200px" height="36px" viewBox="0 0 50 9">
						<path vector-effect="non-scaling-stroke" d="m0 4.5 5-3m-5 3 5 3m45-3h-77"></path>
					</svg>
				</button>
			</div>
		</main>
		<script type="module" src="js/index2.js"></script>
	</body>
</html>

src/index3.html

파일 저장

<!DOCTYPE html>
<html lang="en" class="no-js">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Unreveal Effects for Content Previews | Demo 3 | Codrops</title>
		<meta name="description" content="Some explorations of page transitions using covering elements and CSS clip-paths." />
		<meta name="keywords" content="page transition, css, javascript, effect, animation" />
		<meta name="author" content="Codrops" />
		<link rel="shortcut icon" href="favicon.ico">
		<link rel="stylesheet" href="https://use.typekit.net/nfn5vax.css">
		<link rel="stylesheet" type="text/css" href="css/base.css" />
		<script>document.documentElement.className="js";var supportsCssVars=function(){var e,t=document.createElement("style");return t.innerHTML="root: { --tmp-var: bold; }",document.head.appendChild(t),e=!!(window.CSS&&window.CSS.supports&&window.CSS.supports("font-weight","var(--tmp-var)")),t.parentNode.removeChild(t),e};supportsCssVars()||alert("Please view this demo in a modern browser that supports CSS Variables.");</script>
	</head>
	<body class="demo-3 loading">
		<main>
			<div class="frame">
				<div class="frame__title"> 
					<h1 class="frame__title-main">Unreveal Effects</h1> 
					<a aria-label="Back to the article" class="frame__title-back" href="https://tympanus.net/codrops/?p=65427"> 
						<span class="oh__inner">Back to the article</span> 
						<svg width="16px" height="16px" viewBox="0 0 24 24"><path vector-effect="non-scaling-stroke" d="M18.25 15.5a.75.75 0 00.75-.75v-9a.75.75 0 00-.75-.75h-9a.75.75 0 000 1.5h7.19L6.22 16.72a.75.75 0 101.06 1.06L17.5 7.56v7.19c0 .414.336.75.75.75z"></path>
						</svg>
					</a>
				</div>
				<a class="frame__prev" href="http://tympanus.net/Development/ScrollPanels/">Previous demo</a>
				<nav class="frame__demos">
					<a class="frame__demos-item" href="index.html">Rotated</a>
					<a class="frame__demos-item" href="index2.html">Circle</a>
					<span class="frame__demos-item">Strip</span>
				</nav>
			</div>
			<div class="content">
				<figure class="content__item">
					<h2 class="content__item-title oh"><span class="oh__inner">Magic Leaf</span></h2>
					<div class="content__item-img-wrap">
						<div class="content__item-img" style="background-image: url(img/9.avif)"></div>
					</div>
					<figcaption class="content__item-caption">
						You could be my unintended
						Choice to live my life extended
						You could be the one I'll always love
					</figcaption>
				</figure>
				<figure class="content__item">
					<h2 class="content__item-title oh"><span class="oh__inner">Full Heart</span></h2>
					<div class="content__item-img-wrap">
						<div class="content__item-img" style="background-image: url(img/10.avif)"></div>
					</div>
					<figcaption class="content__item-caption">
						You could be the one who listens
						To my deepest inquisitions
						You could be the one I'll always love
					</figcaption>
				</figure>
				<figure class="content__item">
					<h2 class="content__item-title oh"><span class="oh__inner">Restless</span></h2>
					<div class="content__item-img-wrap">
						<div class="content__item-img" style="background-image: url(img/11.avif)"></div>
					</div>
					<figcaption class="content__item-caption">
						I'll be there as soon as I can
						But I'm busy mending broken
						Pieces of the life I had before
					</figcaption>
				</figure>
				<figure class="content__item">
					<h2 class="content__item-title oh"><span class="oh__inner">Soft Skin</span></h2>
					<div class="content__item-img-wrap">
						<div class="content__item-img" style="background-image: url(img/12.avif)"></div>
					</div>
					<figcaption class="content__item-caption">
						First there was the one who challenged
						All my dreams and all my balance
						She could never be as good as you
					</figcaption>
				</figure>
				<div class="content__overlay"></div>
			</div>
			<div class="preview">
				<div class="preview__item">
					<div class="preview__item-img-outer">
						
					</div>
					<h2 class="preview__item-title oh"><span class="oh__inner">Bright</span></h2>
					<h3 class="preview__item-subtitle oh"><span class="oh__inner">Magic Leaf</span></h3>
					<span class="preview__item-meta oh"><span class="oh__inner">2003</span></span>
					<div class="preview__item-box preview__item-box--left">
						<h3 class="preview__item-box-title oh"><span class="oh__inner">Setting</span></h3>
						<p class="preview__item-box-desc">At the violet hour, when the eyes and back turn upward from the desk, when the human engine waits.</p>
					</div>
					<div class="preview__item-box preview__item-box--right">
						<h3 class="preview__item-box-title oh"><span class="oh__inner">Location</span></h3>
						<p class="preview__item-box-desc">April is the cruellest month, breeding lilacs out of the dead land, mixing memory and desire, stirring dull roots with spring rain.</p>
					</div>
				</div>
				<div class="preview__item">
					<div class="preview__item-img-outer">
						
					</div>
					<h2 class="preview__item-title oh"><span class="oh__inner">Holy</span></h2>
					<h3 class="preview__item-subtitle oh"><span class="oh__inner">Full Heart</span></h3>
					<span class="preview__item-meta oh"><span class="oh__inner">2007</span></span>
					<div class="preview__item-box preview__item-box--left">
						<h3 class="preview__item-box-title oh"><span class="oh__inner">Setting</span></h3>
						<p class="preview__item-box-desc">Madame sosostris, famous clairvoyante, had a bad cold, nevertheless is known to be the wisest woman in europe.</p>
					</div>
					<div class="preview__item-box preview__item-box--right">
						<h3 class="preview__item-box-title oh"><span class="oh__inner">Location</span></h3>
						<p class="preview__item-box-desc">Winter kept us warm, covering earth in forgetful snow, feeding a little life with dried tubers.</p>
					</div>
				</div>
				<div class="preview__item">
					<div class="preview__item-img-outer">
						
					</div>
					<h2 class="preview__item-title oh"><span class="oh__inner">Stout</span></h2>
					<h3 class="preview__item-subtitle oh"><span class="oh__inner">Restless</span></h3>
					<span class="preview__item-meta oh"><span class="oh__inner">2010</span></span>
					<div class="preview__item-box preview__item-box--left">
						<h3 class="preview__item-box-title oh"><span class="oh__inner">Setting</span></h3>
						<p class="preview__item-box-desc">The chair she sat in, like a burnished throne, glowed on the marble, where the glass.</p>
					</div>
					<div class="preview__item-box preview__item-box--right">
						<h3 class="preview__item-box-title oh"><span class="oh__inner">Location</span></h3>
						<p class="preview__item-box-desc">Doubled the flames of sevenbranched candelabra reflecting light upon the table as the glitter of her jewels rose to meet it.</p>
					</div>
				</div>
				<div class="preview__item">
					<div class="preview__item-img-outer">
						
					</div>
					<h2 class="preview__item-title oh"><span class="oh__inner">Fervid</span></h2>
					<h3 class="preview__item-subtitle oh"><span class="oh__inner">Soft Skin</span></h3>
					<span class="preview__item-meta oh"><span class="oh__inner">2021</span></span>
					<div class="preview__item-box preview__item-box--left">
						<h3 class="preview__item-box-title oh"><span class="oh__inner">Setting</span></h3>
						<p class="preview__item-box-desc">From satin cases poured in rich profusion; in vials of ivory and coloured glass.</p>
					</div>
					<div class="preview__item-box preview__item-box--right">
						<h3 class="preview__item-box-title oh"><span class="oh__inner">Location</span></h3>
						<p class="preview__item-box-desc">Huge sea-wood fed with copper burned green and orange, framed by the coloured stone, in which sad light a carvéd dolphin swam.</p>
					</div>
				</div>
				<button class="unbutton preview__back" aria-label="Back to content">
					<svg width="200px" height="36px" viewBox="0 0 50 9">
						<path vector-effect="non-scaling-stroke" d="m0 4.5 5-3m-5 3 5 3m45-3h-77"></path>
					</svg>
				</button>
			</div>
		</main>
		<script type="module" src="js/index3.js"></script>
	</body>
</html>

src/js/contentItem.js

파일 저장

/**
 * Class representing a content item element (.content__item)
 */
 export class ContentItem {
	// DOM elements
	DOM = {
		// main element (.content__item)
		el: null,
        // title (.content__item-title)
        title: null,
        // title inner (.content__item-title > .oh__inner)
        titleInner: null,
        // imgWrap (.content__item-imgwrap)
        imgWrap : null,
        // image (.content__item-img)
        img : null,
        // caption (.content__item-caption)
        caption: null,
	};
	
	/**
	 * Constructor.
	 * @param {Element} DOM_el - main element (.content__item)
     * @param {PreviewItem} previewItemInstance - PreviewItem (.preview__item)
	 */
	constructor(DOM_el, previewItemInstance) {
        this.previewItem = previewItemInstance;
		this.DOM.el = DOM_el;
        this.DOM.title = this.DOM.el.querySelector('.content__item-title');
        this.DOM.titleInner = this.DOM.title.querySelector('.oh__inner');
        this.DOM.imgWrap = this.DOM.el.querySelector('.content__item-img-wrap');
        this.DOM.img = this.DOM.imgWrap.querySelector('.content__item-img');
        this.DOM.caption = this.DOM.el.querySelector('.content__item-caption');
	}
}

src/js/index.js

파일 저장

import { gsap } from 'gsap';
import { preloadImages } from './utils';
import { ContentItem } from './contentItem';
import { PreviewItem } from './previewItem';

// Body 
const bodyEl = document.body;

// Content overlay
const contentOverlayInner = document.querySelector('.content__overlay > .overlay__inner');
gsap.set(contentOverlayInner, {
    xPercent: -100
})
// Preview Items
const previewItems = [];
[...document.querySelectorAll('.preview__item')].forEach(previewItem => {
    previewItems.push(new PreviewItem(previewItem));
});

// Content Items
const contentItems = [];
[...document.querySelectorAll('.content__item')].forEach((contentItem, pos) => {
    contentItems.push(new ContentItem(contentItem, previewItems[pos]));
});

// current element
let current = -1;

// check if currently animating
let isAnimating = false;

// Back control
const backCtrl = document.querySelector('.preview__back');

// Events
for (const [pos, contentItem] of contentItems.entries()) {
    
    // click on a content item
    contentItem.DOM.imgWrap.addEventListener('click', () => {
        if ( isAnimating ) return;
        isAnimating = true;

        current = pos;

        const previewItem = previewItems[pos];
        
        gsap.timeline({
            defaults: {
                duration: 1.1,
                ease: 'expo',
            },
            onStart: () => {
                bodyEl.classList.add('preview-open');
                gsap.set(previewItem.DOM.img, {xPercent: 100});
                gsap.set(previewItem.DOM.imgWrap, {xPercent: -102, opacity: 0});

                gsap.set(previewItem.DOM.slideTexts, {yPercent: 100});
                gsap.set(previewItem.DOM.descriptions, {yPercent: 15, opacity: 0});
                
                gsap.set(backCtrl, {x: '+=15%', opacity: 0});

                previewItem.DOM.el.classList.add('preview__item--current');
            },
            onComplete: () => isAnimating = false
        })
        .addLabel('start', 0)
        .addLabel('preview', 'start+=0.3')
        .to(contentOverlayInner, {
            ease: 'power2',
            startAt: {xPercent: -100},
            xPercent: 0
        }, 'start')
        .to([previewItem.DOM.img, previewItem.DOM.imgWrap], {
            xPercent: 0,
        }, 'preview')
        .to(previewItem.DOM.imgWrap, {
            opacity: 1,
        }, 'preview')
        .to(previewItem.DOM.slideTexts, {
            yPercent: 0,
            stagger: 0.05,
        }, 'preview')
        .to(previewItem.DOM.descriptions, {
            ease: 'power2',
            opacity: 1,
            stagger: 0.05,
        }, 'preview')
        .to(previewItem.DOM.descriptions, {
            yPercent: 0,
            stagger: 0.05,
        }, 'preview')
        .to(backCtrl, {
            ease: 'power2',
            opacity: 1,
            x: '-=15%'
        }, 'preview');
    });
    
    // mouseenter / mouseleave effect
    contentItem.DOM.imgWrap.addEventListener('mouseenter', () => {
        gsap.timeline({
            defaults: {
                duration: 0.6,
                ease: 'expo'
            }
        })
        .addLabel('start', 0)
        .set(contentItem.DOM.titleInner, {transformOrigin: '0% 50%'}, 'start')
        .to(contentItem.DOM.titleInner, {
            startAt: {filter: 'blur(0px)'},
            duration: 0.2,
            ease: 'power1.in',
            yPercent: -100,
            rotation: -4,
            filter: 'blur(6px)'
        }, 'start')
        .to(contentItem.DOM.titleInner, {
            startAt: {yPercent: 100, rotation: 4, filter: 'blur(6px)'},
            yPercent: 0,
            rotation: 0,
            filter: 'blur(0px)'
        }, 'start+=0.2')
        .to(contentItem.DOM.imgWrap, {
            scale: 0.95
        }, 'start')
        .to(contentItem.DOM.img, {
            scale: 1.2
        }, 'start')
    });

    contentItem.DOM.imgWrap.addEventListener('mouseleave', () => {
        gsap.timeline({
            defaults: {
                duration: 0.8,
                ease: 'power4'
            }
        })
        .addLabel('start', 0)
        .to([contentItem.DOM.imgWrap, contentItem.DOM.img], {
            scale: 1,
            //rotation: 0
        }, 'start');
    });

}

// Back to grid
backCtrl.addEventListener('click', () => {
    if ( isAnimating ) return;
    isAnimating = true;

    const previewItem = previewItems[current];
    
    gsap.timeline({
        defaults: {
            duration: 1,
            ease: 'power4',
        },
        onComplete: () => {
            previewItem.DOM.el.classList.remove('preview__item--current');
            bodyEl.classList.remove('preview-open');
            isAnimating = false;
        }
    })
    .addLabel('start', 0)
    .to(backCtrl, {
        ease: 'power2',
        opacity: 0
    }, 'start')
    .to(previewItem.DOM.descriptions, {
        ease: 'power2',
        opacity: 0
    }, 'start')
    .to(previewItem.DOM.descriptions, {
        yPercent: 15
    }, 'start')
    .to(previewItem.DOM.slideTexts, {
        yPercent: 100
    }, 'start')
    .to(previewItem.DOM.img, {
        xPercent: -100,
    }, 'start')
    .to(previewItem.DOM.imgWrap, {
        xPercent: 100,
        opacity: 1
    }, 'start')
    .to(contentOverlayInner, {
        ease: 'power2',
        xPercent: 100,
    }, 'start+=0.4')
});

// Preload images
preloadImages('.content__item-img').then(() => document.body.classList.remove('loading'));

src/js/index2.js

파일 저장

import { gsap } from 'gsap';
import { preloadImages } from './utils';
import { ContentItem } from './contentItem';
import { PreviewItem } from './previewItem';

// Body 
const bodyEl = document.body;

// window sizes
let winsize = {width: window.innerWidth, height: window.innerHeight};
// update on resize
window.addEventListener('resize', () => {
    winsize = {width: window.innerWidth, height: window.innerHeight};
});

// Content overlay
const contentOverlay = document.querySelector('.content__overlay');

// Preview Items
const previewItems = [];
[...document.querySelectorAll('.preview__item')].forEach(previewItem => {
    previewItems.push(new PreviewItem(previewItem));
});

// Content Items
const contentItems = [];
[...document.querySelectorAll('.content__item')].forEach((contentItem, pos) => {
    contentItems.push(new ContentItem(contentItem, previewItems[pos]));
});

// current element
let current = -1;

// check if currently animating
let isAnimating = false;

// Back control
const backCtrl = document.querySelector('.preview__back');

// Events
for (const [pos, contentItem] of contentItems.entries()) {
    
    // click on a content item
    contentItem.DOM.imgWrap.addEventListener('click', () => {
        if ( isAnimating ) return;
        isAnimating = true;

        current = pos;

        const previewItem = previewItems[pos];
        
        gsap.timeline({
            defaults: {
                duration: 1,
                ease: 'expo',
            },
            onStart: () => {
                bodyEl.classList.add('preview-open');
                gsap.set(previewItem.DOM.el, {
                    clipPath: `circle(0vmax at ${winsize.width/2}px ${winsize.height/2}px)`
                });
                
                gsap.set(previewItem.DOM.img, {scale: 0.8});
                gsap.set(previewItem.DOM.title, {scale: 1.6});
                gsap.set(previewItem.DOM.boxes, {
                    xPercent: pos => pos ? 20 : -20
                });
                gsap.set(backCtrl, {x: '+=15%', opacity: 0});

                previewItem.DOM.el.classList.add('preview__item--current');
            },
            onComplete: () => {
                gsap.set(previewItem.DOM.el, {
                    clipPath: 'none'
                });

                isAnimating = false;
            }
        })
        .addLabel('start', 0)
        .addLabel('preview', 'start+=0.3')
        .to(contentItem.DOM.imgWrap, {
            ease: 'power2',
            scale: 1.2
        }, 'start')
        .to(contentOverlay, {
            ease: 'power2',
            scale: 1
        }, 'start')
        .to(previewItem.DOM.el, {
            duration: 0.9,
            ease: 'power2',
            clipPath: `circle(60vmax at ${winsize.width/2}px ${winsize.height/2}px)`
        }, 'preview')
        .to([previewItem.DOM.img, previewItem.DOM.title], {
            scale: 1,
        }, 'preview')
        .to(previewItem.DOM.boxes, {
            xPercent: 0
        }, 'preview')
        .to(backCtrl, {
            ease: 'power2',
            opacity: 1,
            x: '-=15%'
        }, 'preview');
    });

    // mouseenter / mouseleave effect
    contentItem.DOM.imgWrap.addEventListener('mouseenter', () => {
        gsap.timeline({
            defaults: {
                duration: 0.8,
                ease: 'power4'
            }
        })
        .addLabel('start', 0)
        .set(contentItem.DOM.titleInner, {transformOrigin: '0% 50%'}, 'start')
        .to(contentItem.DOM.titleInner, {
            startAt: {filter: 'blur(0px)'},
            duration: 0.2,
            ease: 'power1.in',
            yPercent: -100,
            rotation: -4,
            filter: 'blur(6px)'
        }, 'start')
        .to(contentItem.DOM.titleInner, {
            startAt: {yPercent: 100, rotation: 4, filter: 'blur(6px)'},
            yPercent: 0,
            rotation: 0,
            filter: 'blur(0px)'
        }, 'start+=0.2')
        .to(contentItem.DOM.imgWrap, {
            scale: 0.95,
            //rotation: 3
        }, 'start')
        .to(contentItem.DOM.img, {
            scale: 1.2,
            //startAt: {filter: 'brightness(100%)'},
            //filter: 'brightness(180%)'
        }, 'start')
        /*
        .to(contentItem.DOM.caption, {
            duration: .05,
            xPercent: () => gsap.utils.random(-2,2),
            yPercent: () => gsap.utils.random(-8,8),
            opacity: () => Math.round(gsap.utils.random(0.4,1)),
            repeat: 3,
            repeatRefresh: true,
            onComplete: () => gsap.set(contentItem.DOM.caption, {xPercent: 0, yPercent: 0, opacity: 1}),
        }, 'start')
        */
    });

    contentItem.DOM.imgWrap.addEventListener('mouseleave', () => {
        gsap.timeline({
            defaults: {
                duration: 0.8,
                ease: 'power4'
            }
        })
        .addLabel('start', 0)
        .to([contentItem.DOM.imgWrap, contentItem.DOM.img], {
            scale: 1
        }, 'start')
    });

}

// Back to grid
backCtrl.addEventListener('click', () => {
    if ( isAnimating ) return;
    isAnimating = true;

    const previewItem = previewItems[current];
    
    gsap.timeline({
        defaults: {
            duration: 1,
            ease: 'power2',
        },
        onStart: () => {
            gsap.set(previewItem.DOM.el, {
                clipPath: `circle(60vmax at ${winsize.width/2}px ${winsize.height/2}px)`
            });
        },
        onComplete: () => {
            previewItem.DOM.el.classList.remove('preview__item--current');
            bodyEl.classList.remove('preview-open');
            isAnimating = false;
        }
    })
    .addLabel('start', 0)
    .addLabel('content', 'start+=0.2')
    .to(backCtrl, {
        opacity: 0
    }, 'start')
    .to(previewItem.DOM.title, {
        scale: 0.6,
    }, 'start')
    .to(previewItem.DOM.img, {
        scale: 0.9,
    }, 'start')
    .to(previewItem.DOM.el, {
        duration: 0.6,
        clipPath: `circle(0vmax at ${winsize.width/2}px ${winsize.height/2}px)`
    }, 'start')
    .to(contentOverlay, {
        duration: 0.6,
        ease: 'power3.inOut',
        scale: 0
    }, 'content')
    .to(contentItems[current].DOM.imgWrap, {
        startAt: {scale: 1.2},
        scale: 1
    }, 'content');
});

// Preload images
preloadImages('.content__item-img').then(() => document.body.classList.remove('loading'));

src/js/index3.js

파일 저장

import { gsap } from 'gsap';
import { preloadImages } from './utils';
import { ContentItem } from './contentItem';
import { PreviewItem } from './previewItem';
import { Flip } from 'gsap/Flip';
gsap.registerPlugin(Flip);

// Body 
const bodyEl = document.body;

// window sizes
let winsize = {width: window.innerWidth, height: window.innerHeight};
// update on resize
window.addEventListener('resize', () => {
    winsize = {width: window.innerWidth, height: window.innerHeight};
});

// Content overlay
const contentOverlay = document.querySelector('.content__overlay');

// Preview Items
const previewItems = [];
[...document.querySelectorAll('.preview__item')].forEach(previewItem => {
    previewItems.push(new PreviewItem(previewItem));
});

// Content Items
const contentItems = [];
[...document.querySelectorAll('.content__item')].forEach((contentItem, pos) => {
    contentItems.push(new ContentItem(contentItem, previewItems[pos]));
});

// current element
let current = -1;

// true if preview is shown (after clicking one content item)
let inPreview = false;

// check if currently animating
let isAnimating = false;

// Back control
const backCtrl = document.querySelector('.preview__back');

// Events
for (const [pos, contentItem] of contentItems.entries()) {
    
    // click on a content item
    contentItem.DOM.imgWrap.addEventListener('click', () => {
        if ( inPreview || isAnimating ) return;
        isAnimating = true;

        current = pos;

        const previewItem = previewItems[pos];
        
        gsap.timeline({
            defaults: {
                duration: 0.8,
                ease: 'power4.inOut',
            },
            onStart: () => {
                inPreview = true;
                bodyEl.classList.add('preview-open');
                gsap.set(contentItem.DOM.el, {zIndex: 10});

                gsap.set(contentOverlay, {
                    transformOrigin: current%2 ? '0% 100%' : '0% 0%',
                    scaleX: contentItem.DOM.el.offsetWidth/winsize.width,
                    scaleY: 0,
                    x: contentItem.DOM.el.offsetLeft
                });

                gsap.set(previewItem.DOM.slideTexts, {yPercent: 100});
                gsap.set(previewItem.DOM.descriptions, {
                    xPercent: pos => pos ? -5 : 5, 
                    opacity: 0
                });
                
                gsap.set(backCtrl, {x: '+=15%', opacity: 0});

                previewItem.DOM.el.classList.add('preview__item--current');
            },
            onComplete: () => isAnimating = false
        })
        .addLabel('start', 0)
        .addLabel('content', 'start+=0.6')
        .to(contentItem.DOM.titleInner, {
            yPercent: current%2 ? -100 : 100
        }, 'start')
        .to(contentItem.DOM.caption, {
            yPercent: current%2 ? -10 : 10,
            opacity: 0
        }, 'start')
        .to(contentOverlay, {
            scaleY: 1
        }, 'start')
        .to(contentOverlay, {
            scaleX: 1,
            x: 0
        }, 'content')
        .add(() => {
            const flipstate = Flip.getState(contentItem.DOM.imgWrap);
            previewItem.DOM.imgOuter.appendChild(contentItem.DOM.imgWrap);
            Flip.from(flipstate, {
                duration: 0.8,
                ease: 'power4.inOut',
                absolute: true,
            });
        }, 'content')
        .to(previewItem.DOM.slideTexts, {
            duration: 1.1,
            ease: 'expo',
            yPercent: 0
        }, 'content+=0.3')
        .to(previewItem.DOM.descriptions, {
            duration: 1.1,
            ease: 'expo',
            opacity: 1,
            xPercent: 0
        }, 'content+=0.3')
        .to(backCtrl, {
            opacity: 1,
            x: '-=15%'
        }, 'content');
    });
    
    // mouseenter / mouseleave effect
    contentItem.DOM.imgWrap.addEventListener('mouseenter', () => {
        if ( inPreview ) return;

        gsap.timeline({
            defaults: {
                duration: 0.8,
                ease: 'power4'
            }
        })
        .addLabel('start', 0)
        .set(contentItem.DOM.titleInner, {transformOrigin: '0% 50%'}, 'start')
        .to(contentItem.DOM.titleInner, {
            startAt: {filter: 'blur(0px)'},
            duration: 0.2,
            ease: 'power1.in',
            yPercent: -100,
            rotation: -4,
            filter: 'blur(6px)'
        }, 'start')
        .to(contentItem.DOM.titleInner, {
            startAt: {yPercent: 100, rotation: 4, filter: 'blur(6px)'},
            yPercent: 0,
            rotation: 0,
            filter: 'blur(0px)'
        }, 'start+=0.2')
        .to(contentItem.DOM.imgWrap, {
            scale: 0.95
        }, 'start')
        .to(contentItem.DOM.img, {
            scale: 1.2
        }, 'start')
    });

    contentItem.DOM.imgWrap.addEventListener('mouseleave', () => {
        if ( inPreview ) return;

        gsap.timeline({
            defaults: {
                duration: 0.8,
                ease: 'power4'
            }
        })
        .addLabel('start', 0)
        .to([contentItem.DOM.imgWrap, contentItem.DOM.img], {
            scale: 1,
        }, 'start');
    });

}

// Back to grid
backCtrl.addEventListener('click', () => {
    if ( isAnimating ) return;
    isAnimating = true;

    const previewItem = previewItems[current];
    const contentItem = contentItems[current];

    gsap.timeline({
        defaults: {
            duration: 0.8,
            ease: 'power4.inOut',
        },
        onComplete: () => {
            previewItem.DOM.el.classList.remove('preview__item--current');
            bodyEl.classList.remove('preview-open');
            gsap.set(contentItem.DOM.el, {zIndex: 1});
            inPreview = false;
            isAnimating = false;
        }
    })
    .addLabel('start', 0)
    .addLabel('content', 'start+=0.7')
    .to(backCtrl, {
        ease: 'power2',
        opacity: 0
    }, 'start')
    .to(previewItem.DOM.descriptions, {
        ease: 'power2',
        opacity: 0
    }, 'start')
    .to(previewItem.DOM.descriptions, {
        yPercent: 15
    }, 'start')
    .to(previewItem.DOM.slideTexts, {
        yPercent: 100
    }, 'start')
    .add(() => {
        const flipstate = Flip.getState(contentItem.DOM.imgWrap);
        contentItem.DOM.el.insertBefore(contentItem.DOM.imgWrap, contentItem.DOM.el.children[1]);
        Flip.from(flipstate, {
            duration: 0.8,
            ease: 'power4.inOut',
            absolute: true,
        });
    }, 'start')
    .to(contentOverlay, {
        scaleX: contentItem.DOM.el.offsetWidth/winsize.width,
        x: contentItem.DOM.el.offsetLeft
    }, 'start')
    .to(contentOverlay, {
        scaleY: 0
    }, 'start+=0.6')
    .to(contentItem.DOM.titleInner, {
        yPercent: 0
    }, 'start+=0.6')
    .to(contentItem.DOM.caption, {
        yPercent: 0,
        opacity: 1
    }, 'start+=0.6')
});

// Preload images
preloadImages('.content__item-img').then(() => document.body.classList.remove('loading'));

src/js/previewItem.js

파일 저장

/**
 * Class representing a preview item element (.preview__item)
 */
 export class PreviewItem {
	// DOM elements
	DOM = {
		// main element (.preview__item)
		el: null,
        // image outer (.preview__item-img-outer)
        imgOuter: null,
        // imgWrap (.preview__item-img-wrap)
        imgWrap : null,
        // image (.content__item-img)
        img : null,
        // texts that slide in/out (.oh__inner)
        slideTexts: null,
        // description elements (.preview__item-box-desc)
        descriptions: null,
        // title (.preview__item-title)
        title: null,
        // right and left text boxes (.preview__item-box)
        boxes: null,
	};
	
	/**
	 * Constructor.
	 * @param {Element} DOM_el - main element (.preview__item)
	 */
	constructor(DOM_el) {
		this.DOM.el = DOM_el;
        this.DOM.imgOuter = this.DOM.el.querySelector('.preview__item-img-outer');
        this.DOM.imgWrap = this.DOM.el.querySelector('.preview__item-img-wrap');
        this.DOM.img = this.DOM.el.querySelector('.preview__item-img');
        this.DOM.slideTexts = this.DOM.el.querySelectorAll('.oh__inner');
        this.DOM.descriptions = this.DOM.el.querySelectorAll('.preview__item-box-desc');
        this.DOM.title = this.DOM.el.querySelector('.preview__item-title');
        this.DOM.boxes = this.DOM.el.querySelectorAll('.preview__item-box');
	}
}

src/js/utils.js

파일 저장

const imagesLoaded = require('imagesloaded');

/**
 * Preload images
 * @param {String} selector - Selector/scope from where images need to be preloaded. Default is 'img'
 */
const preloadImages = (selector = 'img') => {
    return new Promise((resolve) => {
        imagesLoaded(document.querySelectorAll(selector), {background: true}, resolve);
    });
};

export {
    preloadImages,
};

Media credits and license evidence실행 안내·자료

파일 저장

README.md
## Credits

- Images from [Unsplash](https://unsplash.com/)


## License
[MIT](LICENSE)

Made with :blue_heart:  by [Codrops](http://www.codrops.com)

LICENSE실행 안내·자료

파일 저장

MIT License

Copyright (c) 2009 - 2021 [Codrops](https://tympanus.net/codrops)

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

Bundled dependency licenses실행 안내·자료

파일 저장

GSAP standard license snapshot
Source: https://gsap.com/community/standard-license/
Retrieved: 2026-09-22T04:22:49.089Z
Original distribution copyright and version headers remain in the runtime code.

Standard "No Charge" GSAP License

 I. DEFINITIONS

 “GSAP License” means the terms and conditions of this GSAP Software License Agreement.

 "GSAP Products" means any Software made available at gsap.com (https://gsap.com) or any successor sites, including but not limited to the GSAP animation library and related plugins, tools, or extensions.

 "Permitted Uses" means the implementation and/or use of GSAP Products on any website, web application, or digital interface by any person or entity (which may include, for clarity, those of companies that compete with Webflow in other areas of business).

 "Prohibited Uses" means any implementation and/or use of GSAP Products in tools that allow users to build visual animations without code that encourages, induces, or materially assists in creating a solution that competes with Webflow’s visual animation building capabilities.

 "Competitive Products" means any software, tool, or service that enables users to create, edit, or manage animations through a visual interface or builder similar to Webflow (https://webflow.com).

 II. GRANT OF LICENSE

 Subject to the terms and conditions of this GSAP License, Webflow grants you a non-exclusive, worldwide license to use, reproduce, display, and implement GSAP Products solely for Permitted Uses.

 III. RESTRICTIONS

 You may not:

 Use any GSAP Products for any Prohibited Uses without prior written consent;

 Reverse engineer any GSAP Products for the purpose of creating Competitive Products;

 Remove or alter any proprietary notices or branding from GSAP Products.

 IV. OWNERSHIP AND INTELLECTUAL PROPERTY

 All intellectual property rights in GSAP Products, including but not limited to copyright, patents, trademarks, and trade secrets, remain the exclusive property of Webflow. This GSAP License does not transfer any ownership rights in GSAP Products to you.

 V. TERMINATION

 Webflow may terminate this GSAP License and revoke your access in its discretion if you fail to comply with any of these terms and conditions. Upon termination, you must cease all use of GSAP Products and destroy all copies in your possession.

 VI. MISCELLANEOUS PROVISIONS

 General: This GSAP License is incorporated into and subject to Webflow’s Terms of Service available here (https://webflow.com/legal/terms) ("Terms of Service"). In the event of any conflict or inconsistency between this GSAP License and the Terms of Service, the terms of this GSAP License shall govern in relation to your use of any GSAP Products.

 Amendments: Webflow reserves the right to update or modify this GSAP License at any time by posting the revised terms on this website, provided that any such updates or modifications shall not result in any material degradation to the security, integrity, or functionality of any GSAP Products. You understand and agree that your continued use of any GSAP Products after such revisions to this GSAP License constitutes your acceptance of this GSAP License as revised. If you do not accept the revised GSAP License, you are prohibited from using versions of the GSAP Products released after the effective date of the revised GSAP License (as well as any updates made to previous versions). Notwithstanding, you may continue using previous versions of GSAP Products under the applicable terms licensed to you prior to the effective date of the revised GSAP License (for clarity, excluding any updates made thereto).

 No Waiver: Failure of Webflow to enforce any provision of this GSAP License shall not constitute a waiver of future enforcement of that or any other provision.

 FAQ

 Is it acceptable for AI tools like ChatGPT, Cursor, Lovable, Webstudio, etc. to generate GSAP code?
 Absolutely! AI-generated code is not a "Prohibited Use".

 What if a WordPress plugin or theme or other niche tool allows users to create GSAP-driven effects through a visual interface? Is that prohibited?
 We want to encourage developers to build on top of GSAP, including visual tools that don't directly compete with Webflow's rich animation-building capabilities. If you are not sure if your product might be considered a "Prohibited Use", feel free to contact us (https://gsap.com/contact) so we can talk through it!

 Can I really use GSAP in commercial projects without paying anything?
 Yes, really! Commercial usage is covered under the standard license. All of GSAP including the plugins that were formerly "members-only" like SplitText (https://gsap.com/docs/v3/Plugins/SplitText/) and MorphSVG (https://gsap.com/docs/v3/Plugins/MorphSVGPlugin) can be used in commercial projects at no charge. Enjoy! 💚

 Effective date: April 30, 2025

 Last modified date: May 30, 2025

 Copyright (©) 2025, Webflow


ev-emitter@2.1.2 — LICENSE.md
Copyright (c) 2016-2021 [David DeSandro](https://desandro.com)

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.


imagesloaded@5.0.0 — LICENSE.md
Copyright (c) 2011-2022 [David DeSandro](https://desandro.com) and [contributors](https://github.com/desandro/imagesloaded/graphs/contributors)

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

BEHIND THE EXAMPLE

이 장면을 만드는 원리

Motion
이미지와 감싸는 표면의 반대 이동
반복 입력에서 현재 의도와 전환의 종료·취소 책임을 명시합니다.
이 예제에서는
첫 변형은 preview 이미지 xPercent=100과 wrapper=-102를 준비한 뒤 둘을 0으로 이동합니다. 본문 가림막·텍스트·설명도 따로 시작값을 받습니다.
코드와 함께 확인하기
코드에서 찾기
- isAnimatingindex.js
  여러 표현 레이어를 조정하는 동안 추가 열기 입력을 잠급니다.
전체 코드로 이동
직접 해보기
1. 다른 미리보기를 빠르게 선택하고 바로 닫습니다.
  살펴볼 변화선택한 preview의 이미지·제목·설명이 일치하고 가림막이나 시작값이 남지 않는지 확인해야 합니다.

이미지와 감싸는 표면의 반대 이동↗

코드에서 찾기

직접 해보기

이미지와 감싸는 표면의 반대 이동