Codrops 원본
Large Image to Content Page Transition
섹션 · MIT
갤러리 안에서는 화면을 벗어나거나 움직임을 멈추면 예제도 닫힙니다. 다시 재생할 때는 처음부터 시작해요.
SOURCE FILES
원본 코드 읽기
수집한 원본 소스와 실행 안내를 함께 제공합니다.
src/css/base.css
*,
*::after,
*::before {
box-sizing: border-box;
}
:root {
font-size: 18px;
--color-text: #fff;
--color-text-alt: #767474;
--color-bg: #0b0a0a;
--color-link: #aaa;
--color-link-hover: #fff;
}
html {
scroll-behavior: initial;
}
html, body{
width: 100%;
min-height: 100%;
}
body {
margin: 0;
color: var(--color-text);
background-color: var(--color-bg);
font-family: botanika-mono-web, monospace;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.content-open {
overflow: hidden;
height: 100vh;
}
.oh {
position: relative;
overflow: hidden
}
.oh__inner {
will-change: transform;
display: inline-block;
}
.line {
transform-origin: 0;
white-space: nowrap;
will-change: transform;
}
/* Page Loader */
.js .loading::before,
.js .loading::after {
content: '';
position: fixed;
z-index: 1000;
}
.js .loading::before {
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--color-bg);
}
.js .loading::after {
top: 50%;
left: 50%;
width: 60px;
height: 60px;
margin: -30px 0 0 -30px;
border-radius: 50%;
opacity: 0.4;
background: var(--color-link);
animation: loaderAnim 0.7s linear infinite alternate forwards;
}
@keyframes loaderAnim {
to {
opacity: 1;
transform: scale3d(0.5,0.5,1);
}
}
a {
text-decoration: none;
color: var(--color-link);
outline: none;
cursor: pointer;
}
a:hover {
color: var(--color-link-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;
}
.unbutton {
background: none;
border: 0;
padding: 0;
margin: 0;
font: inherit;
fill: currentColor;
cursor: pointer;
color: inherit;
display: flex;
align-items: center;
}
.unbutton:focus {
outline: none;
}
.unbutton span:first-child {
margin-right: 1rem;
}
.unbutton span:last-child {
margin-left: 1rem;
}
main {
position: relative;
display: grid;
grid-template-areas: 'frame' 'page';
}
.frame {
grid-area: frame;
padding: 1.5rem 2rem;
z-index: 1000;
background: var(--color-bg);
display: grid;
grid-template-columns: auto auto;
grid-template-rows: auto;
grid-template-areas: 'title' 'prev' 'sponsor';
align-content: space-between;
text-transform: uppercase;
grid-row-gap: 5vh;
}
.frame__title {
grid-area: title;
display: flex;
}
.frame__title-main {
font-size: 1rem;
margin: 0;
font-weight: normal;
line-height: 1;
align-self: center;
text-align: right;
}
.frame__title-back {
position: relative;
display: flex;
align-items: flex-end;
margin-bottom: 0.15rem;
}
.frame__title-back span {
display: none;
}
.frame__title-back svg {
fill: currentColor;
}
.frame__prev {
grid-area: prev;
}
.preview-wrap {
grid-area: page;
padding: 0 2rem 3rem;
position: relative;
z-index: 100;
}
.content-open .preview-wrap {
pointer-events: none;
}
.preview {
min-height: 400px;
padding: 3rem 0 0;
margin: 0 auto;
display: grid;
grid-template-columns: 100%;
grid-template-rows: 100%;
will-change: transform;
}
.preview__img-wrap {
grid-area: 1 / 1 / -1 / -1;
cursor: pointer;
}
.preview__img {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
.preview__img-inner {
width: 100%;
height: 100%;
background-size: 150%;
background-position: 0% 0%;
background-repeat: no-repeat;
}
.content__meta {
margin-bottom: 2rem;
color: var(--color-text-alt);
}
.preview__title {
text-align: center;
align-self: center;
justify-self: center;
grid-area: 1 / 1 / -1 / -1;
position: relative;
transform: translate3d(0,50%,0);
pointer-events: none;
}
.preview__title-main {
line-height: 1.2;
margin: 0;
font-weight: normal;
font-size: clamp(2rem,10vw,8rem);
font-family: scotch-display, sans-serif;
font-weight: 300;
}
.preview__title-main > span {
display: block;
}
.preview__title-main > span:last-child {
display: block;
padding: 0 1rem;
transform: translateY(-33%);
font-family: scotch-display, sans-serif;
font-weight: 500;
font-style: italic;
}
.preview__desc {
margin: 0 auto;
max-width: 400px;
text-transform: uppercase;
line-height: 1.2;
}
.content-wrap {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
grid-area: page;
height: 100vh;
overflow: hidden;
display: grid;
grid-template-areas:
'back back'
'content content';
grid-template-rows: auto 1fr;
pointer-events: none;
padding: 2rem;
}
.action {
visibility: hidden;
pointer-events: none;
opacity: 0;
}
.content-open .action {
visibility: visible;
pointer-events: auto;
}
.action svg {
width: 2em;
height: 2em;
}
.action--back {
justify-self: start;
grid-area: back;
padding: 1rem 0;
}
.action span {
text-transform: uppercase;
}
.content {
grid-area: content;
grid-row: 2 / span 2;
position: absolute;
top: 0;
left: 0;
height: 100%;
pointer-events: none;
opacity: 0;
display: grid;
grid-gap: 2vw;
grid-template-columns: 100%;
grid-template-areas:
'img'
'thumbs'
'text';
grid-template-rows: 20vh min-content auto;
}
.content--current {
position: relative;
pointer-events: auto;
opacity: 1;
}
.content__group {
grid-area: text;
}
.content__title {
font-family: scotch-display, sans-serif;
font-weight: 400;
font-size: clamp(3rem,6.5vw,5.5rem);
}
.content__title span {
display: block;
}
.content__title > span:last-child {
transform: translateY(-25%);
font-family: scotch-display, sans-serif;
font-weight: 500;
font-style: italic;
padding: 0 0 0 0.75rem;
}
.content .preview__img {
grid-area: img;
}
.content__thumbs {
grid-area: thumbs;
display: grid;
grid-auto-columns: auto;
grid-auto-flow: column;
grid-gap: 2vw;
justify-content: start;
}
.content__thumbs-item {
width: 50px;
aspect-ratio: 1.5;
}
.content__thumbs-item:hover {
cursor: not-allowed;
}
.hidden {
opacity: 0;
pointer-events: none;
}
@media screen and (min-width: 53em) {
main {
grid-template-areas: 'frame page';
grid-template-columns: auto 1fr;
}
.frame {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
height: 100vh;
opacity: 0.5;
padding: 2rem;
}
.frame__title,
.frame__prev,
#cdawrap {
justify-self: start;
-webkit-writing-mode: vertical-rl;
writing-mode: vertical-rl;
transform: rotate(180deg);
}
body #cdawrap {
justify-self: start;
}
.frame__prev {
margin: 1rem 0 0;
}
.frame__title-back {
transform: scale3d(1,-1,1);
}
.preview {
min-height: 90vh;
}
.preview__desc {
margin: -2.5rem auto 0;
}
.content {
grid-template-columns: 60% 1fr;
grid-template-areas:
'... ...'
'img text'
'thumbs text'
'... ...';
grid-template-rows: 2rem 1fr auto 1rem;
}
.content__thumbs-item {
width: 100px;
}
.content__text {
max-width: 400px;
}
}
src/index.html
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Image to Content Page Transition | Codrops</title>
<meta name="description" content="A simple page transition where a large image animates to a content area." />
<meta name="keywords" content="gsap, flip, javascript, animation, page transition" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="https://use.typekit.net/ckf7ljy.css">
<link rel="stylesheet" type="text/css" href="css/base.css" />
<script>document.documentElement.className="js";var supportsCssVars=function(){var e,t=document.createElement("style");return t.innerHTML="root: { --tmp-var: bold; }",document.head.appendChild(t),e=!!(window.CSS&&window.CSS.supports&&window.CSS.supports("font-weight","var(--tmp-var)")),t.parentNode.removeChild(t),e};supportsCssVars()||alert("Please view this demo in a modern browser that supports CSS Variables.");</script>
</head>
<body class="loading">
<main>
<div class="frame">
<div class="frame__title">
<h1 class="frame__title-main">Image to Content Page Transition</h1>
<a aria-label="Back to the article" class="frame__title-back" href="https://tympanus.net/codrops/?p=">
<span class="oh__inner">Back to the article</span>
<svg width="18px" height="18px" viewBox="0 0 24 24"><path vector-effect="non-scaling-stroke" d="M18.25 15.5a.75.75 0 00.75-.75v-9a.75.75 0 00-.75-.75h-9a.75.75 0 000 1.5h7.19L6.22 16.72a.75.75 0 101.06 1.06L17.5 7.56v7.19c0 .414.336.75.75.75z"></path>
</svg>
</a>
</div>
<a class="frame__prev" href="http://tympanus.net/Development/GridLayoutAnimation/">Previous demo</a>
</div>
<section class="preview-wrap">
<div class="preview">
<div class="preview__img-wrap"><div class="preview__img"><div class="preview__img-inner" style="background-image:url(img/1.jpg)"></div></div></div>
<div class="preview__title">
<h2 class="preview__title-main">
<span class="oh"><span class="oh__inner">Andesite</span></span>
<span class="oh"><span class="oh__inner">aphanitic</span></span>
</h2>
<p class="preview__desc">A volcanic rock of intermediate composition, between silica-poor basalt and silica-rich rhyolite.</p>
</div>
</div>
<div class="preview">
<div class="preview__img-wrap"><div class="preview__img"><div class="preview__img-inner" style="background-image:url(img/2.jpg)"></div></div></div>
<div class="preview__title">
<h2 class="preview__title-main">
<span class="oh"><span class="oh__inner">Batholith</span></span>
<span class="oh"><span class="oh__inner">plutonic</span></span>
</h2>
<p class="preview__desc">A large mass of intrusive igneous rock made mostly of felsic or intermediate rock types.</p>
</div>
</div>
<div class="preview">
<div class="preview__img-wrap"><div class="preview__img"><div class="preview__img-inner" style="background-image:url(img/3.jpg)"></div></div></div>
<div class="preview__title">
<h2 class="preview__title-main">
<span class="oh"><span class="oh__inner">Pumicite</span></span>
<span class="oh"><span class="oh__inner">vesicular</span></span>
</h2>
<p class="preview__desc">a volcanic rock that consists of highly vesicular rough-textured volcanic glass.</p>
</div>
</div>
<div class="preview">
<div class="preview__img-wrap"><div class="preview__img"><div class="preview__img-inner" style="background-image:url(img/4.jpg)"></div></div></div>
<div class="preview__title">
<h2 class="preview__title-main">
<span class="oh"><span class="oh__inner">Latite</span></span>
<span class="oh"><span class="oh__inner">aphyric</span></span>
</h2>
<p class="preview__desc">An igneous, volcanic rock, with aphanitic-aphyric to aphyric-porphyritic texture.</p>
</div>
</div>
<div class="preview">
<div class="preview__img-wrap"><div class="preview__img"><div class="preview__img-inner" style="background-image:url(img/5.jpg)"></div></div></div>
<div class="preview__title">
<h2 class="preview__title-main">
<span class="oh"><span class="oh__inner">Rhomb</span></span>
<span class="oh"><span class="oh__inner">porphyry</span></span>
</h2>
<p class="preview__desc">A volcanic rock with gray-white large porphyritic rhombus-shaped phenocrysts of feldspar.</p>
</div>
</div>
<div class="preview">
<div class="preview__img-wrap"><div class="preview__img"><div class="preview__img-inner" style="background-image:url(img/6.jpg)"></div></div></div>
<div class="preview__title">
<h2 class="preview__title-main">
<span class="oh"><span class="oh__inner">Bytownite</span></span>
<span class="oh"><span class="oh__inner">triclinic</span></span>
</h2>
<p class="preview__desc">a calcium rich member of the plagioclase solid solution series of feldspar minerals.</p>
</div>
</div>
<div class="preview">
<div class="preview__img-wrap"><div class="preview__img"><div class="preview__img-inner" style="background-image:url(img/7.jpg)"></div></div></div>
<div class="preview__title">
<h2 class="preview__title-main">
<span class="oh"><span class="oh__inner">Oligoclase</span></span>
<span class="oh"><span class="oh__inner">plagioclase</span></span>
</h2>
<p class="preview__desc">A rock-forming mineral belonging to the plagioclase feldspars.</p>
</div>
</div>
<div class="preview">
<div class="preview__img-wrap"><div class="preview__img"><div class="preview__img-inner" style="background-image:url(img/8.jpg)"></div></div></div>
<div class="preview__title">
<h2 class="preview__title-main">
<span class="oh"><span class="oh__inner">Mordenite</span></span>
<span class="oh"><span class="oh__inner">fibrous</span></span>
</h2>
<p class="preview__desc">An abundant zeolite mineral that is used commercially.</p>
</div>
</div>
<div class="preview">
<div class="preview__img-wrap"><div class="preview__img"><div class="preview__img-inner" style="background-image:url(img/9.jpg)"></div></div></div>
<div class="preview__title">
<h2 class="preview__title-main">
<span class="oh"><span class="oh__inner">Stishovite</span></span>
<span class="oh"><span class="oh__inner">tetragonal</span></span>
</h2>
<p class="preview__desc">An extremely hard, dense tetragonal form of silicon dioxide.</p>
</div>
</div>
</section>
<section class="content-wrap">
<div class="content">
<div class="content__group">
<div class="content__title">
<span class="oh"><span class="oh__inner">Andesite</span></span>
<span class="oh"><span class="oh__inner">aphanitic</span></span>
</div>
<div class="content__meta oh"><span class="oh__inner">By James Maurice Rojo</span></div>
<div class="content__text">
Andesite (/ˈændəzaɪt/) is a volcanic rock of intermediate composition. In a general sense, it is the intermediate type between silica-poor basalt and silica-rich rhyolite.
</div>
</div>
<div class="content__thumbs">
<div class="content__thumbs-item" style="background-image:url(img/1_1.jpg)"></div>
<div class="content__thumbs-item" style="background-image:url(img/1_2.jpg)"></div>
<div class="content__thumbs-item" style="background-image:url(img/1_3.jpg)"></div>
<div class="content__thumbs-item" style="background-image:url(img/1_4.jpg)"></div>
</div>
</div>
<div class="content">
<div class="content__group">
<div class="content__title">
<span class="oh"><span class="oh__inner">Batholith</span></span>
<span class="oh"><span class="oh__inner">plutonic</span></span>
</div>
<div class="content__meta oh"><span class="oh__inner">By Anna Walters</span></div>
<div class="content__text">
A batholith (from Ancient Greek bathos 'depth', and lithos 'rock') is a large mass of intrusive igneous rock (also called plutonic rock), larger than 100 km2 (40 sq mi) in area, that forms from cooled magma deep in Earth's crust.
</div>
</div>
<div class="content__thumbs">
<div class="content__thumbs-item" style="background-image:url(img/2_1.jpg)"></div>
<div class="content__thumbs-item" style="background-image:url(img/2_2.jpg)"></div>
<div class="content__thumbs-item" style="background-image:url(img/2_3.jpg)"></div>
<div class="content__thumbs-item" style="background-image:url(img/2_4.jpg)"></div>
</div>
</div>
<div class="content">
<div class="content__group">
<div class="content__title">
<span class="oh"><span class="oh__inner">Pumicite</span></span>
<span class="oh"><span class="oh__inner">vesicular</span></span>
</div>
<div class="content__meta oh"><span class="oh__inner">By Walter Green</span></div>
<div class="content__text">
Pumice ( /ˈpʌmɪs/), called pumicite in its powdered or dust form, is a volcanic rock that consists of highly vesicular rough-textured volcanic glass, which may or may not contain crystals. It is typically light-colored.
</div>
</div>
<div class="content__thumbs">
<div class="content__thumbs-item" style="background-image:url(img/3_1.jpg)"></div>
<div class="content__thumbs-item" style="background-image:url(img/3_2.jpg)"></div>
<div class="content__thumbs-item" style="background-image:url(img/3_3.jpg)"></div>
<div class="content__thumbs-item" style="background-image:url(img/3_4.jpg)"></div>
</div>
</div>
<div class="content">
<div class="content__group">
<div class="content__title">
<span class="oh"><span class="oh__inner">Latite</span></span>
<span class="oh"><span class="oh__inner">aphyric</span></span>
</div>
<div class="content__meta oh"><span class="oh__inner">By Nora Gilberts</span></div>
<div class="content__text">
Latite is an igneous, volcanic rock, with aphanitic-aphyric to aphyric-porphyritic texture. Its mineral assemblage is usually alkali feldspar and plagioclase in approximately equal amounts.
</div>
</div>
<div class="content__thumbs">
<div class="content__thumbs-item" style="background-image:url(img/4_1.jpg)"></div>
<div class="content__thumbs-item" style="background-image:url(img/4_2.jpg)"></div>
<div class="content__thumbs-item" style="background-image:url(img/4_3.jpg)"></div>
<div class="content__thumbs-item" style="background-image:url(img/4_4.jpg)"></div>
</div>
</div>
<div class="content">
<div class="content__group">
<div class="content__title">
<span class="oh"><span class="oh__inner">Rhomb</span></span>
<span class="oh"><span class="oh__inner">porphyry</span></span>
</div>
<div class="content__meta oh"><span class="oh__inner">By Bobby D. May</span></div>
<div class="content__text">
Rhomb porphyry is a volcanic rock with gray-white large porphyritic rhombus-shaped phenocrysts of feldspar (commonly anorthoclase) embedded in a very fine-grained red-brown matrix.
</div>
</div>
<div class="content__thumbs">
<div class="content__thumbs-item" style="background-image:url(img/5_1.jpg)"></div>
<div class="content__thumbs-item" style="background-image:url(img/5_2.jpg)"></div>
<div class="content__thumbs-item" style="background-image:url(img/5_3.jpg)"></div>
<div class="content__thumbs-item" style="background-image:url(img/5_4.jpg)"></div>
</div>
</div>
<div class="content">
<div class="content__group">
<div class="content__title">
<span class="oh"><span class="oh__inner">Bytownite</span></span>
<span class="oh"><span class="oh__inner">triclinic</span></span>
</div>
<div class="content__meta oh"><span class="oh__inner">By Maria Kilkenny</span></div>
<div class="content__text">
Bytownite is a calcium rich member of the plagioclase solid solution series of feldspar minerals with composition between anorthite and labradorite. Like others of the series, bytownite forms grey to white triclinic crystals.
</div>
</div>
<div class="content__thumbs">
<div class="content__thumbs-item" style="background-image:url(img/6_1.jpg)"></div>
<div class="content__thumbs-item" style="background-image:url(img/6_2.jpg)"></div>
<div class="content__thumbs-item" style="background-image:url(img/6_3.jpg)"></div>
<div class="content__thumbs-item" style="background-image:url(img/6_4.jpg)"></div>
</div>
</div>
<div class="content">
<div class="content__group">
<div class="content__title">
<span class="oh"><span class="oh__inner">Oligoclase</span></span>
<span class="oh"><span class="oh__inner">plagioclase</span></span>
</div>
<div class="content__meta oh"><span class="oh__inner">By Lauren Kraft</span></div>
<div class="content__text">
Oligoclase is a rock-forming mineral belonging to the plagioclase feldspars. In chemical composition and in its crystallographic and physical characters it is intermediate between albite and anorthite.
</div>
</div>
<div class="content__thumbs">
<div class="content__thumbs-item" style="background-image:url(img/7_1.jpg)"></div>
<div class="content__thumbs-item" style="background-image:url(img/7_2.jpg)"></div>
<div class="content__thumbs-item" style="background-image:url(img/7_3.jpg)"></div>
<div class="content__thumbs-item" style="background-image:url(img/7_4.jpg)"></div>
</div>
</div>
<div class="content">
<div class="content__group">
<div class="content__title">
<span class="oh"><span class="oh__inner">Mordenite</span></span>
<span class="oh"><span class="oh__inner">fibrous</span></span>
</div>
<div class="content__meta oh"><span class="oh__inner">By Stephen Kaiser</span></div>
<div class="content__text">
Mordenite is a zeolite mineral that is one of the six most abundant zeolites and is used commercially. It was first described in 1864 by Henry How.
</div>
</div>
<div class="content__thumbs">
<div class="content__thumbs-item" style="background-image:url(img/8_1.jpg)"></div>
<div class="content__thumbs-item" style="background-image:url(img/8_2.jpg)"></div>
<div class="content__thumbs-item" style="background-image:url(img/8_3.jpg)"></div>
<div class="content__thumbs-item" style="background-image:url(img/8_4.jpg)"></div>
</div>
</div>
<div class="content">
<div class="content__group">
<div class="content__title">
<span class="oh"><span class="oh__inner">Stishovite</span></span>
<span class="oh"><span class="oh__inner">tetragonal</span></span>
</div>
<div class="content__meta oh"><span class="oh__inner">By Alexander Cook</span></div>
<div class="content__text">
Stishovite is an extremely hard, dense tetragonal form (polymorph) of silicon dioxide. Large natural crystals of stishovite are extremely rare and are usually found as clasts of 1 to 2 mm in length.
</div>
</div>
<div class="content__thumbs">
<div class="content__thumbs-item" style="background-image:url(img/9_1.jpg)"></div>
<div class="content__thumbs-item" style="background-image:url(img/9_2.jpg)"></div>
<div class="content__thumbs-item" style="background-image:url(img/9_3.jpg)"></div>
<div class="content__thumbs-item" style="background-image:url(img/9_4.jpg)"></div>
</div>
</div>
<button class="unbutton action action--back">
<svg width="25px" height="25px" viewBox="0 0 25 25"><path d="M24 12.001H2.914l5.294-5.295-.707-.707L1 12.501l6.5 6.5.707-.707-5.293-5.293H24v-1z"/></svg>
<span>Go back</span>
</button>
</section>
</main>
<script type="module" src="js/index.js"></script>
</body>
</html>
함께 쓰는 파일 8개 보기
src/js/content.js
import { TextLinesReveal } from './textLinesReveal';
/**
* Class representing a Content element (.content)
*/
export class Content {
// DOM elements
DOM = {
// main element (.content)
el: null,
// title element (.content__title)
title: null,
// inner title elements (.content__title .oh__inner)
titleInner: null,
// inner meta element (.content__meta .oh__inner)
metaInner: null,
// text element (.content__text)
text: null,
// thumbs (.content__thumbs-item)
thumbs: null,
};
/**
* Constructor.
* @param {Element} DOM_el - main element (.content)
*/
constructor(DOM_el) {
this.DOM.el = DOM_el;
this.DOM.title = this.DOM.el.querySelector('.content__title');
this.DOM.titleInner = [...this.DOM.title.querySelectorAll('.oh__inner')];
this.DOM.metaInner = this.DOM.el.querySelector('.content__meta > .oh__inner');
this.DOM.text = this.DOM.el.querySelector('.content__text');
this.multiLine = new TextLinesReveal(this.DOM.text);
this.DOM.thumbs = [...this.DOM.el.querySelectorAll('.content__thumbs-item')];
}
}src/js/index.js
import { preloadImages, isInViewport } from './utils';
import { Preview } from './preview';
import Lenis from '@studio-freight/lenis';
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
gsap.registerPlugin(ScrollTrigger);
import { Flip } from 'gsap/Flip';
gsap.registerPlugin(Flip);
const ANIMATION_CONFIG = {duration: 1.5, ease: 'power4.inOut'};
const previewElems = [...document.querySelectorAll('.preview')];
const contentElems = [...document.querySelectorAll('.content')];
const previewItems = [];
previewElems.forEach((item, pos) => {
previewItems.push(new Preview(item, contentElems[pos]))
});
const backCtrl = document.querySelector('.action--back');
// Smooth scrolling.
let lenis;
// Current open item's position
let currentItem = -1;
let isAnimating = false;
const initSmoothScrolling = () => {
// Smooth scrolling initialization (using Lenis https://github.com/studio-freight/lenis)
lenis = new Lenis({
lerp: 0.1,
smooth: true,
direction: 'vertical',
});
const scrollFn = () => {
lenis.raf();
requestAnimationFrame(scrollFn);
};
requestAnimationFrame(scrollFn);
};
const animateOnScroll = () => {
for (const item of previewItems) {
gsap.set(item.DOM.imageInner, {transformOrigin: '50% 0%'});
item.scrollTimeline = gsap.timeline({
scrollTrigger: {
trigger: item.DOM.el,
start: 'top bottom',
end: 'bottom top',
scrub: true
}
})
.addLabel('start', 0)
.to(item.DOM.title, {
ease: 'none',
yPercent: -100
}, 'start')
.to(item.DOM.imageInner, {
ease: 'none',
scaleY: 1.8,
}, 'start')
}
};
const getAdjacentItems = item => {
let arr = [];
for (const [position, otherItem] of previewItems.entries()) {
if ( item != otherItem && isInViewport(otherItem.DOM.el) ) {
arr.push({position: position, item: otherItem});
}
}
return arr;
};
const showContent = item => {
// Get adjacent items. Need to hide them.
const itemIndex = previewItems.indexOf(item);
const adjacentItems = getAdjacentItems(item);
item.adjacentItems = adjacentItems;
const tl = gsap.timeline({
defaults: ANIMATION_CONFIG,
onStart: () => {
// Stop the "animate on scroll" timeline for this item
//item.scrollTimeline.pause();
// Stop the Lenis instance
lenis.stop();
// Overflow hidden and pointer events control class
document.body.classList.add('content-open');
// Shows current content element
item.content.DOM.el.classList.add('content--current');
gsap.set([item.content.DOM.titleInner, item.content.DOM.metaInner], {
yPercent: -101,
opacity: 0
});
gsap.set(item.content.DOM.thumbs, {
transformOrigin: '0% 0%',
scale: 0,
yPercent: 150,
});
gsap.set([item.content.DOM.text, backCtrl], {
opacity: 0
});
// Save image current scaleY value
const scaleY = item.DOM.imageInner.getBoundingClientRect().height / item.DOM.imageInner.offsetHeight;
item.imageInnerScaleYCached = scaleY;
},
onComplete: () => isAnimating = false
})
.addLabel('start', 0);
// hide adjacent preview elements
for (const el of item.adjacentItems) {
tl.to(el.item.DOM.el, {
y: el.position < itemIndex ? -window.innerHeight : window.innerHeight
}, 'start')
}
// gsap Flip logic: move the image element inside the content area
tl.add(() => {
const flipstate = Flip.getState(item.DOM.image);
item.content.DOM.el.appendChild(item.DOM.image);
Flip.from(flipstate, {
duration: ANIMATION_CONFIG.duration,
ease: ANIMATION_CONFIG.ease,
absolute: true,
});
}, 'start')
// preview title
.to(item.DOM.titleInner, {
yPercent: 101,
opacity: 0,
stagger: -0.03
}, 'start')
// preview description
.to(item.DOM.description, {
yPercent: 101,
opacity: 0
}, 'start')
// Reset image scaleY values (changed during scroll)
.to(item.DOM.imageInner, {
scaleY: 1
}, 'start')
// Content elements come in a bit later
.addLabel('content', 0.15)
// Back control button
.to(backCtrl, {
opacity: 1
}, 'content')
// content title
.to(item.content.DOM.titleInner, {
yPercent: 0,
opacity: 1,
stagger: -0.05
}, 'content')
// content meta / author
.to(item.content.DOM.metaInner, {
yPercent: 0,
opacity: 1,
}, 'content')
// content thumbs
.to(item.content.DOM.thumbs, {
scale: 1,
yPercent: 0,
stagger: -0.05
}, 'content')
// content text (lines)
.add(() => {
item.content.multiLine.in();
gsap.set(item.content.DOM.text, {
opacity: 1,
delay: 0.01
});
}, 'content');
};
const hideContent = () => {
// the current open item
const item = previewItems[currentItem];
gsap.timeline({
defaults: ANIMATION_CONFIG,
onComplete: () => {
// Stop the "animate on scroll" timeline for this item
//item.scrollTimeline.play();
// Start the Lenis instance
lenis.start();
// Overflow hidden and pointer events control class
document.body.classList.remove('content-open');
// Hides current content element
item.content.DOM.el.classList.remove('content--current');
isAnimating = false;
}
})
.addLabel('start', 0)
// Back control button
.to(backCtrl, {
opacity: 0
}, 'start')
// content title
.to(item.content.DOM.titleInner, {
yPercent: -101,
opacity: 0,
stagger: 0.05
}, 'start')
// content meta / author
.to(item.content.DOM.metaInner, {
yPercent: -101,
opacity: 0,
}, 'start')
// content thumbs
.to(item.content.DOM.thumbs, {
scale: 0,
yPercent: 150,
stagger: -0.05
}, 'start')
// content text (lines)
.add(() => {
item.content.multiLine.out();
}, 'start')
// Preview elements come in a bit later
.addLabel('preview', 0.15)
// hide adjacent preview elements
.to(item.adjacentItems.map(el => el.item.DOM.el), {
y: 0
}, 'preview')
// gsap Flip logic: move the image element inside the content area
.add(() => {
const flipstate = Flip.getState(item.DOM.image);
item.DOM.imageWrap.appendChild(item.DOM.image);
Flip.from(flipstate, {
duration: ANIMATION_CONFIG.duration,
ease: ANIMATION_CONFIG.ease,
absolute: true,
});
}, 'preview')
// preview title
.to(item.DOM.titleInner, {
yPercent: 0,
opacity: 1,
stagger: 0.03
}, 'preview')
// preview description
.to(item.DOM.description, {
yPercent: 0,
opacity: 1
}, 'preview')
// Reset image scaleY values
.to(item.DOM.imageInner, {
scaleY: item.imageInnerScaleYCached
}, 'preview')
};
// Initialize the events
const initEvents = () => {
for (const [pos,item] of previewItems.entries()) {
item.DOM.imageWrap.addEventListener('click', () => {
if ( isAnimating ) return;
isAnimating = true;
currentItem = pos;
showContent(item);
});
}
backCtrl.addEventListener('click', () => {
if ( isAnimating ) return;
isAnimating = true;
hideContent();
});
};
// Preload images and initialize scrolling animations
preloadImages('.preview__img-inner, .content__thumbs-item').then( _ => {
document.body.classList.remove('loading');
initSmoothScrolling();
animateOnScroll();
initEvents();
});src/js/preview.js
import { Content } from './content';
/**
* Class representing a Preview element (.preview)
*/
export class Preview {
// DOM elements
DOM = {
// main element (.preview)
el: null,
// image wrap element (.preview__img-wrap)
imageWrap: null,
// image element (.preview__img)
image: null,
// image inner element (.preview__img-inner)
imageInner: null,
// title element (.preview__title)
title: null,
// inner title elements (.oh__inner)
titleInner: null,
// description element (.preview__desc)
description: null,
};
/**
* Constructor.
* @param {Element} DOM_el - main element (.preview)
*/
constructor(DOM_el, content_el) {
this.DOM.el = DOM_el;
this.content = new Content(content_el);
this.DOM.imageWrap = this.DOM.el.querySelector('.preview__img-wrap');
this.DOM.image = this.DOM.imageWrap.querySelector('.preview__img');
this.DOM.imageInner = this.DOM.image.querySelector('.preview__img-inner');
this.DOM.title = this.DOM.el.querySelector('.preview__title');
this.DOM.titleInner = [...this.DOM.title.querySelectorAll('.oh__inner')];
this.DOM.description = this.DOM.el.querySelector('.preview__desc');
}
}src/js/textLinesReveal.js
import SplitType from 'split-type';
import { wrapLines } from './utils';
import { gsap } from 'gsap';
/**
* Class representing a text line element that reveals itself by animating its translateY value
*/
export class TextLinesReveal {
// DOM elements
DOM = {
// main element (a text DOM element)
el: null
}
// Split Type instance
SplitTypeInstance;
// Checks if the Split Type lines are visible or not
isVisible;
// Animation timelines
inTimeline;
outTimeline;
/**
* Constructor.
* @param {Element} DOM_el - a text DOM element
*/
constructor(DOM_el) {
this.DOM = {
el: DOM_el
};
this.SplitTypeInstance = new SplitType(this.DOM.el, { types: 'lines' });
// Wrap the lines (div with class .oh)
// The inner child will be the one animating the transform
wrapLines(this.SplitTypeInstance.lines, 'div', 'oh');
this.initEvents();
}
/**
* Animates the lines in.
* @return {GSAP Timeline} the animation timeline
* @param {Boolean} animation - with or without animation.
*/
in(animation = true) {
// Lines are visible
this.isVisible = true;
gsap.killTweensOf(this.SplitTypeInstance.lines);
this.inTimeline = gsap.timeline({defaults: {
duration: 1.5,
ease: 'power4.inOut',
}})
.addLabel('start', 0)
.set(this.SplitTypeInstance.lines, {
yPercent: 105,
}, 'start');
if ( animation ) {
this.inTimeline.to(this.SplitTypeInstance.lines, {
yPercent: 0,
stagger: 0.1
}, 'start');
}
else {
this.inTimeline.set(this.SplitTypeInstance.lines, {
yPercent: 0
}, 'start');
}
return this.inTimeline;
}
/**
* Animates the lines out.
* @param {Boolean} animation - with or without animation.
* @return {GSAP Timeline} the animation timeline
*/
out(animation = true) {
// Lines are invisible
this.isVisible = false;
gsap.killTweensOf(this.SplitTypeInstance.lines);
this.outTimeline = gsap.timeline({defaults: {
duration: 1.5,
ease: 'power4.inOut'
}}).addLabel('start', 0);
if ( animation ) {
this.outTimeline.to(this.SplitTypeInstance.lines, {
yPercent: -105,
stagger: 0.02
}, 'start');
}
else {
this.outTimeline.set(this.SplitTypeInstance.lines, {
yPercent: -105,
}, 'start');
}
return this.outTimeline;
}
/**
* Initializes some events.
*/
initEvents() {
// Re-initialize the Split Text on window resize.
window.addEventListener('resize', () => {
// Re-split text
// https://github.com/lukePeavey/SplitType#instancesplitoptions-void
this.SplitTypeInstance.split();
// Need to wrap again the new lines elements (div with class .oh)
wrapLines(this.SplitTypeInstance.lines, 'div', 'oh');
// Hide the lines
if ( !this.isVisible ) {
gsap.set(this.SplitTypeInstance.lines, {yPercent: -105});
}
});
}
}src/js/utils.js
const imagesLoaded = require('imagesloaded');
/**
* Linear interpolation
* @param {Number} a - first value to interpolate
* @param {Number} b - second value to interpolate
* @param {Number} n - amount to interpolate
*/
const lerp = (a, b, n) => (1 - n) * a + n * b;
/**
* Gets the cursor position
* @param {Event} ev - mousemove event
*/
const getCursorPos = ev => {
return {
x : ev.clientX,
y : ev.clientY
};
};
/**
* 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);
});
};
/**
* Wraps the elements of an array.
* @param {Array} arr - the array of elements to be wrapped
* @param {String} wrapType - the type of the wrap element ('div', 'span' etc)
* @param {String} wrapClass - the wrap class(es)
*/
const wrapLines = (arr, wrapType, wrapClass) => {
arr.forEach(el => {
const wrapEl = document.createElement(wrapType);
wrapEl.classList = wrapClass;
el.parentNode.appendChild(wrapEl);
wrapEl.appendChild(el);
});
}
/**
* Checks if an element is in the viewport
* @param {Element} elem - the element to be checked
*/
const isInViewport = elem => {
var bounding = elem.getBoundingClientRect();
return (
(bounding.bottom >= 0 && bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) || bounding.top >= 0 && bounding.top <= (window.innerHeight || document.documentElement.clientHeight)) &&
(bounding.right >= 0 && bounding.right <= (window.innerWidth || document.documentElement.clientWidth) || bounding.left >= 0 && bounding.left <= (window.innerWidth || document.documentElement.clientWidth))
);
};
export {
lerp,
getCursorPos,
preloadImages,
wrapLines,
isInViewport,
};Media credits and license evidence실행 안내·자료
README.md
## Credits
- Images from [Unsplash](https://unsplash.com/)
## License
[MIT](LICENSE)
Made with :blue_heart: by [Codrops](http://www.codrops.com)
LICENSE실행 안내·자료
MIT License
Copyright (c) 2009 - 2021 [Codrops](https://tympanus.net/codrops)
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
Bundled dependency licenses실행 안내·자료
GSAP standard license snapshot
Source: https://gsap.com/community/standard-license/
Retrieved: 2026-09-22T04:22:49.089Z
Original distribution copyright and version headers remain in the runtime code.
Standard "No Charge" GSAP License
I. DEFINITIONS
“GSAP License” means the terms and conditions of this GSAP Software License Agreement.
"GSAP Products" means any Software made available at gsap.com (https://gsap.com) or any successor sites, including but not limited to the GSAP animation library and related plugins, tools, or extensions.
"Permitted Uses" means the implementation and/or use of GSAP Products on any website, web application, or digital interface by any person or entity (which may include, for clarity, those of companies that compete with Webflow in other areas of business).
"Prohibited Uses" means any implementation and/or use of GSAP Products in tools that allow users to build visual animations without code that encourages, induces, or materially assists in creating a solution that competes with Webflow’s visual animation building capabilities.
"Competitive Products" means any software, tool, or service that enables users to create, edit, or manage animations through a visual interface or builder similar to Webflow (https://webflow.com).
II. GRANT OF LICENSE
Subject to the terms and conditions of this GSAP License, Webflow grants you a non-exclusive, worldwide license to use, reproduce, display, and implement GSAP Products solely for Permitted Uses.
III. RESTRICTIONS
You may not:
Use any GSAP Products for any Prohibited Uses without prior written consent;
Reverse engineer any GSAP Products for the purpose of creating Competitive Products;
Remove or alter any proprietary notices or branding from GSAP Products.
IV. OWNERSHIP AND INTELLECTUAL PROPERTY
All intellectual property rights in GSAP Products, including but not limited to copyright, patents, trademarks, and trade secrets, remain the exclusive property of Webflow. This GSAP License does not transfer any ownership rights in GSAP Products to you.
V. TERMINATION
Webflow may terminate this GSAP License and revoke your access in its discretion if you fail to comply with any of these terms and conditions. Upon termination, you must cease all use of GSAP Products and destroy all copies in your possession.
VI. MISCELLANEOUS PROVISIONS
General: This GSAP License is incorporated into and subject to Webflow’s Terms of Service available here (https://webflow.com/legal/terms) ("Terms of Service"). In the event of any conflict or inconsistency between this GSAP License and the Terms of Service, the terms of this GSAP License shall govern in relation to your use of any GSAP Products.
Amendments: Webflow reserves the right to update or modify this GSAP License at any time by posting the revised terms on this website, provided that any such updates or modifications shall not result in any material degradation to the security, integrity, or functionality of any GSAP Products. You understand and agree that your continued use of any GSAP Products after such revisions to this GSAP License constitutes your acceptance of this GSAP License as revised. If you do not accept the revised GSAP License, you are prohibited from using versions of the GSAP Products released after the effective date of the revised GSAP License (as well as any updates made to previous versions). Notwithstanding, you may continue using previous versions of GSAP Products under the applicable terms licensed to you prior to the effective date of the revised GSAP License (for clarity, excluding any updates made thereto).
No Waiver: Failure of Webflow to enforce any provision of this GSAP License shall not constitute a waiver of future enforcement of that or any other provision.
FAQ
Is it acceptable for AI tools like ChatGPT, Cursor, Lovable, Webstudio, etc. to generate GSAP code?
Absolutely! AI-generated code is not a "Prohibited Use".
What if a WordPress plugin or theme or other niche tool allows users to create GSAP-driven effects through a visual interface? Is that prohibited?
We want to encourage developers to build on top of GSAP, including visual tools that don't directly compete with Webflow's rich animation-building capabilities. If you are not sure if your product might be considered a "Prohibited Use", feel free to contact us (https://gsap.com/contact) so we can talk through it!
Can I really use GSAP in commercial projects without paying anything?
Yes, really! Commercial usage is covered under the standard license. All of GSAP including the plugins that were formerly "members-only" like SplitText (https://gsap.com/docs/v3/Plugins/SplitText/) and MorphSVG (https://gsap.com/docs/v3/Plugins/MorphSVGPlugin) can be used in commercial projects at no charge. Enjoy! 💚
Effective date: April 30, 2025
Last modified date: May 30, 2025
Copyright (©) 2025, Webflow
ev-emitter@2.1.2 — LICENSE.md
Copyright (c) 2016-2021 [David DeSandro](https://desandro.com)
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
imagesloaded@5.0.0 — LICENSE.md
Copyright (c) 2011-2022 [David DeSandro](https://desandro.com) and [contributors](https://github.com/desandro/imagesloaded/graphs/contributors)
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
tiny-emitter@2.1.0 — LICENSE
The MIT License (MIT)
Copyright (c) 2017 Scott Corgan
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.
virtual-scroll@2.2.1 — LICENSE
The MIT License (MIT)
Copyright (c) 2014 Florian Morel
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
BEHIND THE EXAMPLE
이 장면을 만드는 원리
스크롤 확대와 상세 전환의 속성 소유
화면 크기·입력·동시 작업을 고정하고 실제 렌더링 실패와 비용을 관찰합니다.
- 이 예제에서는
- animateOnScroll은 각 미리보기의 imageInner를 위쪽 원점으로 세로 확대하고 제목을 위로 밀어냅니다. 같은 항목 클릭은 별도의 showContent로 이어집니다.
