Codrops 원본
Ideas for Pixel Page Transitions
섹션 · MIT
갤러리 안에서는 화면을 벗어나거나 움직임을 멈추면 예제도 닫힙니다. 다시 재생할 때는 처음부터 시작해요.
SOURCE FILES
원본 코드 읽기
수집한 원본 소스와 실행 안내를 함께 제공합니다.
css/base.css
*,
*::after,
*::before {
box-sizing: border-box;
}
:root {
font-size: 12px;
}
body {
margin: 0;
overflow: hidden;
--color-text: #fff;
--color-gr-1: #4cfa68;
--color-gr-2: #1b35ea;
--color-bg: #272f2e;
--color-link: #6d91c9;
--color-link-hover: #60c18d;
--padding-ver: 1.5rem;
--padding-hor: 1.5rem;
--color-bg-overlay: #000;
--color-back: #6d91c9;
--color-back-hover: #60c18d;
color: var(--color-text);
background-color: var(--color-bg);
font-family: area-normal, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.demo-2 {
--color-text: #000;
--color-gr-1: #81e2c6;
--color-gr-2: #e7613c;
--color-bg: #f9f9f9;
--color-link: #d23636;
--color-link-hover: #df6b47;
--color-back: #d23636;
--color-back-hover: #df6b47;
--color-bg-overlay: rgb(37, 116, 66);
}
.demo-3 {
--color-text: #fff;
--color-gr-1: #81e2c6;
--color-gr-2: #e7613c;
--color-bg: #000;
--color-link: #ba9978;
--color-link-hover: #df6b47;
--color-back: #d23636;
--color-back-hover: #df6b47;
--color-bg-overlay: rgb(223, 107, 71);
}
.demo-4 {
--color-text: #000;
--color-gr-1: #97d6c5;
--color-gr-2: #308c2c;
--color-bg: #4b7872;
--color-link: #1cf191;
--color-link-hover: #97d6c5;
--color-back: #1cf191;
--color-back-hover: #97d6c5;
}
.demo-5 {
--color-text: #000;
--color-gr-1: #c4b478;
--color-gr-2: #815615;
--color-bg: #394235;
--color-link: #c4b478;
--color-link-hover: #957235;
--color-back: #c4b478;
--color-back-hover: #957235;
--color-bg-overlay: rgb(20 21 19);
}
.demo-6 {
--color-text: #000;
--color-gr-1: #000;
--color-gr-2: #000;
--color-bg: #7f837f;
--color-link: #c0c8c2;
--color-link-hover: #000;
--color-back: #c0c8c2;
--color-back-hover: #000;
--color-bg-overlay: rgb(84 87 84);
}
/* 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: 100px;
height: 100px;
margin: -50px 0 0 -50px;
border-radius: 50%;
border: 2px solid var(--color-gr-2);
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;
}
a:hover {
color: var(--color-link-hover);
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;
}
.hover-line,
a.cda-sponsor-link {
white-space: nowrap;
overflow: hidden;
position: relative;
}
.hover-line::before,
.cda-sponsor-link::before {
content: '';
height: 1px;
width: 100%;
background: currentColor;
position: absolute;
top: 92%;
transition: transform 0.3s;
transform-origin: 0% 50%;
}
.hover-line:hover::before,
.cda-sponsor-link:hover::before {
transform: scaleX(0);
transform-origin: 100% 50%;
}
.unbutton {
background: none;
border: 0;
padding: 0;
margin: 0;
font: inherit;
cursor: pointer;
}
.unbutton:focus {
outline: none;
}
.hidden {
opacity: 0;
pointer-events: none;
position: absolute;
}
main {
display: grid;
height: 100vh;
padding: 0;
position: relative;
}
.frame {
grid-area: 1 / 1 / 2 / 2;
text-align: center;
display: flex;
padding: var(--padding-hor) calc(var(--padding-ver) + 0.6vw);
flex-wrap: wrap;
align-self: start;
position: relative;
z-index: 100;
grid-column-gap: 5vw;
grid-row-gap: 1rem;
font-weight: 600;
background: linear-gradient(to bottom, var(--color-bg), transparent);
}
.frame__title {
font-size: inherit;
margin: 0;
font-weight: inherit;
}
.frame__links {
display: flex;
gap: 1rem;
}
.frame__demos {
display: flex;
gap: 1rem;
}
.intro,
.content-wrap {
position: relative;
grid-area: 1 / 1 / 2 / 2;
}
.intro {
flex: 1;
max-height: 80vmax;
margin: auto 0;
padding: 0 var(--padding-ver);
font-size: 9vw;
line-height: 1;
text-transform: uppercase;
display: flex;
flex-wrap: wrap;
column-gap: 2vw;
row-gap: 1vw;
white-space: nowrap;
font-family: "stinger-variable", sans-serif;
font-variation-settings: "wdth" 120, "wght" 300;
background-color: var(--color-text);
background-image: linear-gradient(45deg, var(--color-gr-1), var(--color-gr-2));
background-size: 100%;
background-repeat: repeat;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-background-clip: text;
-moz-text-fill-color: transparent;
will-change: transform, opacity;
}
.intro--closed {
opacity: 0;
pointer-events: none;
}
.font-1 {
font-variation-settings: "wdth" 75, "wght" 100;
}
.font-2 {
font-variation-settings: "wdth" 120, "wght" 800;
}
.font-3 {
font-variation-settings: "wdth" 120, "wght" 400;
}
.intro__text {
line-height: 0.6;
padding-top: 2vw;
}
.intro__image {
flex: 1;
position: relative;
cursor: pointer;
will-change: transform;
background-size: cover;
background-position: 50% 30%;
border-radius: 5vw;
min-width: 50px;
max-width: 100px;
transition: opacity 0.3s;
}
.intro__image:hover {
opacity: 0.8;
}
.content-wrap {
align-self: stretch;
display: grid;
pointer-events: none;
}
.content {
opacity: 0;
pointer-events: none;
grid-area: 1 / 1 / -1 / -1;
display: grid;
grid-template-columns: 100%;
height: 100%;
grid-template-rows: 70% 1fr;
gap: 5vh;
padding: 8rem var(--padding-ver) 2rem;
}
.content--open {
opacity: 1;
pointer-events: auto;
}
.content__img {
position: relative;
overflow: hidden;
border-radius: 1.85rem;
display: grid;
will-change: transform, opacity;
}
.content__img-inner {
background-size: cover;
background-position: 50% 20%;
}
.content__text {
display: grid;
grid-template-areas:
'back number title'
'... ... title'
'meta meta meta';
grid-column-gap: 2rem;
grid-template-columns: auto 1fr auto;
grid-template-rows: auto 1fr auto;
}
.content__title {
font-variation-settings: "wdth" 120, "wght" 100;
grid-area: title;
margin: 0;
font-family: stinger-variable, sans-serif;
font-size: clamp(2rem, 6vw, 5rem);
background-color: var(--color-text);
background-image: linear-gradient(45deg, var(--color-gr-1), var(--color-gr-2));
background-size: 100%;
background-repeat: repeat;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-background-clip: text;
-moz-text-fill-color: transparent;
line-height: 1;
max-width: 15ch;
text-align: right;
}
.content__number {
grid-area: number;
line-height: 1;
margin-top: -1vw;
align-self: start;
font-size: clamp(3rem, 6vw, 10rem);
background-color: var(--color-text);
background-image: linear-gradient(45deg, var(--color-gr-1), var(--color-gr-2));
background-size: 100%;
background-repeat: repeat;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-background-clip: text;
-moz-text-fill-color: transparent;
position: relative;
}
.content__back {
grid-area: back;
overflow: hidden;
align-self: center;
}
.content__back svg {
width: 4vw;
height: 4.85vw;
fill: var(--color-back);
transition: fill 0.2s;
}
.content__back:hover svg {
fill: var(--color-back-hover);
}
.content__meta {
grid-area: meta;
text-transform: uppercase;
display: flex;
justify-content: space-between;
font-size: clamp(0.75rem, 3vw, 1.5rem);
line-height: 1;
}
.overlay {
grid-area: 1 / 1 / -1 / -1;
display: grid;
position: relative;
z-index: 1000;
pointer-events: none;
opacity: 0;
--columns: 20;
grid-template-columns: repeat(var(--columns),1fr);
}
.overlay div {
background: var(--color-bg-overlay);
}
@media screen and (min-width: 53em) {
.intro__image {
min-width: 200px;
max-width: 30%;
}
.content {
padding-top: 5rem;
}
}
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>Pixel Transition | Demo 1 | Codrops</title>
<meta name="description" content="Inspiration for pixel page transitions based on Niccolò Miranda's animation." />
<meta name="keywords" content="page transition, animation, pixel, gsap" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="https://use.typekit.net/ctp6pec.css">
<link rel="stylesheet" type="text/css" href="css/base.css" />
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
<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>
<script src="//tympanus.net/codrops/adpacks/analytics.js"></script>
</head>
<body class="demo-1 loading">
<svg class="hidden" xmlns="http://www.w3.org/2000/svg">
<symbol id="icon-arrow" viewBox="0 0 562 980">
<g><path d="M561.4 0H421.2v138.7h140.2zM421.2 138.7H281v140.2h140.2zM281 278.9H140.8v140.2H281zM281 559.4H140.8v140.2H281zM421.2 699.6H281v140.2h140.2zM561.4 839.8H421.2V980h140.2zM140.8 419.1H.6v140.2h140.2z"/></g>
</symbol>
</svg>
<main>
<div class="frame">
<h1 class="frame__title">Pixel Transition</h1>
<nav class="frame__links">
<a class="hover-line" href="https://tympanus.net/codrops/?p=71437">Article</a>
<a class="hover-line" href="http://tympanus.net/Tutorials/Voxelizer/">Previous demo</a>
</nav>
<nav class="frame__demos">
<span>More demos:</span>
<span class="frame__demo">1</span>
<a href="index2.html" class="frame__demo">2</a>
<a href="index3.html" class="frame__demo">3</a>
<a href="index4.html" class="frame__demo">4</a>
<a href="index5.html" class="frame__demo">5</a>
<a href="index6.html" class="frame__demo">6</a>
</nav>
</div>
<div class="intro">
<div class="intro__text font-3">Rather</div>
<div class="intro__image" style="background-image:url(img/1.jpg)"></div>
<div class="intro__text">than</div>
<div class="intro__image" style="background-image:url(img/2.jpg)"></div>
<div class="intro__text font-2">love</div>
<div class="intro__image" style="background-image:url(img/3.jpg)"></div>
<div class="intro__text font-1">than</div>
<div class="intro__image" style="background-image:url(img/4.jpg)"></div>
<div class="intro__text font-2">money</div>
<div class="intro__image" style="background-image:url(img/5.jpg)"></div>
<div class="intro__text">than</div>
<div class="intro__image" style="background-image:url(img/6.jpg)"></div>
<div class="intro__text font-2">fame</div>
<div class="intro__image" style="background-image:url(img/7.jpg)"></div>
<div class="intro__text">give</div>
<div class="intro__text">me</div>
<div class="intro__image" style="background-image:url(img/8.jpg)"></div>
<div class="intro__text font-2">truth</div>
<div class="intro__image" style="background-image:url(img/9.jpg)"></div>
</div>
<section class="content-wrap">
<div class="content">
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/1.jpg)"></div>
</div>
<div class="content__text">
<h2 class="content__title">Guard your time and attention.</h2>
<span class="content__number">M36</span>
<button class="content__back unbutton">
<svg aria-hidden="true" focusable="false">
<use href="#icon-arrow"></use>
</svg>
</button>
<div class="content__meta">
<span class="content__meta-text">Frank Luck</span>
<span class="content__meta-text">1982</span>
<span class="content__meta-text">Ground Day</span>
</div>
</div>
</div>
<div class="content">
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/2.jpg)"></div>
</div>
<div class="content__text">
<h2 class="content__title">Seek simplicity and nature.</h2>
<span class="content__number">B13</span>
<button class="content__back unbutton">
<svg aria-hidden="true" focusable="false">
<use href="#icon-arrow"></use>
</svg>
</button>
<div class="content__meta">
<span class="content__meta-text">Lora Black</span>
<span class="content__meta-text">1985</span>
<span class="content__meta-text">Lost in Love</span>
</div>
</div>
</div>
<div class="content">
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/3.jpg)"></div>
</div>
<div class="content__text">
<h2 class="content__title">Avoid accumulating needless things.</h2>
<span class="content__number">G98</span>
<button class="content__back unbutton">
<svg aria-hidden="true" focusable="false">
<use href="#icon-arrow"></use>
</svg>
</button>
<div class="content__meta">
<span class="content__meta-text">Lady B.</span>
<span class="content__meta-text">1989</span>
<span class="content__meta-text">Club Byna</span>
</div>
</div>
</div>
<div class="content">
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/4.jpg)"></div>
</div>
<div class="content__text">
<h2 class="content__title">Be conscious of the stories you tell.</h2>
<span class="content__number">K06</span>
<button class="content__back unbutton">
<svg aria-hidden="true" focusable="false">
<use href="#icon-arrow"></use>
</svg>
</button>
<div class="content__meta">
<span class="content__meta-text">Harry D. Walters</span>
<span class="content__meta-text">2023</span>
<span class="content__meta-text">Mad Wanderer</span>
</div>
</div>
</div>
<div class="content">
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/5.jpg)"></div>
</div>
<div class="content__text">
<h2 class="content__title">Rest, reflect, and play.</h2>
<span class="content__number">W02</span>
<button class="content__back unbutton">
<svg aria-hidden="true" focusable="false">
<use href="#icon-arrow"></use>
</svg>
</button>
<div class="content__meta">
<span class="content__meta-text">Cathy Brown</span>
<span class="content__meta-text">1992</span>
<span class="content__meta-text">Free Ride</span>
</div>
</div>
</div>
<div class="content">
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/6.jpg)"></div>
</div>
<div class="content__text">
<h2 class="content__title">Your actions have consequences.</h2>
<span class="content__number">T67</span>
<button class="content__back unbutton">
<svg aria-hidden="true" focusable="false">
<use href="#icon-arrow"></use>
</svg>
</button>
<div class="content__meta">
<span class="content__meta-text">Sarah Zola</span>
<span class="content__meta-text">1996</span>
<span class="content__meta-text">Roundhouse</span>
</div>
</div>
</div>
<div class="content">
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/7.jpg)"></div>
</div>
<div class="content__text">
<h2 class="content__title">Don't compromise your integrity.</h2>
<span class="content__number">X49</span>
<button class="content__back unbutton">
<svg aria-hidden="true" focusable="false">
<use href="#icon-arrow"></use>
</svg>
</button>
<div class="content__meta">
<span class="content__meta-text">Dana Belucci</span>
<span class="content__meta-text">2000</span>
<span class="content__meta-text">Rising Star</span>
</div>
</div>
</div>
<div class="content">
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/8.jpg)"></div>
</div>
<div class="content__text">
<h2 class="content__title">Seek greater wisdom and compassion.</h2>
<span class="content__number">G05</span>
<button class="content__back unbutton">
<svg aria-hidden="true" focusable="false">
<use href="#icon-arrow"></use>
</svg>
</button>
<div class="content__meta">
<span class="content__meta-text">Gerry Ronald</span>
<span class="content__meta-text">2001</span>
<span class="content__meta-text">Messy Luck</span>
</div>
</div>
</div>
<div class="content">
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/9.jpg)"></div>
</div>
<div class="content__text">
<h2 class="content__title">Value experiences over material possessions.</h2>
<span class="content__number">K16</span>
<button class="content__back unbutton">
<svg aria-hidden="true" focusable="false">
<use href="#icon-arrow"></use>
</svg>
</button>
<div class="content__meta">
<span class="content__meta-text">Diana Cohen</span>
<span class="content__meta-text">2002</span>
<span class="content__meta-text">Simple Thing</span>
</div>
</div>
</div>
<div class="content">
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/10.jpg)"></div>
</div>
<div class="content__text">
<h2 class="content__title">Live a life of purpose.</h2>
<span class="content__number">Z09</span>
<button class="content__back unbutton">
<svg aria-hidden="true" focusable="false">
<use href="#icon-arrow"></use>
</svg>
</button>
<div class="content__meta">
<span class="content__meta-text">Mario T. Foy</span>
<span class="content__meta-text">2006</span>
<span class="content__meta-text">The End of all</span>
</div>
</div>
</div>
</section>
<div class="overlay"></div>
</main>
<script src="https://tympanus.net/codrops/adpacks/cda_sponsor.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<script src="https://unpkg.com/imagesloaded@5/imagesloaded.pkgd.min.js"></script>
<script type="module" src="js/demo1/index.js"></script>
</body>
</html>
함께 쓰는 파일 21개 보기
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>Pixel Transition | Demo 2 | Codrops</title>
<meta name="description" content="Inspiration for pixel page transitions based on Niccolò Miranda's animation." />
<meta name="keywords" content="page transition, animation, pixel, gsap" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="https://use.typekit.net/ctp6pec.css">
<link rel="stylesheet" type="text/css" href="css/base.css" />
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
<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>
<script src="//tympanus.net/codrops/adpacks/analytics.js"></script>
</head>
<body class="demo-2 loading">
<svg class="hidden" xmlns="http://www.w3.org/2000/svg">
<symbol id="icon-arrow" viewBox="0 0 562 980">
<g><path d="M561.4 0H421.2v138.7h140.2zM421.2 138.7H281v140.2h140.2zM281 278.9H140.8v140.2H281zM281 559.4H140.8v140.2H281zM421.2 699.6H281v140.2h140.2zM561.4 839.8H421.2V980h140.2zM140.8 419.1H.6v140.2h140.2z"/></g>
</symbol>
</svg>
<main>
<div class="frame">
<h1 class="frame__title">Pixel Transition</h1>
<nav class="frame__links">
<a class="hover-line" href="https://tympanus.net/codrops/?p=71437">Article</a>
<a class="hover-line" href="http://tympanus.net/Tutorials/Voxelizer/">Previous demo</a>
</nav>
<nav class="frame__demos">
<span>More demos:</span>
<a href="index.html" class="frame__demo">1</a>
<span>2</span>
<a href="index3.html" class="frame__demo">3</a>
<a href="index4.html" class="frame__demo">4</a>
<a href="index5.html" class="frame__demo">5</a>
<a href="index6.html" class="frame__demo">6</a>
</nav>
</div>
<div class="intro">
<div class="intro__text font-3">Rather</div>
<div class="intro__image" style="background-image:url(img/1.jpg)"></div>
<div class="intro__text">than</div>
<div class="intro__image" style="background-image:url(img/2.jpg)"></div>
<div class="intro__text font-2">love</div>
<div class="intro__image" style="background-image:url(img/3.jpg)"></div>
<div class="intro__text font-1">than</div>
<div class="intro__image" style="background-image:url(img/4.jpg)"></div>
<div class="intro__text font-2">money</div>
<div class="intro__image" style="background-image:url(img/5.jpg)"></div>
<div class="intro__text">than</div>
<div class="intro__image" style="background-image:url(img/6.jpg)"></div>
<div class="intro__text font-2">fame</div>
<div class="intro__image" style="background-image:url(img/7.jpg)"></div>
<div class="intro__text">give</div>
<div class="intro__text">me</div>
<div class="intro__image" style="background-image:url(img/8.jpg)"></div>
<div class="intro__text font-2">truth</div>
<div class="intro__image" style="background-image:url(img/9.jpg)"></div>
</div>
<section class="content-wrap">
<div class="content">
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/1.jpg)"></div>
</div>
<div class="content__text">
<h2 class="content__title">Guard your time and attention.</h2>
<span class="content__number">M36</span>
<button class="content__back unbutton">
<svg aria-hidden="true" focusable="false">
<use href="#icon-arrow"></use>
</svg>
</button>
<div class="content__meta">
<span class="content__meta-text">Frank Luck</span>
<span class="content__meta-text">1982</span>
<span class="content__meta-text">Ground Day</span>
</div>
</div>
</div>
<div class="content">
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/2.jpg)"></div>
</div>
<div class="content__text">
<h2 class="content__title">Seek simplicity and nature.</h2>
<span class="content__number">B13</span>
<button class="content__back unbutton">
<svg aria-hidden="true" focusable="false">
<use href="#icon-arrow"></use>
</svg>
</button>
<div class="content__meta">
<span class="content__meta-text">Lora Black</span>
<span class="content__meta-text">1985</span>
<span class="content__meta-text">Lost in Love</span>
</div>
</div>
</div>
<div class="content">
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/3.jpg)"></div>
</div>
<div class="content__text">
<h2 class="content__title">Avoid accumulating needless things.</h2>
<span class="content__number">G98</span>
<button class="content__back unbutton">
<svg aria-hidden="true" focusable="false">
<use href="#icon-arrow"></use>
</svg>
</button>
<div class="content__meta">
<span class="content__meta-text">Lady B.</span>
<span class="content__meta-text">1989</span>
<span class="content__meta-text">Club Byna</span>
</div>
</div>
</div>
<div class="content">
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/4.jpg)"></div>
</div>
<div class="content__text">
<h2 class="content__title">Be conscious of the stories you tell.</h2>
<span class="content__number">K06</span>
<button class="content__back unbutton">
<svg aria-hidden="true" focusable="false">
<use href="#icon-arrow"></use>
</svg>
</button>
<div class="content__meta">
<span class="content__meta-text">Harry D. Walters</span>
<span class="content__meta-text">2023</span>
<span class="content__meta-text">Mad Wanderer</span>
</div>
</div>
</div>
<div class="content">
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/5.jpg)"></div>
</div>
<div class="content__text">
<h2 class="content__title">Rest, reflect, and play.</h2>
<span class="content__number">W02</span>
<button class="content__back unbutton">
<svg aria-hidden="true" focusable="false">
<use href="#icon-arrow"></use>
</svg>
</button>
<div class="content__meta">
<span class="content__meta-text">Cathy Brown</span>
<span class="content__meta-text">1992</span>
<span class="content__meta-text">Free Ride</span>
</div>
</div>
</div>
<div class="content">
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/6.jpg)"></div>
</div>
<div class="content__text">
<h2 class="content__title">Your actions have consequences.</h2>
<span class="content__number">T67</span>
<button class="content__back unbutton">
<svg aria-hidden="true" focusable="false">
<use href="#icon-arrow"></use>
</svg>
</button>
<div class="content__meta">
<span class="content__meta-text">Sarah Zola</span>
<span class="content__meta-text">1996</span>
<span class="content__meta-text">Roundhouse</span>
</div>
</div>
</div>
<div class="content">
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/7.jpg)"></div>
</div>
<div class="content__text">
<h2 class="content__title">Don't compromise your integrity.</h2>
<span class="content__number">X49</span>
<button class="content__back unbutton">
<svg aria-hidden="true" focusable="false">
<use href="#icon-arrow"></use>
</svg>
</button>
<div class="content__meta">
<span class="content__meta-text">Dana Belucci</span>
<span class="content__meta-text">2000</span>
<span class="content__meta-text">Rising Star</span>
</div>
</div>
</div>
<div class="content">
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/8.jpg)"></div>
</div>
<div class="content__text">
<h2 class="content__title">Seek greater wisdom and compassion.</h2>
<span class="content__number">G05</span>
<button class="content__back unbutton">
<svg aria-hidden="true" focusable="false">
<use href="#icon-arrow"></use>
</svg>
</button>
<div class="content__meta">
<span class="content__meta-text">Gerry Ronald</span>
<span class="content__meta-text">2001</span>
<span class="content__meta-text">Messy Luck</span>
</div>
</div>
</div>
<div class="content">
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/9.jpg)"></div>
</div>
<div class="content__text">
<h2 class="content__title">Value experiences over material possessions.</h2>
<span class="content__number">K16</span>
<button class="content__back unbutton">
<svg aria-hidden="true" focusable="false">
<use href="#icon-arrow"></use>
</svg>
</button>
<div class="content__meta">
<span class="content__meta-text">Diana Cohen</span>
<span class="content__meta-text">2002</span>
<span class="content__meta-text">Simple Thing</span>
</div>
</div>
</div>
<div class="content">
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/10.jpg)"></div>
</div>
<div class="content__text">
<h2 class="content__title">Live a life of purpose.</h2>
<span class="content__number">Z09</span>
<button class="content__back unbutton">
<svg aria-hidden="true" focusable="false">
<use href="#icon-arrow"></use>
</svg>
</button>
<div class="content__meta">
<span class="content__meta-text">Mario T. Foy</span>
<span class="content__meta-text">2006</span>
<span class="content__meta-text">The End of all</span>
</div>
</div>
</div>
</section>
<div class="overlay"></div>
</main>
<script src="https://tympanus.net/codrops/adpacks/cda_sponsor.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<script src="https://unpkg.com/imagesloaded@5/imagesloaded.pkgd.min.js"></script>
<script type="module" src="js/demo2/index.js"></script>
</body>
</html>
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>Pixel Transition | Demo 3 | Codrops</title>
<meta name="description" content="Inspiration for pixel page transitions based on Niccolò Miranda's animation." />
<meta name="keywords" content="page transition, animation, pixel, gsap" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="https://use.typekit.net/ctp6pec.css">
<link rel="stylesheet" type="text/css" href="css/base.css" />
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
<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>
<script src="//tympanus.net/codrops/adpacks/analytics.js"></script>
</head>
<body class="demo-3 loading">
<svg class="hidden" xmlns="http://www.w3.org/2000/svg">
<symbol id="icon-arrow" viewBox="0 0 562 980">
<g><path d="M561.4 0H421.2v138.7h140.2zM421.2 138.7H281v140.2h140.2zM281 278.9H140.8v140.2H281zM281 559.4H140.8v140.2H281zM421.2 699.6H281v140.2h140.2zM561.4 839.8H421.2V980h140.2zM140.8 419.1H.6v140.2h140.2z"/></g>
</symbol>
</svg>
<main>
<div class="frame">
<h1 class="frame__title">Pixel Transition</h1>
<nav class="frame__links">
<a class="hover-line" href="https://tympanus.net/codrops/?p=71437">Article</a>
<a class="hover-line" href="http://tympanus.net/Tutorials/Voxelizer/">Previous demo</a>
</nav>
<nav class="frame__demos">
<span>More demos:</span>
<a href="index.html" class="frame__demo">1</a>
<a href="index2.html" class="frame__demo">2</a>
<span>3</span>
<a href="index4.html" class="frame__demo">4</a>
<a href="index5.html" class="frame__demo">5</a>
<a href="index6.html" class="frame__demo">6</a>
</nav>
</div>
<div class="intro">
<div class="intro__text font-3">Rather</div>
<div class="intro__image" style="background-image:url(img/1.jpg)"></div>
<div class="intro__text">than</div>
<div class="intro__image" style="background-image:url(img/2.jpg)"></div>
<div class="intro__text font-2">love</div>
<div class="intro__image" style="background-image:url(img/3.jpg)"></div>
<div class="intro__text font-1">than</div>
<div class="intro__image" style="background-image:url(img/4.jpg)"></div>
<div class="intro__text font-2">money</div>
<div class="intro__image" style="background-image:url(img/5.jpg)"></div>
<div class="intro__text">than</div>
<div class="intro__image" style="background-image:url(img/6.jpg)"></div>
<div class="intro__text font-2">fame</div>
<div class="intro__image" style="background-image:url(img/7.jpg)"></div>
<div class="intro__text">give</div>
<div class="intro__text">me</div>
<div class="intro__image" style="background-image:url(img/8.jpg)"></div>
<div class="intro__text font-2">truth</div>
<div class="intro__image" style="background-image:url(img/9.jpg)"></div>
</div>
<section class="content-wrap">
<div class="content">
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/1.jpg)"></div>
</div>
<div class="content__text">
<h2 class="content__title">Guard your time and attention.</h2>
<span class="content__number">M36</span>
<button class="content__back unbutton">
<svg aria-hidden="true" focusable="false">
<use href="#icon-arrow"></use>
</svg>
</button>
<div class="content__meta">
<span class="content__meta-text">Frank Luck</span>
<span class="content__meta-text">1982</span>
<span class="content__meta-text">Ground Day</span>
</div>
</div>
</div>
<div class="content">
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/2.jpg)"></div>
</div>
<div class="content__text">
<h2 class="content__title">Seek simplicity and nature.</h2>
<span class="content__number">B13</span>
<button class="content__back unbutton">
<svg aria-hidden="true" focusable="false">
<use href="#icon-arrow"></use>
</svg>
</button>
<div class="content__meta">
<span class="content__meta-text">Lora Black</span>
<span class="content__meta-text">1985</span>
<span class="content__meta-text">Lost in Love</span>
</div>
</div>
</div>
<div class="content">
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/3.jpg)"></div>
</div>
<div class="content__text">
<h2 class="content__title">Avoid accumulating needless things.</h2>
<span class="content__number">G98</span>
<button class="content__back unbutton">
<svg aria-hidden="true" focusable="false">
<use href="#icon-arrow"></use>
</svg>
</button>
<div class="content__meta">
<span class="content__meta-text">Lady B.</span>
<span class="content__meta-text">1989</span>
<span class="content__meta-text">Club Byna</span>
</div>
</div>
</div>
<div class="content">
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/4.jpg)"></div>
</div>
<div class="content__text">
<h2 class="content__title">Be conscious of the stories you tell.</h2>
<span class="content__number">K06</span>
<button class="content__back unbutton">
<svg aria-hidden="true" focusable="false">
<use href="#icon-arrow"></use>
</svg>
</button>
<div class="content__meta">
<span class="content__meta-text">Harry D. Walters</span>
<span class="content__meta-text">2023</span>
<span class="content__meta-text">Mad Wanderer</span>
</div>
</div>
</div>
<div class="content">
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/5.jpg)"></div>
</div>
<div class="content__text">
<h2 class="content__title">Rest, reflect, and play.</h2>
<span class="content__number">W02</span>
<button class="content__back unbutton">
<svg aria-hidden="true" focusable="false">
<use href="#icon-arrow"></use>
</svg>
</button>
<div class="content__meta">
<span class="content__meta-text">Cathy Brown</span>
<span class="content__meta-text">1992</span>
<span class="content__meta-text">Free Ride</span>
</div>
</div>
</div>
<div class="content">
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/6.jpg)"></div>
</div>
<div class="content__text">
<h2 class="content__title">Your actions have consequences.</h2>
<span class="content__number">T67</span>
<button class="content__back unbutton">
<svg aria-hidden="true" focusable="false">
<use href="#icon-arrow"></use>
</svg>
</button>
<div class="content__meta">
<span class="content__meta-text">Sarah Zola</span>
<span class="content__meta-text">1996</span>
<span class="content__meta-text">Roundhouse</span>
</div>
</div>
</div>
<div class="content">
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/7.jpg)"></div>
</div>
<div class="content__text">
<h2 class="content__title">Don't compromise your integrity.</h2>
<span class="content__number">X49</span>
<button class="content__back unbutton">
<svg aria-hidden="true" focusable="false">
<use href="#icon-arrow"></use>
</svg>
</button>
<div class="content__meta">
<span class="content__meta-text">Dana Belucci</span>
<span class="content__meta-text">2000</span>
<span class="content__meta-text">Rising Star</span>
</div>
</div>
</div>
<div class="content">
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/8.jpg)"></div>
</div>
<div class="content__text">
<h2 class="content__title">Seek greater wisdom and compassion.</h2>
<span class="content__number">G05</span>
<button class="content__back unbutton">
<svg aria-hidden="true" focusable="false">
<use href="#icon-arrow"></use>
</svg>
</button>
<div class="content__meta">
<span class="content__meta-text">Gerry Ronald</span>
<span class="content__meta-text">2001</span>
<span class="content__meta-text">Messy Luck</span>
</div>
</div>
</div>
<div class="content">
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/9.jpg)"></div>
</div>
<div class="content__text">
<h2 class="content__title">Value experiences over material possessions.</h2>
<span class="content__number">K16</span>
<button class="content__back unbutton">
<svg aria-hidden="true" focusable="false">
<use href="#icon-arrow"></use>
</svg>
</button>
<div class="content__meta">
<span class="content__meta-text">Diana Cohen</span>
<span class="content__meta-text">2002</span>
<span class="content__meta-text">Simple Thing</span>
</div>
</div>
</div>
<div class="content">
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/10.jpg)"></div>
</div>
<div class="content__text">
<h2 class="content__title">Live a life of purpose.</h2>
<span class="content__number">Z09</span>
<button class="content__back unbutton">
<svg aria-hidden="true" focusable="false">
<use href="#icon-arrow"></use>
</svg>
</button>
<div class="content__meta">
<span class="content__meta-text">Mario T. Foy</span>
<span class="content__meta-text">2006</span>
<span class="content__meta-text">The End of all</span>
</div>
</div>
</div>
</section>
<div class="overlay"></div>
</main>
<script src="https://tympanus.net/codrops/adpacks/cda_sponsor.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<script src="https://unpkg.com/imagesloaded@5/imagesloaded.pkgd.min.js"></script>
<script type="module" src="js/demo3/index.js"></script>
</body>
</html>
index4.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>Pixel Transition | Demo 2 | Codrops</title>
<meta name="description" content="Inspiration for pixel page transitions based on Niccolò Miranda's animation." />
<meta name="keywords" content="page transition, animation, pixel, gsap" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="https://use.typekit.net/ctp6pec.css">
<link rel="stylesheet" type="text/css" href="css/base.css" />
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
<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>
<script src="//tympanus.net/codrops/adpacks/analytics.js"></script>
</head>
<body class="demo-4 loading">
<svg class="hidden" xmlns="http://www.w3.org/2000/svg">
<symbol id="icon-arrow" viewBox="0 0 562 980">
<g><path d="M561.4 0H421.2v138.7h140.2zM421.2 138.7H281v140.2h140.2zM281 278.9H140.8v140.2H281zM281 559.4H140.8v140.2H281zM421.2 699.6H281v140.2h140.2zM561.4 839.8H421.2V980h140.2zM140.8 419.1H.6v140.2h140.2z"/></g>
</symbol>
</svg>
<main>
<div class="frame">
<h1 class="frame__title">Pixel Transition</h1>
<nav class="frame__links">
<a class="hover-line" href="https://tympanus.net/codrops/?p=71437">Article</a>
<a class="hover-line" href="http://tympanus.net/Tutorials/Voxelizer/">Previous demo</a>
</nav>
<nav class="frame__demos">
<span>More demos:</span>
<a href="index.html" class="frame__demo">1</a>
<a href="index2.html" class="frame__demo">2</a>
<a href="index3.html" class="frame__demo">3</a>
<span class="frame__demo">4</span>
<a href="index5.html" class="frame__demo">5</a>
<a href="index6.html" class="frame__demo">6</a>
</nav>
</div>
<div class="intro">
<div class="intro__text font-3">Rather</div>
<div class="intro__image" style="background-image:url(img/1.jpg)"></div>
<div class="intro__text">than</div>
<div class="intro__image" style="background-image:url(img/2.jpg)"></div>
<div class="intro__text font-2">love</div>
<div class="intro__image" style="background-image:url(img/3.jpg)"></div>
<div class="intro__text font-1">than</div>
<div class="intro__image" style="background-image:url(img/4.jpg)"></div>
<div class="intro__text font-2">money</div>
<div class="intro__image" style="background-image:url(img/5.jpg)"></div>
<div class="intro__text">than</div>
<div class="intro__image" style="background-image:url(img/6.jpg)"></div>
<div class="intro__text font-2">fame</div>
<div class="intro__image" style="background-image:url(img/7.jpg)"></div>
<div class="intro__text">give</div>
<div class="intro__text">me</div>
<div class="intro__image" style="background-image:url(img/8.jpg)"></div>
<div class="intro__text font-2">truth</div>
<div class="intro__image" style="background-image:url(img/9.jpg)"></div>
</div>
<section class="content-wrap">
<div class="content">
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/1.jpg)"></div>
</div>
<div class="content__text">
<h2 class="content__title">Guard your time and attention.</h2>
<span class="content__number">M36</span>
<button class="content__back unbutton">
<svg aria-hidden="true" focusable="false">
<use href="#icon-arrow"></use>
</svg>
</button>
<div class="content__meta">
<span class="content__meta-text">Frank Luck</span>
<span class="content__meta-text">1982</span>
<span class="content__meta-text">Ground Day</span>
</div>
</div>
</div>
<div class="content">
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/2.jpg)"></div>
</div>
<div class="content__text">
<h2 class="content__title">Seek simplicity and nature.</h2>
<span class="content__number">B13</span>
<button class="content__back unbutton">
<svg aria-hidden="true" focusable="false">
<use href="#icon-arrow"></use>
</svg>
</button>
<div class="content__meta">
<span class="content__meta-text">Lora Black</span>
<span class="content__meta-text">1985</span>
<span class="content__meta-text">Lost in Love</span>
</div>
</div>
</div>
<div class="content">
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/3.jpg)"></div>
</div>
<div class="content__text">
<h2 class="content__title">Avoid accumulating needless things.</h2>
<span class="content__number">G98</span>
<button class="content__back unbutton">
<svg aria-hidden="true" focusable="false">
<use href="#icon-arrow"></use>
</svg>
</button>
<div class="content__meta">
<span class="content__meta-text">Lady B.</span>
<span class="content__meta-text">1989</span>
<span class="content__meta-text">Club Byna</span>
</div>
</div>
</div>
<div class="content">
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/4.jpg)"></div>
</div>
<div class="content__text">
<h2 class="content__title">Be conscious of the stories you tell.</h2>
<span class="content__number">K06</span>
<button class="content__back unbutton">
<svg aria-hidden="true" focusable="false">
<use href="#icon-arrow"></use>
</svg>
</button>
<div class="content__meta">
<span class="content__meta-text">Harry D. Walters</span>
<span class="content__meta-text">2023</span>
<span class="content__meta-text">Mad Wanderer</span>
</div>
</div>
</div>
<div class="content">
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/5.jpg)"></div>
</div>
<div class="content__text">
<h2 class="content__title">Rest, reflect, and play.</h2>
<span class="content__number">W02</span>
<button class="content__back unbutton">
<svg aria-hidden="true" focusable="false">
<use href="#icon-arrow"></use>
</svg>
</button>
<div class="content__meta">
<span class="content__meta-text">Cathy Brown</span>
<span class="content__meta-text">1992</span>
<span class="content__meta-text">Free Ride</span>
</div>
</div>
</div>
<div class="content">
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/6.jpg)"></div>
</div>
<div class="content__text">
<h2 class="content__title">Your actions have consequences.</h2>
<span class="content__number">T67</span>
<button class="content__back unbutton">
<svg aria-hidden="true" focusable="false">
<use href="#icon-arrow"></use>
</svg>
</button>
<div class="content__meta">
<span class="content__meta-text">Sarah Zola</span>
<span class="content__meta-text">1996</span>
<span class="content__meta-text">Roundhouse</span>
</div>
</div>
</div>
<div class="content">
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/7.jpg)"></div>
</div>
<div class="content__text">
<h2 class="content__title">Don't compromise your integrity.</h2>
<span class="content__number">X49</span>
<button class="content__back unbutton">
<svg aria-hidden="true" focusable="false">
<use href="#icon-arrow"></use>
</svg>
</button>
<div class="content__meta">
<span class="content__meta-text">Dana Belucci</span>
<span class="content__meta-text">2000</span>
<span class="content__meta-text">Rising Star</span>
</div>
</div>
</div>
<div class="content">
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/8.jpg)"></div>
</div>
<div class="content__text">
<h2 class="content__title">Seek greater wisdom and compassion.</h2>
<span class="content__number">G05</span>
<button class="content__back unbutton">
<svg aria-hidden="true" focusable="false">
<use href="#icon-arrow"></use>
</svg>
</button>
<div class="content__meta">
<span class="content__meta-text">Gerry Ronald</span>
<span class="content__meta-text">2001</span>
<span class="content__meta-text">Messy Luck</span>
</div>
</div>
</div>
<div class="content">
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/9.jpg)"></div>
</div>
<div class="content__text">
<h2 class="content__title">Value experiences over material possessions.</h2>
<span class="content__number">K16</span>
<button class="content__back unbutton">
<svg aria-hidden="true" focusable="false">
<use href="#icon-arrow"></use>
</svg>
</button>
<div class="content__meta">
<span class="content__meta-text">Diana Cohen</span>
<span class="content__meta-text">2002</span>
<span class="content__meta-text">Simple Thing</span>
</div>
</div>
</div>
<div class="content">
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/10.jpg)"></div>
</div>
<div class="content__text">
<h2 class="content__title">Live a life of purpose.</h2>
<span class="content__number">Z09</span>
<button class="content__back unbutton">
<svg aria-hidden="true" focusable="false">
<use href="#icon-arrow"></use>
</svg>
</button>
<div class="content__meta">
<span class="content__meta-text">Mario T. Foy</span>
<span class="content__meta-text">2006</span>
<span class="content__meta-text">The End of all</span>
</div>
</div>
</div>
</section>
<div class="overlay"></div>
</main>
<script src="https://tympanus.net/codrops/adpacks/cda_sponsor.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<script src="https://unpkg.com/imagesloaded@5/imagesloaded.pkgd.min.js"></script>
<script type="module" src="js/demo4/index.js"></script>
</body>
</html>
index5.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>Pixel Transition | Demo 5 | Codrops</title>
<meta name="description" content="Inspiration for pixel page transitions based on Niccolò Miranda's animation." />
<meta name="keywords" content="page transition, animation, pixel, gsap" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="https://use.typekit.net/ctp6pec.css">
<link rel="stylesheet" type="text/css" href="css/base.css" />
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
<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>
<script src="//tympanus.net/codrops/adpacks/analytics.js"></script>
</head>
<body class="demo-5 loading">
<svg class="hidden" xmlns="http://www.w3.org/2000/svg">
<symbol id="icon-arrow" viewBox="0 0 562 980">
<g><path d="M561.4 0H421.2v138.7h140.2zM421.2 138.7H281v140.2h140.2zM281 278.9H140.8v140.2H281zM281 559.4H140.8v140.2H281zM421.2 699.6H281v140.2h140.2zM561.4 839.8H421.2V980h140.2zM140.8 419.1H.6v140.2h140.2z"/></g>
</symbol>
</svg>
<main>
<div class="frame">
<h1 class="frame__title">Pixel Transition</h1>
<nav class="frame__links">
<a class="hover-line" href="https://tympanus.net/codrops/?p=71437">Article</a>
<a class="hover-line" href="http://tympanus.net/Tutorials/Voxelizer/">Previous demo</a>
</nav>
<nav class="frame__demos">
<span>More demos:</span>
<a href="index.html" class="frame__demo">1</a>
<a href="index2.html" class="frame__demo">2</a>
<a href="index3.html" class="frame__demo">3</a>
<a href="index4.html" class="frame__demo">4</a>
<span>5</span>
<a href="index6.html" class="frame__demo">6</a>
</nav>
</div>
<div class="intro">
<div class="intro__text font-3">Rather</div>
<div class="intro__image" style="background-image:url(img/1.jpg)"></div>
<div class="intro__text">than</div>
<div class="intro__image" style="background-image:url(img/2.jpg)"></div>
<div class="intro__text font-2">love</div>
<div class="intro__image" style="background-image:url(img/3.jpg)"></div>
<div class="intro__text font-1">than</div>
<div class="intro__image" style="background-image:url(img/4.jpg)"></div>
<div class="intro__text font-2">money</div>
<div class="intro__image" style="background-image:url(img/5.jpg)"></div>
<div class="intro__text">than</div>
<div class="intro__image" style="background-image:url(img/6.jpg)"></div>
<div class="intro__text font-2">fame</div>
<div class="intro__image" style="background-image:url(img/7.jpg)"></div>
<div class="intro__text">give</div>
<div class="intro__text">me</div>
<div class="intro__image" style="background-image:url(img/8.jpg)"></div>
<div class="intro__text font-2">truth</div>
<div class="intro__image" style="background-image:url(img/9.jpg)"></div>
</div>
<section class="content-wrap">
<div class="content">
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/1.jpg)"></div>
</div>
<div class="content__text">
<h2 class="content__title">Guard your time and attention.</h2>
<span class="content__number">M36</span>
<button class="content__back unbutton">
<svg aria-hidden="true" focusable="false">
<use href="#icon-arrow"></use>
</svg>
</button>
<div class="content__meta">
<span class="content__meta-text">Frank Luck</span>
<span class="content__meta-text">1982</span>
<span class="content__meta-text">Ground Day</span>
</div>
</div>
</div>
<div class="content">
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/2.jpg)"></div>
</div>
<div class="content__text">
<h2 class="content__title">Seek simplicity and nature.</h2>
<span class="content__number">B13</span>
<button class="content__back unbutton">
<svg aria-hidden="true" focusable="false">
<use href="#icon-arrow"></use>
</svg>
</button>
<div class="content__meta">
<span class="content__meta-text">Lora Black</span>
<span class="content__meta-text">1985</span>
<span class="content__meta-text">Lost in Love</span>
</div>
</div>
</div>
<div class="content">
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/3.jpg)"></div>
</div>
<div class="content__text">
<h2 class="content__title">Avoid accumulating needless things.</h2>
<span class="content__number">G98</span>
<button class="content__back unbutton">
<svg aria-hidden="true" focusable="false">
<use href="#icon-arrow"></use>
</svg>
</button>
<div class="content__meta">
<span class="content__meta-text">Lady B.</span>
<span class="content__meta-text">1989</span>
<span class="content__meta-text">Club Byna</span>
</div>
</div>
</div>
<div class="content">
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/4.jpg)"></div>
</div>
<div class="content__text">
<h2 class="content__title">Be conscious of the stories you tell.</h2>
<span class="content__number">K06</span>
<button class="content__back unbutton">
<svg aria-hidden="true" focusable="false">
<use href="#icon-arrow"></use>
</svg>
</button>
<div class="content__meta">
<span class="content__meta-text">Harry D. Walters</span>
<span class="content__meta-text">2023</span>
<span class="content__meta-text">Mad Wanderer</span>
</div>
</div>
</div>
<div class="content">
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/5.jpg)"></div>
</div>
<div class="content__text">
<h2 class="content__title">Rest, reflect, and play.</h2>
<span class="content__number">W02</span>
<button class="content__back unbutton">
<svg aria-hidden="true" focusable="false">
<use href="#icon-arrow"></use>
</svg>
</button>
<div class="content__meta">
<span class="content__meta-text">Cathy Brown</span>
<span class="content__meta-text">1992</span>
<span class="content__meta-text">Free Ride</span>
</div>
</div>
</div>
<div class="content">
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/6.jpg)"></div>
</div>
<div class="content__text">
<h2 class="content__title">Your actions have consequences.</h2>
<span class="content__number">T67</span>
<button class="content__back unbutton">
<svg aria-hidden="true" focusable="false">
<use href="#icon-arrow"></use>
</svg>
</button>
<div class="content__meta">
<span class="content__meta-text">Sarah Zola</span>
<span class="content__meta-text">1996</span>
<span class="content__meta-text">Roundhouse</span>
</div>
</div>
</div>
<div class="content">
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/7.jpg)"></div>
</div>
<div class="content__text">
<h2 class="content__title">Don't compromise your integrity.</h2>
<span class="content__number">X49</span>
<button class="content__back unbutton">
<svg aria-hidden="true" focusable="false">
<use href="#icon-arrow"></use>
</svg>
</button>
<div class="content__meta">
<span class="content__meta-text">Dana Belucci</span>
<span class="content__meta-text">2000</span>
<span class="content__meta-text">Rising Star</span>
</div>
</div>
</div>
<div class="content">
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/8.jpg)"></div>
</div>
<div class="content__text">
<h2 class="content__title">Seek greater wisdom and compassion.</h2>
<span class="content__number">G05</span>
<button class="content__back unbutton">
<svg aria-hidden="true" focusable="false">
<use href="#icon-arrow"></use>
</svg>
</button>
<div class="content__meta">
<span class="content__meta-text">Gerry Ronald</span>
<span class="content__meta-text">2001</span>
<span class="content__meta-text">Messy Luck</span>
</div>
</div>
</div>
<div class="content">
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/9.jpg)"></div>
</div>
<div class="content__text">
<h2 class="content__title">Value experiences over material possessions.</h2>
<span class="content__number">K16</span>
<button class="content__back unbutton">
<svg aria-hidden="true" focusable="false">
<use href="#icon-arrow"></use>
</svg>
</button>
<div class="content__meta">
<span class="content__meta-text">Diana Cohen</span>
<span class="content__meta-text">2002</span>
<span class="content__meta-text">Simple Thing</span>
</div>
</div>
</div>
<div class="content">
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/10.jpg)"></div>
</div>
<div class="content__text">
<h2 class="content__title">Live a life of purpose.</h2>
<span class="content__number">Z09</span>
<button class="content__back unbutton">
<svg aria-hidden="true" focusable="false">
<use href="#icon-arrow"></use>
</svg>
</button>
<div class="content__meta">
<span class="content__meta-text">Mario T. Foy</span>
<span class="content__meta-text">2006</span>
<span class="content__meta-text">The End of all</span>
</div>
</div>
</div>
</section>
<div class="overlay"></div>
</main>
<script src="https://tympanus.net/codrops/adpacks/cda_sponsor.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<script src="https://unpkg.com/imagesloaded@5/imagesloaded.pkgd.min.js"></script>
<script type="module" src="js/demo5/index.js"></script>
</body>
</html>
index6.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>Pixel Transition | Demo 6 | Codrops</title>
<meta name="description" content="Inspiration for pixel page transitions based on Niccolò Miranda's animation." />
<meta name="keywords" content="page transition, animation, pixel, gsap" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="https://use.typekit.net/ctp6pec.css">
<link rel="stylesheet" type="text/css" href="css/base.css" />
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
<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>
<script src="//tympanus.net/codrops/adpacks/analytics.js"></script>
</head>
<body class="demo-6 loading">
<svg class="hidden" xmlns="http://www.w3.org/2000/svg">
<symbol id="icon-arrow" viewBox="0 0 562 980">
<g><path d="M561.4 0H421.2v138.7h140.2zM421.2 138.7H281v140.2h140.2zM281 278.9H140.8v140.2H281zM281 559.4H140.8v140.2H281zM421.2 699.6H281v140.2h140.2zM561.4 839.8H421.2V980h140.2zM140.8 419.1H.6v140.2h140.2z"/></g>
</symbol>
</svg>
<main>
<div class="frame">
<h1 class="frame__title">Pixel Transition</h1>
<nav class="frame__links">
<a class="hover-line" href="https://tympanus.net/codrops/?p=71437">Article</a>
<a class="hover-line" href="http://tympanus.net/Tutorials/Voxelizer/">Previous demo</a>
</nav>
<nav class="frame__demos">
<span>More demos:</span>
<a href="index.html" class="frame__demo">1</a>
<a href="index2.html" class="frame__demo">2</a>
<a href="index3.html" class="frame__demo">3</a>
<a href="index4.html" class="frame__demo">4</a>
<a href="index5.html" class="frame__demo">5</a>
<span class="frame__demo">6</span>
</nav>
</div>
<div class="intro">
<div class="intro__text font-3">Rather</div>
<div class="intro__image" style="background-image:url(img/1.jpg)"></div>
<div class="intro__text">than</div>
<div class="intro__image" style="background-image:url(img/2.jpg)"></div>
<div class="intro__text font-2">love</div>
<div class="intro__image" style="background-image:url(img/3.jpg)"></div>
<div class="intro__text font-1">than</div>
<div class="intro__image" style="background-image:url(img/4.jpg)"></div>
<div class="intro__text font-2">money</div>
<div class="intro__image" style="background-image:url(img/5.jpg)"></div>
<div class="intro__text">than</div>
<div class="intro__image" style="background-image:url(img/6.jpg)"></div>
<div class="intro__text font-2">fame</div>
<div class="intro__image" style="background-image:url(img/7.jpg)"></div>
<div class="intro__text">give</div>
<div class="intro__text">me</div>
<div class="intro__image" style="background-image:url(img/8.jpg)"></div>
<div class="intro__text font-2">truth</div>
<div class="intro__image" style="background-image:url(img/9.jpg)"></div>
</div>
<section class="content-wrap">
<div class="content">
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/1.jpg)"></div>
</div>
<div class="content__text">
<h2 class="content__title">Guard your time and attention.</h2>
<span class="content__number">M36</span>
<button class="content__back unbutton">
<svg aria-hidden="true" focusable="false">
<use href="#icon-arrow"></use>
</svg>
</button>
<div class="content__meta">
<span class="content__meta-text">Frank Luck</span>
<span class="content__meta-text">1982</span>
<span class="content__meta-text">Ground Day</span>
</div>
</div>
</div>
<div class="content">
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/2.jpg)"></div>
</div>
<div class="content__text">
<h2 class="content__title">Seek simplicity and nature.</h2>
<span class="content__number">B13</span>
<button class="content__back unbutton">
<svg aria-hidden="true" focusable="false">
<use href="#icon-arrow"></use>
</svg>
</button>
<div class="content__meta">
<span class="content__meta-text">Lora Black</span>
<span class="content__meta-text">1985</span>
<span class="content__meta-text">Lost in Love</span>
</div>
</div>
</div>
<div class="content">
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/3.jpg)"></div>
</div>
<div class="content__text">
<h2 class="content__title">Avoid accumulating needless things.</h2>
<span class="content__number">G98</span>
<button class="content__back unbutton">
<svg aria-hidden="true" focusable="false">
<use href="#icon-arrow"></use>
</svg>
</button>
<div class="content__meta">
<span class="content__meta-text">Lady B.</span>
<span class="content__meta-text">1989</span>
<span class="content__meta-text">Club Byna</span>
</div>
</div>
</div>
<div class="content">
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/4.jpg)"></div>
</div>
<div class="content__text">
<h2 class="content__title">Be conscious of the stories you tell.</h2>
<span class="content__number">K06</span>
<button class="content__back unbutton">
<svg aria-hidden="true" focusable="false">
<use href="#icon-arrow"></use>
</svg>
</button>
<div class="content__meta">
<span class="content__meta-text">Harry D. Walters</span>
<span class="content__meta-text">2023</span>
<span class="content__meta-text">Mad Wanderer</span>
</div>
</div>
</div>
<div class="content">
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/5.jpg)"></div>
</div>
<div class="content__text">
<h2 class="content__title">Rest, reflect, and play.</h2>
<span class="content__number">W02</span>
<button class="content__back unbutton">
<svg aria-hidden="true" focusable="false">
<use href="#icon-arrow"></use>
</svg>
</button>
<div class="content__meta">
<span class="content__meta-text">Cathy Brown</span>
<span class="content__meta-text">1992</span>
<span class="content__meta-text">Free Ride</span>
</div>
</div>
</div>
<div class="content">
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/6.jpg)"></div>
</div>
<div class="content__text">
<h2 class="content__title">Your actions have consequences.</h2>
<span class="content__number">T67</span>
<button class="content__back unbutton">
<svg aria-hidden="true" focusable="false">
<use href="#icon-arrow"></use>
</svg>
</button>
<div class="content__meta">
<span class="content__meta-text">Sarah Zola</span>
<span class="content__meta-text">1996</span>
<span class="content__meta-text">Roundhouse</span>
</div>
</div>
</div>
<div class="content">
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/7.jpg)"></div>
</div>
<div class="content__text">
<h2 class="content__title">Don't compromise your integrity.</h2>
<span class="content__number">X49</span>
<button class="content__back unbutton">
<svg aria-hidden="true" focusable="false">
<use href="#icon-arrow"></use>
</svg>
</button>
<div class="content__meta">
<span class="content__meta-text">Dana Belucci</span>
<span class="content__meta-text">2000</span>
<span class="content__meta-text">Rising Star</span>
</div>
</div>
</div>
<div class="content">
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/8.jpg)"></div>
</div>
<div class="content__text">
<h2 class="content__title">Seek greater wisdom and compassion.</h2>
<span class="content__number">G05</span>
<button class="content__back unbutton">
<svg aria-hidden="true" focusable="false">
<use href="#icon-arrow"></use>
</svg>
</button>
<div class="content__meta">
<span class="content__meta-text">Gerry Ronald</span>
<span class="content__meta-text">2001</span>
<span class="content__meta-text">Messy Luck</span>
</div>
</div>
</div>
<div class="content">
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/9.jpg)"></div>
</div>
<div class="content__text">
<h2 class="content__title">Value experiences over material possessions.</h2>
<span class="content__number">K16</span>
<button class="content__back unbutton">
<svg aria-hidden="true" focusable="false">
<use href="#icon-arrow"></use>
</svg>
</button>
<div class="content__meta">
<span class="content__meta-text">Diana Cohen</span>
<span class="content__meta-text">2002</span>
<span class="content__meta-text">Simple Thing</span>
</div>
</div>
</div>
<div class="content">
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/10.jpg)"></div>
</div>
<div class="content__text">
<h2 class="content__title">Live a life of purpose.</h2>
<span class="content__number">Z09</span>
<button class="content__back unbutton">
<svg aria-hidden="true" focusable="false">
<use href="#icon-arrow"></use>
</svg>
</button>
<div class="content__meta">
<span class="content__meta-text">Mario T. Foy</span>
<span class="content__meta-text">2006</span>
<span class="content__meta-text">The End of all</span>
</div>
</div>
</div>
</section>
<div class="overlay"></div>
</main>
<script src="https://tympanus.net/codrops/adpacks/cda_sponsor.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<script src="https://unpkg.com/imagesloaded@5/imagesloaded.pkgd.min.js"></script>
<script type="module" src="js/demo6/index.js"></script>
</body>
</html>
js/demo1/index.js
import { preloadImages, preloadFonts } from '../utils.js';
import { Overlay } from './overlay.js';
// Select the overlay element from the DOM
const overlayEl = document.querySelector('.overlay');
// Intro
const intro = document.querySelector('.intro');
// Intro images
const images = [...intro.querySelectorAll('.intro__image')];
// Content elements
const contentElements = [...document.querySelectorAll('.content-wrap > .content')];
// Instantiate an Overlay object using the selected overlay element
const overlay = new Overlay(overlayEl, {
rows: 8,
columns: 14
});
let isAnimating = false;
// Attach click event listeners to each intro image
images.forEach((image, position) => {
// Show the overlay when an intro image is clicked
image.addEventListener('click', () => {
if ( isAnimating ) return;
isAnimating = true;
// Animate intro section
gsap.to(intro, {
duration: 0.8,
ease: 'power3.inOut',
yPercent: 15,
opacity: 0
});
overlay.show({
// Specify the cell's transform origin
transformOrigin: '50% 0%',
// Duration for each cell animation
duration: 0.4,
// Ease for each cell animation
ease: 'power3.inOut',
// Stagger function
stagger: index => 0.03 * (overlay.cells.flat()[index].row + gsap.utils.random(0,5))
})
.then(() => {
// show content
intro.classList.add('intro--closed');
contentElements[position].classList.add('content--open');
// Now hide the overlay
overlay.hide({
// Specify the cell's transform origin
transformOrigin: '50% 100%',
// Duration for each cell animation
duration: 0.4,
// Ease for each cell animation
ease: 'power2',
// Stagger function
stagger: index => 0.03 * (overlay.cells.flat()[index].row + gsap.utils.random(0,5))
}).then(() => isAnimating = false);
// Animate content image
gsap.fromTo(contentElements[position].querySelector('.content__img'), {
yPercent: -25,
opacity: 0
}, {
duration: 0.8,
ease: 'power3',
yPercent: 0,
opacity: 1
});
})
});
});
// Attach click event listeners to each content back button
contentElements.forEach((content, position) => {
content.querySelector('.content__back').addEventListener('click', () => {
if ( isAnimating ) return;
isAnimating = true;
// Animate content image
gsap.to(content.querySelector('.content__img'), {
duration: 0.8,
ease: 'power3.inOut',
yPercent: -15,
opacity: 0
});
overlay.show({
// Specify the cell's transform origin
transformOrigin: '50% 100%',
// Duration for each cell animation
duration: 0.4,
// Ease for each cell animation
ease: 'power3.inOut',
// Stagger function
stagger: (index, _, array) => 0.03 * (overlay.cells.flat()[array.length-index-1].row + gsap.utils.random(0,5))
})
.then(() => {
// hide content
intro.classList.remove('intro--closed');
content.classList.remove('content--open');
// Now hide the overlay
overlay.hide({
// Specify the cell's transform origin
transformOrigin: '50% 0%',
// Duration for each cell animation
duration: 0.4,
// Ease for each cell animation
ease: 'power2',
// Stagger function
stagger: (index, _, array) => 0.03 * (overlay.cells.flat()[array.length-index-1].row + gsap.utils.random(0,5))
}).then(() => isAnimating = false);
// Animate intro section
gsap.to(intro, {
duration: 0.8,
ease: 'power3',
yPercent: 0,
opacity: 1
});
})
});
});
// Preload images and fonts and remove loader
Promise.all([
preloadImages('.intro__image, .content__img-inner'),
preloadFonts('ctp6pec')
]).then(() => document.body.classList.remove('loading'));js/demo1/overlay.js
// Cell class definition
class Cell {
DOM = {
el: null
};
row;
column;
constructor(row, column) {
this.DOM.el = document.createElement('div');
gsap.set(this.DOM.el, {willChange: 'opacity, transform'});
this.row = row;
this.column = column;
}
}
// Overlay class definition
export class Overlay {
DOM = {
el: null
};
// cells array
cells = [];
// options
options = {
// Number of cell rows
rows: 10,
// Number of cell columns
columns: 10,
};
// Constructor accepts a DOM element representing the overlay
constructor(DOM_el, customOptions) {
this.DOM.el = DOM_el;
// Merge default options with provided options
this.options = Object.assign({}, this.options, customOptions);
// Set the value of the CSS variable
this.DOM.el.style.setProperty('--columns', this.options.columns);
// Create an array of all cells
this.cells = new Array(this.options.rows);
for (let i = 0; i < this.options.rows; ++i) {
this.cells[i] = new Array(this.options.columns);
}
// Fill the array with values
for (let i = 0; i < this.options.rows; ++i) {
for (let j = 0; j < this.options.columns; ++j) {
const cell = new Cell(i,j);
this.cells[i][j] = cell;
this.DOM.el.appendChild(cell.DOM.el);
}
}
}
// Show the overlay and animate the cells in
show(customConfig = {}) {
return new Promise((resolve) => {
// Default animation configuration
const defaultConfig = {
// Specify the cell's transform origin
transformOrigin: '50% 50%',
// Duration for each cell animation
duration: 0.5,
// Ease for each cell animation
ease: 'none',
// Stagger object
stagger: {
grid: [this.options.rows, this.options.columns],
from: 0,
each: 0.05,
ease: 'none'
}
};
const config = Object.assign({}, defaultConfig, customConfig);
gsap.set(this.DOM.el, {opacity: 1});
gsap.fromTo(this.cells.flat().map(cell => cell.DOM.el), {
scale: 0,
opacity: 0,
transformOrigin: config.transformOrigin
}, {
duration: config.duration,
ease: config.ease,
scale: 1.01,
opacity: 1,
stagger: config.stagger,
onComplete: resolve
});
});
}
// Hide the overlay and animate the cells out
hide(customConfig = {}) {
return new Promise((resolve) => {
// Default animation configuration
const defaultConfig = {
transformOrigin: '50% 50%',
// Duration for each cell animation
duration: 0.5,
// Ease for each cell animation
ease: 'none',
// Stagger object
stagger: {
grid: [this.options.rows, this.options.columns],
from: 0,
each: 0.05,
ease: 'none'
}
};
const config = Object.assign({}, defaultConfig, customConfig);
gsap.fromTo(this.cells.flat().map(cell => cell.DOM.el), {
transformOrigin: config.transformOrigin
}, {
duration: config.duration,
ease: config.ease,
scale: 0,
opacity: 0,
stagger: config.stagger,
onComplete: resolve
});
});
}
}js/demo2/index.js
import { preloadImages, preloadFonts } from '../utils.js';
import { Overlay } from './overlay.js';
// Select the overlay element from the DOM
const overlayEl = document.querySelector('.overlay');
// Intro
const intro = document.querySelector('.intro');
// Intro images
const images = [...intro.querySelectorAll('.intro__image')];
// Content elements
const contentElements = [...document.querySelectorAll('.content-wrap > .content')];
// Instantiate an Overlay object using the selected overlay element
const overlay = new Overlay(overlayEl, {
rows: 9,
columns: 17
});
let isAnimating = false;
// Attach click event listeners to each intro image
images.forEach((image, position) => {
// Show the overlay when an intro image is clicked
image.addEventListener('click', () => {
if ( isAnimating ) return;
isAnimating = true;
// Animate intro section
gsap.to(intro, {
duration: 1,
ease: 'power3.inOut',
scaleX: 1.8,
opacity: 0
});
overlay.show({
// Duration for each cell animation
duration: 0.25,
// Ease for each cell animation
ease: 'power1.in',
// Stagger object
stagger: {
grid: [overlay.options.rows, overlay.options.columns],
from: 'center',
each: 0.025
}
})
.then(() => {
// show content
intro.classList.add('intro--closed');
contentElements[position].classList.add('content--open');
// Now hide the overlay
overlay.hide({
// Duration for each cell animation
duration: 0.25,
// Ease for each cell animation
ease: 'power1',
// Stagger object
stagger: {
grid: [overlay.options.rows, overlay.options.columns],
from: 'center',
each: 0.025
}
}).then(() => isAnimating = false);
// Animate content image
gsap.fromTo(contentElements[position].querySelector('.content__img'), {
scaleX: 0.5,
opacity: 0
}, {
duration: 0.8,
ease: 'power3',
scaleX: 1,
opacity: 1
});
})
});
});
// Attach click event listeners to each content back button
contentElements.forEach((content) => {
content.querySelector('.content__back').addEventListener('click', () => {
if ( isAnimating ) return;
isAnimating = true;
// Animate content image
gsap.to(content.querySelector('.content__img'), {
duration: 0.7,
ease: 'power2.in',
scaleX: 0.75,
opacity: 0
});
overlay.show({
// Duration for each cell animation
duration: 0.25,
// Ease for each cell animation
ease: 'power1.in',
// Stagger object
stagger: {
grid: [overlay.options.rows, overlay.options.columns],
from: 'edges',
each: 0.025
}
})
.then(() => {
// hide content here
intro.classList.remove('intro--closed');
content.classList.remove('content--open');
// Now hide the overlay
overlay.hide({
// Duration for each cell animation
duration: 0.25,
// Ease for each cell animation
ease: 'power1',
// Stagger object
stagger: {
grid: [overlay.options.rows, overlay.options.columns],
from: 'edges',
each: 0.025
}
}).then(() => isAnimating = false);
// Animate intro section
gsap.to(intro, {
duration: 0.8,
ease: 'expo',
scaleX: 1,
opacity: 1
});
})
});
});
// Preload images and fonts and remove loader
Promise.all([
preloadImages('.intro__image, .content__img-inner'),
preloadFonts('ctp6pec')
]).then(() => document.body.classList.remove('loading'));js/demo2/overlay.js
// Cell class definition
class Cell {
DOM = {
el: null
};
row;
column;
constructor(row, column) {
this.DOM.el = document.createElement('div');
gsap.set(this.DOM.el, {willChange: 'opacity, transform'});
this.row = row;
this.column = column;
}
}
// Overlay class definition
export class Overlay {
DOM = {
el: null
};
// cells array
cells = [];
// options
options = {
// Number of cell rows
rows: 10,
// Number of cell columns
columns: 10,
};
// Constructor accepts a DOM element representing the overlay
constructor(DOM_el, customOptions) {
this.DOM.el = DOM_el;
// Merge default options with provided options
this.options = Object.assign({}, this.options, customOptions);
// Set the value of the CSS variable
this.DOM.el.style.setProperty('--columns', this.options.columns);
// Create an array of all cells
this.cells = new Array(this.options.rows);
for (let i = 0; i < this.options.rows; ++i) {
this.cells[i] = new Array(this.options.columns);
}
// Fill the array with values
for (let i = 0; i < this.options.rows; ++i) {
for (let j = 0; j < this.options.columns; ++j) {
const cell = new Cell(i,j);
this.cells[i][j] = cell;
this.DOM.el.appendChild(cell.DOM.el);
}
}
}
// Show the overlay and animate the cells in
show(customConfig = {}) {
return new Promise((resolve) => {
// Default animation configuration
const defaultConfig = {
// Specify the cell's transform origin
transformOrigin: '50% 50%',
// Duration for each cell animation
duration: 0.5,
// Ease for each cell animation
ease: 'none',
// Stagger object
stagger: {
grid: [this.options.rows, this.options.columns],
from: 0,
each: 0.05,
ease: 'none'
}
};
const config = Object.assign({}, defaultConfig, customConfig);
gsap.set(this.DOM.el, {opacity: 1});
gsap.fromTo(this.cells.flat().map(cell => cell.DOM.el), {
scale: 0,
opacity: 0,
transformOrigin: config.transformOrigin
}, {
duration: config.duration,
ease: config.ease,
scale: 1.03,
opacity: 1,
stagger: config.stagger,
onComplete: resolve
});
});
}
// Hide the overlay and animate the cells out
hide(customConfig = {}) {
return new Promise((resolve) => {
// Default animation configuration
const defaultConfig = {
transformOrigin: '50% 50%',
// Duration for each cell animation
duration: 0.5,
// Ease for each cell animation
ease: 'none',
// Stagger object
stagger: {
grid: [this.options.rows, this.options.columns],
from: 0,
each: 0.05,
ease: 'none'
}
};
const config = Object.assign({}, defaultConfig, customConfig);
gsap.fromTo(this.cells.flat().map(cell => cell.DOM.el), {
transformOrigin: config.transformOrigin
}, {
duration: config.duration,
ease: config.ease,
scale: 0,
opacity: 0,
stagger: config.stagger,
onComplete: resolve
});
});
}
}js/demo3/index.js
import { preloadImages, preloadFonts } from '../utils.js';
import { Overlay } from './overlay.js';
// Select the overlay element from the DOM
const overlayEl = document.querySelector('.overlay');
// Intro
const intro = document.querySelector('.intro');
// Intro images
const images = [...intro.querySelectorAll('.intro__image')];
// Content elements
const contentElements = [...document.querySelectorAll('.content-wrap > .content')];
// Instantiate an Overlay object using the selected overlay element
const overlay = new Overlay(overlayEl, {
rows: 7,
columns: 13
});
let isAnimating = false;
// Attach click event listeners to each intro image
images.forEach((image, position) => {
// Show the overlay when an intro image is clicked
image.addEventListener('click', () => {
if ( isAnimating ) return;
isAnimating = true;
// Animate intro section
gsap.to(intro, {
duration: 0.7,
ease: 'power2.in',
scale: 0.75
});
overlay.show({
// Duration for each cell animation
duration: 0.3,
// Ease for each cell animation
ease: 'power1.inOut',
// Stagger object
stagger: {
grid: [overlay.options.rows, overlay.options.columns],
from: 'end',
each: 0.035
}
})
.then(() => {
// show content
intro.classList.add('intro--closed');
contentElements[position].classList.add('content--open');
// Now hide the overlay
overlay.hide({
// Duration for each cell animation
duration: 0.3,
// Ease for each cell animation
ease: 'power3',
// Stagger object
stagger: {
grid: [overlay.options.rows, overlay.options.columns],
from: 'end',
each: 0.035
}
}).then(() => isAnimating = false);
// Animate content image
gsap.fromTo(contentElements[position].querySelector('.content__img'), {
scale: 1.2
}, {
duration: 0.9,
ease: 'expo',
scale: 1
});
})
});
});
// Attach click event listeners to each content back button
contentElements.forEach((content) => {
content.querySelector('.content__back').addEventListener('click', () => {
if ( isAnimating ) return;
isAnimating = true;
// Animate content image
gsap.to(content.querySelector('.content__img'), {
duration: 0.7,
ease: 'power2.in',
scale: 1.2
});
overlay.show({
// Duration for each cell animation
duration: 0.3,
// Ease for each cell animation
ease: 'power1.inOut',
// Stagger object
stagger: {
grid: [overlay.options.rows, overlay.options.columns],
from: 'start',
each: 0.035
}
})
.then(() => {
// hide content here
intro.classList.remove('intro--closed');
content.classList.remove('content--open');
// Now hide the overlay
overlay.hide({
// Duration for each cell animation
duration: 0.3,
// Ease for each cell animation
ease: 'power3',
// Stagger object
stagger: {
grid: [overlay.options.rows, overlay.options.columns],
from: 'start',
each: 0.035
}
}).then(() => isAnimating = false);
// Animate intro section
gsap.to(intro, {
duration: 0.9,
ease: 'expo',
scale: 1
});
})
});
});
// Preload images and fonts and remove loader
Promise.all([
preloadImages('.intro__image, .content__img-inner'),
preloadFonts('ctp6pec')
]).then(() => document.body.classList.remove('loading'));js/demo3/overlay.js
// Cell class definition
class Cell {
DOM = {
el: null
};
row;
column;
constructor(row, column) {
this.DOM.el = document.createElement('div');
gsap.set(this.DOM.el, {willChange: 'opacity, transform'});
this.row = row;
this.column = column;
}
}
// Overlay class definition
export class Overlay {
DOM = {
el: null
};
// cells array
cells = [];
// options
options = {
// Number of cell rows
rows: 10,
// Number of cell columns
columns: 10,
};
// Constructor accepts a DOM element representing the overlay
constructor(DOM_el, customOptions) {
this.DOM.el = DOM_el;
// Merge default options with provided options
this.options = Object.assign({}, this.options, customOptions);
// Set the value of the CSS variable
this.DOM.el.style.setProperty('--columns', this.options.columns);
// Create an array of all cells
this.cells = new Array(this.options.rows);
for (let i = 0; i < this.options.rows; ++i) {
this.cells[i] = new Array(this.options.columns);
}
// Fill the array with values
for (let i = 0; i < this.options.rows; ++i) {
for (let j = 0; j < this.options.columns; ++j) {
const cell = new Cell(i,j);
this.cells[i][j] = cell;
this.DOM.el.appendChild(cell.DOM.el);
}
}
}
// Show the overlay and animate the cells in
show(customConfig = {}) {
return new Promise((resolve) => {
// Default animation configuration
const defaultConfig = {
// Specify the cell's transform origin
transformOrigin: '50% 50%',
// Duration for each cell animation
duration: 0.5,
// Ease for each cell animation
ease: 'none',
// Stagger object
stagger: {
grid: [this.options.rows, this.options.columns],
from: 0,
each: 0.05,
ease: 'none'
}
};
const config = Object.assign({}, defaultConfig, customConfig);
gsap.set(this.DOM.el, {opacity: 1});
gsap.fromTo(this.cells.flat().map(cell => cell.DOM.el), {
scale: 0,
opacity: 0,
transformOrigin: config.transformOrigin
}, {
duration: config.duration,
ease: config.ease,
scale: 1.01,
opacity: 1,
stagger: config.stagger,
onComplete: resolve
});
});
}
// Hide the overlay and animate the cells out
hide(customConfig = {}) {
return new Promise((resolve) => {
// Default animation configuration
const defaultConfig = {
transformOrigin: '50% 50%',
// Duration for each cell animation
duration: 0.5,
// Ease for each cell animation
ease: 'none',
// Stagger object
stagger: {
grid: [this.options.rows, this.options.columns],
from: 0,
each: 0.05,
ease: 'none'
}
};
const config = Object.assign({}, defaultConfig, customConfig);
gsap.fromTo(this.cells.flat().map(cell => cell.DOM.el), {
transformOrigin: config.transformOrigin
}, {
duration: config.duration,
ease: config.ease,
scale: 0,
opacity: 0,
stagger: config.stagger,
onComplete: resolve
});
});
}
}js/demo4/index.js
import { preloadImages, preloadFonts } from '../utils.js';
import { Overlay } from './overlay.js';
// Select the overlay element from the DOM
const overlayEl = document.querySelector('.overlay');
// Intro
const intro = document.querySelector('.intro');
// Intro images
const images = [...intro.querySelectorAll('.intro__image')];
// Content elements
const contentElements = [...document.querySelectorAll('.content-wrap > .content')];
// Instantiate an Overlay object using the selected overlay element
const overlay = new Overlay(overlayEl, {
rows: 9,
columns: 17
});
let isAnimating = false;
// Attach click event listeners to each intro image
images.forEach((image, position) => {
// Show the overlay when an intro image is clicked
image.addEventListener('click', () => {
if ( isAnimating ) return;
isAnimating = true;
// Animate intro section
gsap.to(intro, {
duration: 0.7,
ease: 'power2.in',
scale: 0.75,
opacity: 0
});
overlay.show({
// Duration for each cell animation
duration: 0.25,
// Ease for each cell animation
ease: 'power1.in',
// Stagger object
stagger: {
grid: [overlay.options.rows, overlay.options.columns],
from: 'edges',
each: 0.025
}
})
.then(() => {
// show content
intro.classList.add('intro--closed');
contentElements[position].classList.add('content--open');
// Now hide the overlay
overlay.hide({
// Duration for each cell animation
duration: 0.25,
// Ease for each cell animation
ease: 'power1',
// Stagger object
stagger: {
grid: [overlay.options.rows, overlay.options.columns],
from: 'center',
each: 0.025
}
}).then(() => isAnimating = false);
// Animate content image
gsap.fromTo(contentElements[position].querySelector('.content__img'), {
scale: 0.5,
opacity: 0
}, {
duration: 0.8,
ease: 'power4',
scale: 1,
opacity: 1
});
})
});
});
// Attach click event listeners to each content back button
contentElements.forEach((content) => {
content.querySelector('.content__back').addEventListener('click', () => {
if ( isAnimating ) return;
isAnimating = true;
// Animate content image
gsap.to(content.querySelector('.content__img'), {
duration: 0.7,
ease: 'power2.in',
scale: 0.75,
opacity: 0
});
overlay.show({
// Duration for each cell animation
duration: 0.25,
// Ease for each cell animation
ease: 'power1.in',
// Stagger object
stagger: {
grid: [overlay.options.rows, overlay.options.columns],
from: 'edges',
each: 0.025
}
})
.then(() => {
// hide content here
intro.classList.remove('intro--closed');
content.classList.remove('content--open');
// Now hide the overlay
overlay.hide({
// Duration for each cell animation
duration: 0.25,
// Ease for each cell animation
ease: 'power1',
// Stagger object
stagger: {
grid: [overlay.options.rows, overlay.options.columns],
from: 'center',
each: 0.025
}
}).then(() => isAnimating = false);
// Animate intro section
gsap.to(intro, {
duration: 0.8,
ease: 'power4',
scale: 1,
opacity: 1
});
})
});
});
// Preload images and fonts and remove loader
Promise.all([
preloadImages('.intro__image, .content__img-inner'),
preloadFonts('ctp6pec')
]).then(() => document.body.classList.remove('loading'));js/demo4/overlay.js
// Cell class definition
class Cell {
DOM = {
el: null
};
row;
column;
constructor(row, column) {
this.DOM.el = document.createElement('div');
gsap.set(this.DOM.el, {willChange: 'opacity, transform'});
this.row = row;
this.column = column;
}
}
// Overlay class definition
export class Overlay {
DOM = {
el: null
};
// cells array
cells = [];
// options
options = {
// Number of cell rows
rows: 10,
// Number of cell columns
columns: 10,
};
// Constructor accepts a DOM element representing the overlay
constructor(DOM_el, customOptions) {
this.DOM.el = DOM_el;
// Merge default options with provided options
this.options = Object.assign({}, this.options, customOptions);
// Set the value of the CSS variable
this.DOM.el.style.setProperty('--columns', this.options.columns);
// Create an array of all cells
this.cells = new Array(this.options.rows);
for (let i = 0; i < this.options.rows; ++i) {
this.cells[i] = new Array(this.options.columns);
}
// Fill the array with values
for (let i = 0; i < this.options.rows; ++i) {
for (let j = 0; j < this.options.columns; ++j) {
const cell = new Cell(i,j);
this.cells[i][j] = cell;
this.DOM.el.appendChild(cell.DOM.el);
}
}
}
// Show the overlay and animate the cells in
show(customConfig = {}) {
return new Promise((resolve) => {
// Default animation configuration
const defaultConfig = {
// Specify the cell's transform origin
transformOrigin: '50% 50%',
// Duration for each cell animation
duration: 0.5,
// Ease for each cell animation
ease: 'none',
// Stagger object
stagger: {
grid: [this.options.rows, this.options.columns],
from: 0,
each: 0.05,
ease: 'none'
}
};
const config = Object.assign({}, defaultConfig, customConfig);
gsap.set(this.DOM.el, {opacity: 1});
gsap.fromTo(this.cells.flat().map(cell => cell.DOM.el), {
scale: 0,
opacity: 0,
transformOrigin: config.transformOrigin
}, {
duration: config.duration,
ease: config.ease,
scale: 1.03,
opacity: 1,
stagger: config.stagger,
onComplete: resolve
});
});
}
// Hide the overlay and animate the cells out
hide(customConfig = {}) {
return new Promise((resolve) => {
// Default animation configuration
const defaultConfig = {
transformOrigin: '50% 50%',
// Duration for each cell animation
duration: 0.5,
// Ease for each cell animation
ease: 'none',
// Stagger object
stagger: {
grid: [this.options.rows, this.options.columns],
from: 0,
each: 0.05,
ease: 'none'
}
};
const config = Object.assign({}, defaultConfig, customConfig);
gsap.fromTo(this.cells.flat().map(cell => cell.DOM.el), {
transformOrigin: config.transformOrigin
}, {
duration: config.duration,
ease: config.ease,
scale: 0,
opacity: 0,
stagger: config.stagger,
onComplete: resolve
});
});
}
}js/demo5/index.js
import { preloadImages, preloadFonts } from '../utils.js';
import { Overlay } from './overlay.js';
// Select the overlay element from the DOM
const overlayEl = document.querySelector('.overlay');
// Intro
const intro = document.querySelector('.intro');
// Intro images
const images = [...intro.querySelectorAll('.intro__image')];
// Content elements
const contentElements = [...document.querySelectorAll('.content-wrap > .content')];
// Instantiate an Overlay object using the selected overlay element
const overlay = new Overlay(overlayEl, {
rows: 20,
columns: 4
});
let isAnimating = false;
// Attach click event listeners to each intro image
images.forEach((image, position) => {
// Show the overlay when an intro image is clicked
image.addEventListener('click', () => {
if ( isAnimating ) return;
isAnimating = true;
// Animate intro section
gsap.to(intro, {
duration: 0.7,
ease: 'power2.in',
startAt: {filter: 'brightness(100%) saturate(100%)'},
filter: 'brightness(800%) saturate(600%)',
});
overlay.show({
// Specify the cell's transform origin
transformOrigin: '50% 100%',
// Duration for each cell animation
duration: 0.3,
// Ease for each cell animation
ease: 'power1.in',
// Stagger object
stagger: {
grid: [overlay.options.rows, overlay.options.columns],
from: 'start',
each: 0.02
}
})
.then(() => {
// show content
intro.classList.add('intro--closed');
contentElements[position].classList.add('content--open');
// Now hide the overlay
overlay.hide({
// Specify the cell's transform origin
transformOrigin: '50% 0%',
// Duration for each cell animation
duration: 0.3,
// Ease for each cell animation
ease: 'power3',
// Stagger object
stagger: {
grid: [overlay.options.rows, overlay.options.columns],
from: 'start',
each: 0.02
}
}).then(() => isAnimating = false);
// Animate content image
gsap.fromTo(contentElements[position].querySelector('.content__img'), {
filter: 'brightness(800%) saturate(600%)'
}, {
duration: 0.8,
ease: 'power4',
filter: 'brightness(100%) saturate(100%)'
});
})
});
});
// Attach click event listeners to each content back button
contentElements.forEach((content) => {
content.querySelector('.content__back').addEventListener('click', () => {
if ( isAnimating ) return;
isAnimating = true;
// Animate content image
gsap.to(content.querySelector('.content__img'), {
duration: 0.7,
ease: 'power2.in',
filter: 'brightness(800%) saturate(600%)',
});
overlay.show({
// Specify the cell's transform origin
transformOrigin: '50% 0%',
// Duration for each cell animation
duration: 0.3,
// Ease for each cell animation
ease: 'power1.in',
// Stagger object
stagger: {
grid: [overlay.options.rows, overlay.options.columns],
from: 'end',
each: 0.02
}
})
.then(() => {
// hide content here
intro.classList.remove('intro--closed');
content.classList.remove('content--open');
// Now hide the overlay
overlay.hide({
// Specify the cell's transform origin
transformOrigin: '50% 100%',
// Duration for each cell animation
duration: 0.3,
// Ease for each cell animation
ease: 'power3',
// Stagger object
stagger: {
grid: [overlay.options.rows, overlay.options.columns],
from: 'end',
each: 0.02
}
}).then(() => isAnimating = false);
// Animate intro section
gsap.to(intro, {
duration: 0.8,
ease: 'power4',
filter: 'brightness(100%) saturate(100%)'
});
})
});
});
// Preload images and fonts and remove loader
Promise.all([
preloadImages('.intro__image, .content__img-inner'),
preloadFonts('ctp6pec')
]).then(() => document.body.classList.remove('loading'));js/demo5/overlay.js
// Cell class definition
class Cell {
DOM = {
el: null
};
row;
column;
constructor(row, column) {
this.DOM.el = document.createElement('div');
gsap.set(this.DOM.el, {willChange: 'opacity, transform'});
this.row = row;
this.column = column;
}
}
// Overlay class definition
export class Overlay {
DOM = {
el: null
};
// cells array
cells = [];
// options
options = {
// Number of cell rows
rows: 10,
// Number of cell columns
columns: 10,
};
// Constructor accepts a DOM element representing the overlay
constructor(DOM_el, customOptions) {
this.DOM.el = DOM_el;
// Merge default options with provided options
this.options = Object.assign({}, this.options, customOptions);
// Set the value of the CSS variable
this.DOM.el.style.setProperty('--columns', this.options.columns);
// Create an array of all cells
this.cells = new Array(this.options.rows);
for (let i = 0; i < this.options.rows; ++i) {
this.cells[i] = new Array(this.options.columns);
}
// Fill the array with values
for (let i = 0; i < this.options.rows; ++i) {
for (let j = 0; j < this.options.columns; ++j) {
const cell = new Cell(i,j);
this.cells[i][j] = cell;
this.DOM.el.appendChild(cell.DOM.el);
}
}
}
// Show the overlay and animate the cells in
show(customConfig = {}) {
return new Promise((resolve) => {
// Default animation configuration
const defaultConfig = {
// Specify the cell's transform origin
transformOrigin: '50% 50%',
// Duration for each cell animation
duration: 0.5,
// Ease for each cell animation
ease: 'none',
// Stagger object
stagger: {
grid: [this.options.rows, this.options.columns],
from: 0,
each: 0.05,
ease: 'none'
}
};
const config = Object.assign({}, defaultConfig, customConfig);
gsap.set(this.DOM.el, {opacity: 1});
gsap.fromTo(this.cells.flat().map(cell => cell.DOM.el), {
scaleY: 0,
opacity: 0,
transformOrigin: config.transformOrigin
}, {
duration: config.duration,
ease: config.ease,
scaleY: 1.03,
opacity: 1,
stagger: config.stagger,
onComplete: resolve
});
});
}
// Hide the overlay and animate the cells out
hide(customConfig = {}) {
return new Promise((resolve) => {
// Default animation configuration
const defaultConfig = {
transformOrigin: '50% 50%',
// Duration for each cell animation
duration: 0.5,
// Ease for each cell animation
ease: 'none',
// Stagger object
stagger: {
grid: [this.options.rows, this.options.columns],
from: 0,
each: 0.05,
ease: 'none'
}
};
const config = Object.assign({}, defaultConfig, customConfig);
gsap.fromTo(this.cells.flat().map(cell => cell.DOM.el), {
transformOrigin: config.transformOrigin
}, {
duration: config.duration,
ease: config.ease,
scaleY: 0,
opacity: 0,
stagger: config.stagger,
onComplete: resolve
});
});
}
}js/demo6/index.js
import { preloadImages, preloadFonts } from '../utils.js';
import { Overlay } from './overlay.js';
// Select the overlay element from the DOM
const overlayEl = document.querySelector('.overlay');
// Intro
const intro = document.querySelector('.intro');
// Intro images
const images = [...intro.querySelectorAll('.intro__image')];
// Content elements
const contentElements = [...document.querySelectorAll('.content-wrap > .content')];
// Instantiate an Overlay object using the selected overlay element
const overlay = new Overlay(overlayEl, {
rows: 6,
columns: 11
});
let isAnimating = false;
// Attach click event listeners to each intro image
images.forEach((image, position) => {
// Show the overlay when an intro image is clicked
image.addEventListener('click', () => {
if ( isAnimating ) return;
isAnimating = true;
// Animate intro section
gsap.to(intro, {
duration: 1.1,
ease: 'power3.inOut',
xPercent: 5,
opacity: 0
});
overlay.show({
// Specify the cell's transform origin
transformOrigin: '0% 50%',
// Duration for each cell animation
duration: 0.3,
// Ease for each cell animation
ease: 'power4.in',
// Stagger object
stagger: {
grid: [overlay.options.rows, overlay.options.columns],
from: 'start',
each: 0.04
}
})
.then(() => {
// show content
intro.classList.add('intro--closed');
contentElements[position].classList.add('content--open');
// Now hide the overlay
overlay.hide({
// Specify the cell's transform origin
transformOrigin: '100% 50%',
// Duration for each cell animation
duration: 0.5,
// Ease for each cell animation
ease: 'power4',
// Stagger function
stagger: {
grid: [overlay.options.rows, overlay.options.columns],
from: 'start',
each: 0.04
}
}).then(() => isAnimating = false);
// Animate content image
gsap.fromTo(contentElements[position].querySelector('.content__img'), {
xPercent: -10,
opacity: 0
}, {
duration: 0.9,
ease: 'power4',
xPercent: 0,
opacity: 1
});
})
});
});
// Attach click event listeners to each content back button
contentElements.forEach((content, position) => {
content.querySelector('.content__back').addEventListener('click', () => {
if ( isAnimating ) return;
isAnimating = true;
// Animate content image
gsap.to(content.querySelector('.content__img'), {
duration: 1.1,
ease: 'power3.inOut',
xPercent: -5,
opacity: 0
});
overlay.show({
// Specify the cell's transform origin
transformOrigin: '100% 50%',
// Duration for each cell animation
duration: 0.3,
// Ease for each cell animation
ease: 'power4.in',
// Stagger function
stagger: {
grid: [overlay.options.rows, overlay.options.columns],
from: 'end',
each: 0.04
}
})
.then(() => {
// hide content
intro.classList.remove('intro--closed');
content.classList.remove('content--open');
// Now hide the overlay
overlay.hide({
// Specify the cell's transform origin
transformOrigin: '0% 50%',
// Duration for each cell animation
duration: 0.5,
// Ease for each cell animation
ease: 'power4',
// Stagger function
stagger: {
grid: [overlay.options.rows, overlay.options.columns],
from: 'end',
each: 0.04
}
}).then(() => isAnimating = false);
// Animate intro section
gsap.fromTo(intro, {
xPercent: 10,
}, {
duration: 0.9,
ease: 'power4',
xPercent: 0,
opacity: 1
});
})
});
});
// Preload images and fonts and remove loader
Promise.all([
preloadImages('.intro__image, .content__img-inner'),
preloadFonts('ctp6pec')
]).then(() => document.body.classList.remove('loading'));js/demo6/overlay.js
// Cell class definition
class Cell {
DOM = {
el: null
};
row;
column;
constructor(row, column) {
this.DOM.el = document.createElement('div');
gsap.set(this.DOM.el, {willChange: 'opacity, transform'});
this.row = row;
this.column = column;
}
}
// Overlay class definition
export class Overlay {
DOM = {
el: null
};
// cells array
cells = [];
// options
options = {
// Number of cell rows
rows: 10,
// Number of cell columns
columns: 10,
};
// Constructor accepts a DOM element representing the overlay
constructor(DOM_el, customOptions) {
this.DOM.el = DOM_el;
// Merge default options with provided options
this.options = Object.assign({}, this.options, customOptions);
// Set the value of the CSS variable
this.DOM.el.style.setProperty('--columns', this.options.columns);
// Create an array of all cells
this.cells = new Array(this.options.rows);
for (let i = 0; i < this.options.rows; ++i) {
this.cells[i] = new Array(this.options.columns);
}
// Fill the array with values
for (let i = 0; i < this.options.rows; ++i) {
for (let j = 0; j < this.options.columns; ++j) {
const cell = new Cell(i,j);
this.cells[i][j] = cell;
this.DOM.el.appendChild(cell.DOM.el);
}
}
}
// Show the overlay and animate the cells in
show(customConfig = {}) {
return new Promise((resolve) => {
// Default animation configuration
const defaultConfig = {
// Specify the cell's transform origin
transformOrigin: '50% 50%',
// Duration for each cell animation
duration: 0.5,
// Ease for each cell animation
ease: 'none',
// Stagger object
stagger: {
grid: [this.options.rows, this.options.columns],
from: 0,
each: 0.05,
ease: 'none'
}
};
const config = Object.assign({}, defaultConfig, customConfig);
gsap.set(this.DOM.el, {opacity: 1});
gsap.fromTo(this.cells.flat().map(cell => cell.DOM.el), {
scaleX: 0,
//opacity: 0,
transformOrigin: config.transformOrigin
}, {
duration: config.duration,
ease: config.ease,
scale: 1.01,
//opacity: 1,
stagger: config.stagger,
onComplete: resolve
});
});
}
// Hide the overlay and animate the cells out
hide(customConfig = {}) {
return new Promise((resolve) => {
// Default animation configuration
const defaultConfig = {
transformOrigin: '50% 50%',
// Duration for each cell animation
duration: 0.5,
// Ease for each cell animation
ease: 'none',
// Stagger object
stagger: {
grid: [this.options.rows, this.options.columns],
from: 0,
each: 0.05,
ease: 'none'
}
};
const config = Object.assign({}, defaultConfig, customConfig);
gsap.fromTo(this.cells.flat().map(cell => cell.DOM.el), {
transformOrigin: config.transformOrigin
}, {
duration: config.duration,
ease: config.ease,
scaleX: 0,
//opacity: 0,
stagger: config.stagger,
onComplete: resolve
});
});
}
}js/utils.js
/**
* Preload fonts
* @param {String} id
*/
const preloadFonts = id => {
return new Promise((resolve) => {
WebFont.load({
typekit: {
id: id
},
active: resolve
});
});
};
/**
* 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 {
preloadFonts,
preloadImages
};Media credits and license evidence실행 안내·자료
README.md
## Credits
- Images from [Pexels](https://www.pexels.com/)
## License
[MIT](LICENSE)
Made with :blue_heart: by [Codrops](http://www.codrops.com)
LICENSE실행 안내·자료
MIT License
Copyright (c) 2009 - 2023 [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실행 안내·자료
https://cdn.jsdelivr.net/npm/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.
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
BEHIND THE EXAMPLE
이 장면을 만드는 원리
픽셀 오버레이의 Promise는 정상 종료에 연결
반복 입력에서 현재 의도와 전환의 종료·취소 책임을 명시합니다.
- 이 예제에서는
- Overlay.show와 hide는 셀 tween의 onComplete에서 Promise를 resolve합니다. 화면 교체가 이 Promise를 기다린다면 취소·제거 때도 완료 정책이 필요합니다.
코드와 함께 확인하기
코드에서 찾기
showoverlay.js여러 셀의 scale·opacity 전환 종료가 Promise의 유일한 resolve 지점입니다.
직접 해보기
픽셀 오버레이가 덮이는 중 전환을 취소하거나 표면을 제거합니다.
살펴볼 변화기다리는 탐색이 영원히 멈추지 않고 오버레이가 입력을 가로막은 채 남지 않는지 확인해야 합니다.