Codrops 원본
Alternate Column Scroll Animation
스크롤 · MIT
갤러리 안에서는 화면을 벗어나거나 움직임을 멈추면 예제도 닫힙니다. 다시 재생할 때는 처음부터 시작해요.
SOURCE FILES
원본 코드 읽기
수집한 원본 소스와 실행 안내를 함께 제공합니다.
src/css/base.css
*,
*::after,
*::before {
box-sizing: border-box;
}
:root {
font-size: 13px;
}
body {
margin: 0;
--color-text: #000;
--color-bg: #b7b19f;
--color-link: #000;
--color-link-hover: #000;
--color-heading: #111;
color: var(--color-text);
background-color: var(--color-bg);
font-family: nimbus-sans, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
--ratio: 0.75;
--grid-item-height: 32vw;
--grid-item-width: calc(var(--grid-item-height) * var(--ratio));
--thumb-height: 5vw;
--thumb-width: calc(var(--thumb-height) * var(--ratio));
}
.oh {
overflow: hidden !important;
}
/* Page Loader */
.js .loading::before,
.js .loading::after {
content: '';
position: fixed;
z-index: 5000;
}
.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;
}
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;
}
.unbutton:focus {
outline: none;
}
main {
overflow: hidden;
position: relative;
}
main::after {
content: '';
z-index: 1000;
pointer-events: none;
background: linear-gradient(to bottom, var(--color-bg), transparent);
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 50vh;
}
.frame {
padding: 1.5rem;
position: relative;
z-index: 5000;
text-transform: uppercase;
display: grid;
grid-template-rows: auto auto;
grid-template-columns: 1fr auto;
grid-template-areas: 'title menu'
'links links';
}
.frame__title {
font-size: 1rem;
margin: 0 0 0.5rem;
font-weight: normal;
grid-area: title;
}
.frame__links {
grid-area: links;
}
.frame__links a {
border-bottom: 1px solid var(--color-link);
margin: 0 0.5rem 0 0;
}
.button-menu {
grid-area: menu;
position: relative;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
width: 30px;
height: 15px;
cursor: not-allowed;
}
.button-menu span {
display: block;
position: relative;
height: 1px;
background: #000;
}
.heading {
color: var(--color-heading);
position: fixed;
top: 0;
left: 0;
margin: 0;
margin-top: -5vw;
width: 100%;
font-size: 12.25vw;
z-index: 1000;
pointer-events: none;
font-family: meno-banner, serif;
font-weight: 300;
text-transform: uppercase;
line-height: 1;
white-space: nowrap;
text-align: center;
will-change: transform, opacity;
transform-origin: 50% 40%;
}
.heading--up {
display: none;
}
.heading--down {
bottom: 0;
top: auto;
margin-top: 0;
margin-bottom: -6vw;
transform-origin: 50% 60%;
}
.columns {
width: 100%;
position: relative;
padding: 0 3rem;
display: flex;
justify-content: center;
}
.column-wrap {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
padding: 5vh 0 15vh;
}
.column-wrap--height {
height: 100vh;
flex-direction: column-reverse;
}
.column {
position: relative;
display: block;
will-change: transform;
}
.view-content .columns,
.view-content .column {
pointer-events: none !important;
}
.column-wrap--height .column {
flex-direction: column-reverse;
display: flex;
}
.column__item {
margin: 0;
position: relative;
z-index: 1;
}
.column__item-imgwrap {
width: var(--grid-item-width);
height: var(--grid-item-height);
position: relative;
overflow: hidden;
border-radius: 8px;
cursor: pointer;
margin: 8vh 1vw 0;
}
.column__item-img {
width: 100%;
height: 100%;
background-size: cover;
background-position: 50% 20%;
backface-visibility: hidden;
}
.column__item-caption {
text-transform: uppercase;
padding: 0 3vw;
margin-top: 0.5rem;
}
.content {
position: fixed;
pointer-events: none;
opacity: 0;
top: 0;
left: 0;
width: 100%;
height: 100vh;
display: grid;
grid-template-rows: 9rem 1fr calc(70vh - var(--thumb-height) - 1.6rem) 1fr;
grid-template-columns: 100%;
grid-template-areas: '...'
'back'
'content'
'nav';
}
.view-content .content {
pointer-events: auto;
opacity: 1;
z-index: 2000;
}
.content__item {
position: absolute;
opacity: 0;
height: 0;
grid-area: content;
display: flex;
flex-direction: column;
}
.content__item--current {
opacity: 1;
position: relative;
height: 100%;
}
.content__item-title {
opacity: 0;
grid-area: title;
margin: 1rem 0 0 1.5rem;
justify-self: center;
font-family: meno-banner, serif;
font-weight: 300;
font-style: italic;
font-size: 9vh;
white-space: nowrap;
transform-origin: 50% 80%;
will-change: transform, opacity;
}
.content__item-text {
opacity: 0;
text-transform: uppercase;
grid-area: text;
display: flex;
flex-direction: column;
justify-content: end;
padding: 0 1.5rem 1.5rem;
text-align: right;
margin: auto 0 0 auto;
}
.content__item-text::before {
content: '';
z-index: 1000;
pointer-events: none;
background: linear-gradient(to top, var(--color-bg), transparent);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.content__item-text span:last-child {
display: block;
margin-top: 1rem;
}
.content__nav {
opacity: 0;
grid-area: nav;
align-self: end;
position: relative;
overflow: hidden;
padding: 0 1rem 1rem;
display: flex;
}
.content__nav-wrap {
position: relative;
display: flex;
margin: 0 auto;
flex-wrap: wrap;
height: calc(var(--thumb-height) + 0.6rem);
overflow: hidden;
justify-content: center;
padding: 0 10px;
}
.content__nav-wrap:hover {
cursor: not-allowed;
}
.content__nav-wrap::before,
.content__nav-wrap::after {
content: '';
position: absolute;
top: 50%;
margin-top: -5px;
width: 7px;
height: 10px;
background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNyIgaGVpZ2h0PSIxMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNiAwIDEgNWw1IDUiIHN0cm9rZT0iIzAwMCIgZmlsbD0ibm9uZSIvPjwvc3ZnPg==");
}
.content__nav-wrap::before {
left: 0;
}
.content__nav-wrap::after {
right: 0;
transform: rotate(180deg);
}
.content__nav-item {
flex: none;
height: var(--thumb-height);
width: var(--thumb-width);
margin: 0.3rem;
background-size: cover;
background-position: 50% 20%;
will-change: transform, opacity;
}
.button-back {
opacity: 0;
stroke: #000;
z-index: 1000;
cursor: pointer;
width: 50px;
grid-area: back;
align-self: start;
justify-self: start;
margin-left: 1.5rem;
}
.button-back svg {
stroke-linecap: round;
}
.button-back:hover,
.button-back:focus {
outline: none;
stroke: #823725;
}
@media screen and (min-width: 53em) {
:root {
font-size: 16px;
}
body {
--ratio: 0.95;
--grid-item-height: 25vw;
--thumb-height: 7vh;
}
main::after {
display: none;
}
.frame {
position: fixed;
text-align: left;
top: 0;
left: 0;
display: grid;
align-content: space-between;
width: 100%;
max-width: none;
height: 100%;
padding: 1.5rem 0 1.5rem 1rem;
pointer-events: none;
grid-template-columns: 50% 50%;
grid-template-rows: auto auto;
grid-template-areas:
'title menu'
'links ...';
}
.frame__title {
margin: 0;
-webkit-writing-mode: vertical-rl;
writing-mode: vertical-rl;
transform: rotate(180deg);
white-space: nowrap;
}
.frame__links {
text-align: center;
-webkit-writing-mode: vertical-rl;
writing-mode: vertical-rl;
transform: rotate(180deg);
margin: 0;
white-space: nowrap;
}
.frame__links a {
border-bottom: 0;
border-left: 1px solid var(--color-link);
margin: 0.5rem 0;
}
.frame a,
.frame button {
pointer-events: auto;
}
.button-menu {
grid-area: menu;
justify-self: end;
margin-right: 1rem;
}
.heading--up {
display: block;
}
.column__item-imgwrap {
margin: 5vw 2.75vw 0;
}
.column__item-caption {
display: flex;
justify-content: space-between;
}
.view-content .content {
z-index: 10;
}
.content {
padding: 0;
grid-template-rows: 15vh 70vh 1fr;
grid-template-columns: 1fr 1fr calc(70vh * var(--ratio)) 1fr 1fr;
grid-template-areas: '... ... content content content'
'... back content content content'
'... nav nav nav ...';
}
.content__item {
display: grid;
grid-template-rows: 15vh 1fr 35%;
grid-template-columns: calc(70vh * 0.95) 1fr;
grid-template-areas: 'title ...'
'image text'
'image text';
text-align: left;
}
.content__item-title {
margin: 0;
align-self: center;
}
.content__item-text {
padding: 0 0 1vw 1vw;
margin: 0;
max-width: 20ch;
text-align: left;
}
.content__item-text::before {
display: none;
}
.content__item-text span:last-child {
display: block;
margin-top: 10vh;
}
.content__nav {
padding: 0 0 1rem 0;
}
.button-back {
margin-left: 0;
margin-right: 5vw;
justify-self: end;
}
}
/*! locomotive-scroll v4.1.3 | MIT License | https://github.com/locomotivemtl/locomotive-scroll */
html.has-scroll-smooth {
overflow: hidden;
}
html.has-scroll-dragging {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.has-scroll-smooth body {
overflow: hidden;
}
.has-scroll-smooth [data-scroll-container] {
min-height: 100vh;
}
[data-scroll-direction="horizontal"] [data-scroll-container] {
height: 100vh;
display: inline-block;
white-space: nowrap;
}
[data-scroll-direction="horizontal"] [data-scroll-section] {
display: inline-block;
vertical-align: top;
white-space: nowrap;
height: 100%;
}
.c-scrollbar {
position: absolute;
right: 0;
top: 0;
width: 11px;
height: 100%;
transform-origin: center right;
transition: transform 0.3s, opacity 0.3s;
opacity: 0;
}
.c-scrollbar:hover {
transform: scaleX(1.45);
}
.c-scrollbar:hover,
.has-scroll-scrolling .c-scrollbar,
.has-scroll-dragging .c-scrollbar {
opacity: 1;
}
[data-scroll-direction="horizontal"] .c-scrollbar {
width: 100%;
height: 10px;
top: auto;
bottom: 0;
transform: scaleY(1);
}
[data-scroll-direction="horizontal"] .c-scrollbar:hover {
transform: scaleY(1.3);
}
.c-scrollbar_thumb {
position: absolute;
top: 0;
right: 0;
background-color: black;
opacity: 0.5;
width: 7px;
border-radius: 10px;
margin: 2px;
cursor: -webkit-grab;
cursor: grab;
}
.has-scroll-dragging .c-scrollbar_thumb {
cursor: -webkit-grabbing;
cursor: grabbing;
}
[data-scroll-direction="horizontal"] .c-scrollbar_thumb {
right: auto;
bottom: 0;
}
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>Alternate Column Scroll | Codrops</title>
<meta name="description" content="A layout with an alternate scroll on image columns and a content preview." />
<meta name="keywords" content="layout, scroll, locomotive scroll, column, javascript, web design" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="https://use.typekit.net/njz5ajv.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">
<h1 class="frame__title">Alternate Column Scroll</h1>
<nav class="frame__links">
<a href="https://tympanus.net/codrops/2021/12/01/grid-zoom-layout/">Previous demo</a>
<a href="https://tympanus.net/codrops/?p=57959">Article</a>
<a href="https://github.com/codrops/ColumnScroll/">GitHub</a>
</nav>
<button class="unbutton button-menu" aria-label="Open the menu"><span></span></button>
</div>
<h2 class="heading heading--up">Jack Ruthless</h2>
<h2 class="heading heading--down">Jack Ruthless</h2>
<div class="columns" data-scroll-container>
<div class="column-wrap column-wrap--height">
<div class="column">
<figure class="column__item">
<div class="column__item-imgwrap" data-pos="2">
<div class="column__item-img" style="background-image:url(img/1.jpg)"></div>
</div>
<figcaption class="column__item-caption">
<span>Cyber Blue</span>
<span>2011</span>
</figcaption>
</figure>
<figure class="column__item">
<div class="column__item-imgwrap" data-pos="5">
<div class="column__item-img" style="background-image:url(img/2.jpg)"></div>
</div>
<figcaption class="column__item-caption">
<span>Gnostic Will</span>
<span>2012</span>
</figcaption>
</figure>
<figure class="column__item">
<div class="column__item-imgwrap" data-pos="8">
<div class="column__item-img" style="background-image:url(img/3.jpg)"></div>
</div>
<figcaption class="column__item-caption">
<span>French Kiss</span>
<span>2013</span>
</figcaption>
</figure>
<figure class="column__item">
<div class="column__item-imgwrap" data-pos="11">
<div class="column__item-img" style="background-image:url(img/4.jpg)"></div>
</div>
<figcaption class="column__item-caption">
<span>Half Life</span>
<span>2014</span>
</figcaption>
</figure>
<figure class="column__item">
<div class="column__item-imgwrap" data-pos="14">
<div class="column__item-img" style="background-image:url(img/5.jpg)"></div>
</div>
<figcaption class="column__item-caption">
<span>Love Boat</span>
<span>2015</span>
</figcaption>
</figure>
<figure class="column__item">
<div class="column__item-imgwrap" data-pos="17">
<div class="column__item-img" style="background-image:url(img/6.jpg)"></div>
</div>
<figcaption class="column__item-caption">
<span>Golden Ray</span>
<span>2016</span>
</figcaption>
</figure>
<figure class="column__item">
<div class="column__item-imgwrap" data-pos="20">
<div class="column__item-img" style="background-image:url(img/7.jpg)"></div>
</div>
<figcaption class="column__item-caption">
<span>Blame Game</span>
<span>2017</span>
</figcaption>
</figure>
<figure class="column__item">
<div class="column__item-imgwrap" data-pos="23">
<div class="column__item-img" style="background-image:url(img/8.jpg)"></div>
</div>
<figcaption class="column__item-caption">
<span>Lone Dust</span>
<span>2018</span>
</figcaption>
</figure>
</div><!-- /column -->
</div><!-- /column-wrap -->
<div class="column-wrap">
<div class="column" data-scroll-section>
<figure class="column__item">
<div class="column__item-imgwrap" data-pos="1">
<div class="column__item-img" style="background-image:url(img/9.jpg)"></div>
</div>
<figcaption class="column__item-caption">
<span>Lucky Wood</span>
<span>2019</span>
</figcaption>
</figure>
<figure class="column__item">
<div class="column__item-imgwrap" data-pos="4">
<div class="column__item-img" style="background-image:url(img/10.jpg)"></div>
</div>
<figcaption class="column__item-caption">
<span>Good Earth</span>
<span>2020</span>
</figcaption>
</figure>
<figure class="column__item">
<div class="column__item-imgwrap" data-pos="7">
<div class="column__item-img" style="background-image:url(img/11.jpg)"></div>
</div>
<figcaption class="column__item-caption">
<span>Empty Words</span>
<span>2021</span>
</figcaption>
</figure>
<figure class="column__item">
<div class="column__item-imgwrap" data-pos="10">
<div class="column__item-img" style="background-image:url(img/12.jpg)"></div>
</div>
<figcaption class="column__item-caption">
<span>Nonage Line</span>
<span>2009</span>
</figcaption>
</figure>
<figure class="column__item">
<div class="column__item-imgwrap" data-pos="13">
<div class="column__item-img" style="background-image:url(img/13.jpg)"></div>
</div>
<figcaption class="column__item-caption">
<span>Blue Hell</span>
<span>2010</span>
</figcaption>
</figure>
<figure class="column__item">
<div class="column__item-imgwrap" data-pos="16">
<div class="column__item-img" style="background-image:url(img/14.jpg)"></div>
</div>
<figcaption class="column__item-caption">
<span>Cold Blood</span>
<span>2011</span>
</figcaption>
</figure>
<figure class="column__item">
<div class="column__item-imgwrap" data-pos="19">
<div class="column__item-img" style="background-image:url(img/15.jpg)"></div>
</div>
<figcaption class="column__item-caption">
<span>Tulip Heat</span>
<span>2012</span>
</figcaption>
</figure>
<figure class="column__item">
<div class="column__item-imgwrap" data-pos="22">
<div class="column__item-img" style="background-image:url(img/16.jpg)"></div>
</div>
<figcaption class="column__item-caption">
<span>Red Wrath</span>
<span>2013</span>
</figcaption>
</figure>
</div><!-- /column -->
</div>
<div class="column-wrap column-wrap--height">
<div class="column">
<figure class="column__item">
<div class="column__item-imgwrap" data-pos="3">
<div class="column__item-img" style="background-image:url(img/17.jpg)"></div>
</div>
<figcaption class="column__item-caption">
<span>Bold Human</span>
<span>2014</span>
</figcaption>
</figure>
<figure class="column__item">
<div class="column__item-imgwrap" data-pos="6">
<div class="column__item-img" style="background-image:url(img/18.jpg)"></div>
</div>
<figcaption class="column__item-caption">
<span>Loyal Royal</span>
<span>2015</span>
</figcaption>
</figure>
<figure class="column__item">
<div class="column__item-imgwrap" data-pos="9">
<div class="column__item-img" style="background-image:url(img/19.jpg)"></div>
</div>
<figcaption class="column__item-caption">
<span>Lone Cone</span>
<span>2016</span>
</figcaption>
</figure>
<figure class="column__item">
<div class="column__item-imgwrap" data-pos="12">
<div class="column__item-img" style="background-image:url(img/20.jpg)"></div>
</div>
<figcaption class="column__item-caption">
<span>Dutch Green</span>
<span>2017</span>
</figcaption>
</figure>
<figure class="column__item">
<div class="column__item-imgwrap" data-pos="15">
<div class="column__item-img" style="background-image:url(img/21.jpg)"></div>
</div>
<figcaption class="column__item-caption">
<span>Valley Hill</span>
<span>2018</span>
</figcaption>
</figure>
<figure class="column__item">
<div class="column__item-imgwrap" data-pos="18">
<div class="column__item-img" style="background-image:url(img/22.jpg)"></div>
</div>
<figcaption class="column__item-caption">
<span>Kale Hale</span>
<span>2019</span>
</figcaption>
</figure>
<figure class="column__item">
<div class="column__item-imgwrap" data-pos="21">
<div class="column__item-img" style="background-image:url(img/23.jpg)"></div>
</div>
<figcaption class="column__item-caption">
<span>Fake Cake</span>
<span>2020</span>
</figcaption>
</figure>
<figure class="column__item">
<div class="column__item-imgwrap" data-pos="24">
<div class="column__item-img" style="background-image:url(img/24.jpg)"></div>
</div>
<figcaption class="column__item-caption">
<span>Book Belly</span>
<span>2021</span>
</figcaption>
</figure>
</div><!-- /column -->
</div><!-- /column-wrap -->
</div><!-- columns -->
<div class="content">
<div class="content__item">
<h2 class="content__item-title">Lucky Wood</h2>
<div class="content__item-text">
<span>Faith, you're driving me away
You do it every day
You don't mean it
But it hurts like hell</span>
<span>2019</span>
</div>
</div>
<div class="content__item">
<h2 class="content__item-title">Cyber Blue</h2>
<div class="content__item-text">
<span>My brain says I'm receiving pain
A lack of oxygen
From my life support
My iron lung
</span>
<span>2011</span>
</div>
</div>
<div class="content__item">
<h2 class="content__item-title">Bold Human</h2>
<div class="content__item-text">
<span>We're too young to fall asleep
Too cynical to speak
We are losing it
Can't you tell?</span>
<span>2014</span>
</div>
</div>
<div class="content__item">
<h2 class="content__item-title">Good Earth</h2>
<div class="content__item-text">
<span>We scratch our eternal itch
A twentieth century bitch
And we are grateful for
Our iron lung</span>
<span>2020</span>
</div>
</div>
<div class="content__item">
<h2 class="content__item-title">Gnostic Will</h2>
<div class="content__item-text">
<span>The head shrinkers
They want everything
My Uncle Bill
My Belisha beacon</span>
<span>2012</span>
</div>
</div>
<div class="content__item">
<h2 class="content__item-title">Loyal Royal</h2>
<div class="content__item-text">
<span>The head shrinkers
They want everything
My Uncle Bill
My Belisha beacon</span>
<span>2015</span>
</div>
</div>
<div class="content__item">
<h2 class="content__item-title">Empty Words</h2>
<div class="content__item-text">
<span>Suck, suck your teenage thumb
Toilet trained and dumb
When the power runs out
We'll just hum</span>
<span>2021</span>
</div>
</div>
<div class="content__item">
<h2 class="content__item-title">French Kiss</h2>
<div class="content__item-text">
<span>This, this is our new song
Just like the last one
A total waste of time
My iron lung</span>
<span>2013</span>
</div>
</div>
<div class="content__item">
<h2 class="content__item-title">Lone Cone</h2>
<div class="content__item-text">
<span>And if you're frightened
You can be frightened
You can be, it's OK</span>
<span>2016</span>
</div>
</div>
<div class="content__item">
<h2 class="content__item-title">Nonage Line</h2>
<div class="content__item-text">
<span>Lost in the mountain
Rust in my brain
The air is sacred here
In spite of your claim</span>
<span>2009</span>
</div>
</div>
<div class="content__item">
<h2 class="content__item-title">Half Life</h2>
<div class="content__item-text">
<span>Up on the rooftops
Out of reach
Trickster is meaningless
Trickster is weak</span>
<span>2014</span>
</div>
</div>
<div class="content__item">
<h2 class="content__item-title">Dutch Green</h2>
<div class="content__item-text">
<span>He's talking out the world
Talking out the world</span>
<span>2017</span>
</div>
</div>
<div class="content__item">
<h2 class="content__item-title">Blue Hell</h2>
<div class="content__item-text">
<span>Hey, hey, hey
This is only halfway
Hey, hey, hey
This is only halfway</span>
<span>2010</span>
</div>
</div>
<div class="content__item">
<h2 class="content__item-title">Love Boat</h2>
<div class="content__item-text">
<span>I wanted you so bad
That I couldn't say
All these things fall apart</span>
<span>2015</span>
</div>
</div>
<div class="content__item">
<h2 class="content__item-title">Valley Hill</h2>
<div class="content__item-text">
<span>We wanted out so bad
We couldn't say
These things fall apart</span>
<span>2018</span>
</div>
</div>
<div class="content__item">
<h2 class="content__item-title">Cold Blood</h2>
<div class="content__item-text">
<span>Truant kids
A can of brick dust worms
Who do not want to climb down from
Their chestnut tree</span>
<span>2011</span>
</div>
</div>
<div class="content__item">
<h2 class="content__item-title">Golden Ray</h2>
<div class="content__item-text">
<span>Long white gloves
Police tread carefully
Escaped from the zoo
The perfect child facsimile is</span>
<span>2016</span>
</div>
</div>
<div class="content__item">
<h2 class="content__item-title">Kale Hale</h2>
<div class="content__item-text">
<span>Please could you stop the noise?
I'm trying to get some rest
From all the unborn chicken
voices in my head</span>
<span>2019</span>
</div>
</div>
<div class="content__item">
<h2 class="content__item-title">Tulip Heat</h2>
<div class="content__item-text">
<span>What's that?
I may be paranoid, but not an android</span>
<span>2012</span>
</div>
</div>
<div class="content__item">
<h2 class="content__item-title">Blame Game</h2>
<div class="content__item-text">
<span>When I am king you will be first against the wall
With your opinion which is of no consequence at all</span>
<span>2017</span>
</div>
</div>
<div class="content__item">
<h2 class="content__item-title">Fake Cake</h2>
<div class="content__item-text">
<span>Ambition makes you look pretty ugly
Kicking and squealing, Gucci little piggy</span>
<span>2017</span>
</div>
</div>
<div class="content__item">
<h2 class="content__item-title">Red Wrath</h2>
<div class="content__item-text">
<span>You don't remember, you don't remember
Why don't you remember my name?</span>
<span>2013</span>
</div>
</div>
<div class="content__item">
<h2 class="content__item-title">Lone Dust</h2>
<div class="content__item-text">
<span>Off with his head, man, off with his head, man
Why don't you remember my name? I guess he does</span>
<span>2018</span>
</div>
</div>
<div class="content__item">
<h2 class="content__item-title">Book Belly</h2>
<div class="content__item-text">
<span>Rain down, rain down
Come on, rain down on me
From a great height
From a great height, height</span>
<span>2021</span>
</div>
</div>
<nav class="content__nav">
<div class="content__nav-wrap">
<div class="content__nav-item" style="background-image:url(img/25.jpg)"></div>
<div class="content__nav-item" style="background-image:url(img/26.jpg)"></div>
<div class="content__nav-item" style="background-image:url(img/27.jpg)"></div>
<div class="content__nav-item" style="background-image:url(img/28.jpg)"></div>
<div class="content__nav-item" style="background-image:url(img/29.jpg)"></div>
<div class="content__nav-item" style="background-image:url(img/30.jpg)"></div>
<div class="content__nav-item" style="background-image:url(img/31.jpg)"></div>
<div class="content__nav-item" style="background-image:url(img/32.jpg)"></div>
<div class="content__nav-item" style="background-image:url(img/33.jpg)"></div>
<div class="content__nav-item" style="background-image:url(img/34.jpg)"></div>
<div class="content__nav-item" style="background-image:url(img/35.jpg)"></div>
<div class="content__nav-item" style="background-image:url(img/36.jpg)"></div>
<div class="content__nav-item" style="background-image:url(img/37.jpg)"></div>
<div class="content__nav-item" style="background-image:url(img/38.jpg)"></div>
<div class="content__nav-item" style="background-image:url(img/39.jpg)"></div>
<div class="content__nav-item" style="background-image:url(img/40.jpg)"></div>
<div class="content__nav-item" style="background-image:url(img/41.jpg)"></div>
<div class="content__nav-item" style="background-image:url(img/42.jpg)"></div>
<div class="content__nav-item" style="background-image:url(img/43.jpg)"></div>
</div>
</nav>
<button class="unbutton button-back"><svg viewBox="0 0 50 9" width="100%"><path d="M0 4.5l5-3M0 4.5l5 3M50 4.5h-77"></path></svg></button>
</div>
</main>
<script type="module" src="js/index.js"></script>
</body>
</html>
함께 쓰는 파일 8개 보기
src/js/contentItem.js
/**
* Class representing a content item (.content__item).
*/
export class ContentItem {
// DOM elements
DOM = {
// Main element (.content__item)
el: null,
// .content__item-title
title: null,
// .content__item-text
text: null,
};
/**
* Constructor.
* @param {Element} DOM_el - the .content__item element.
*/
constructor(DOM_el) {
this.DOM.el = DOM_el;
this.DOM.title = this.DOM.el.querySelector('.content__item-title');
this.DOM.text = this.DOM.el.querySelector('.content__item-text');
}
}src/js/grid.js
import { calcWinsize, adjustedBoundingRect } from './utils';
import LocomotiveScroll from 'locomotive-scroll';
import { GridItem } from './gridItem';
import { ContentItem } from './contentItem';
import { gsap } from 'gsap';
// body element
const bodyEl = document.body;
// Calculate the viewport size
let winsize = calcWinsize();
window.addEventListener('resize', () => winsize = calcWinsize());
/**
* Class representing a grid of items
*/
export class Grid {
// DOM elements
DOM = {
// main element (.columns)
el: null,
// The .column elements (odd columns) that eill animate to the opposite scroll direction
oddColumns: null,
// .column__item
gridItems: null,
// .content
content: document.querySelector('.content'),
// .content__item
contentItems: document.querySelectorAll('.content__item'),
// .heading
heading: {top: document.querySelector('.heading--up'), bottom: document.querySelector('.heading--down')},
// .button-back button
backCtrl: document.querySelector('.button-back'),
// .content__nav
contentNav: document.querySelector('.content__nav'),
// For demo purposes only (proof of concept).
// .content__nav-item
contentNavItems: document.querySelectorAll('.content__nav-item'),
};
// GridItem instances array.
gridItemArr = [];
// Index of current GridItem.
currentGridItem = -1;
// Checks if in grid mode or if in content mode.
isGridView = true;
// Checks for active animation.
isAnimating = false;
// Scroll cached value
lastscroll = 0;
/**
* Constructor.
* @param {Element} DOM_el - the .columns element
*/
constructor(DOM_el) {
this.DOM.el = DOM_el;
// first and third columns
this.DOM.oddColumns = [...this.DOM.el.querySelectorAll('.column')].filter((_, index) => index != 1);
// grid items (figure.column__item)
this.DOM.gridItems = [...this.DOM.el.querySelectorAll('.column__item')];
// Assign a ContentItem to each GridItem
this.DOM.gridItems.forEach(gridItem => {
const newItem = new GridItem(gridItem);
this.gridItemArr.push(newItem);
// The ContentItem instance
newItem.contentItem = new ContentItem(this.DOM.contentItems[newItem.position]);
});
// Initialize the Locomotive scroll
this.initSmoothScroll();
// Initialize the events on the page.
this.initEvents();
// Track which items are visible
this.trackVisibleItems();
}
/**
* Initialize the Locomotive scroll.
*/
initSmoothScroll() {
this.lscroll = new LocomotiveScroll({
el: this.DOM.el,
smooth: true,
lerp: 0.13,
smartphone: {smooth: true},
tablet: {smooth: true}
});
// Locomotive scroll event: translate the first and third grid column -1*scrollValue px.
this.lscroll.on('scroll', obj => {
this.lastscroll = obj.scroll.y;
this.DOM.oddColumns.forEach(column => column.style.transform = `translateY(${obj.scroll.y}px)`);
});
}
/**
* Initialize the events.
*/
initEvents() {
// For every GridItem
for (const [position, gridItem] of this.gridItemArr.entries()) {
// Open the gridItem and reveal its content
gridItem.DOM.img.outer.addEventListener('click', () => {
if ( !this.isGridView || this.isAnimating || document.documentElement.classList.contains('has-scroll-scrolling') ) {
return false;
}
this.isAnimating = true;
this.isGridView = false;
// Update currentGridItem
this.currentGridItem = position;
// Stop/Destroy the Locomotive scroll
this.lscroll.destroy();
this.showContent(gridItem);
});
// Hovering on the grid item's image outer.
gridItem.DOM.img.outer.addEventListener('mouseenter', () => {
if ( !this.isGridView || this.isAnimating ) {
return false;
}
gsap.killTweensOf([gridItem.DOM.img.outer, gridItem.DOM.img.inner]);
gsap.timeline({
defaults: {duration: 1.4, ease: 'expo'},
onComplete: () => gsap.set([gridItem.DOM.img.outer, gridItem.DOM.img.inner], {willChange: ''})
})
.addLabel('start', 0)
.set([gridItem.DOM.img.outer, gridItem.DOM.img.inner], { willChange: 'transform' }, 'start')
.to(gridItem.DOM.img.outer, {scaleY: 0.95,scaleX: 0.88}, 'start')
.to(gridItem.DOM.img.inner, {ease: 'power4', scaleY: 1.2, scaleX: 1.7}, 'start');
});
// Hovering out will reverse the scale values.
gridItem.DOM.img.outer.addEventListener('mouseleave', () => {
if ( !this.isGridView || this.isAnimating ) {
return false;
}
gsap.killTweensOf([gridItem.DOM.img.outer, gridItem.DOM.img.inner]);
gsap.timeline({
defaults: {duration: 1.4, ease: 'expo'},
onComplete: () => gsap.set([gridItem.DOM.img.outer, gridItem.DOM.img.inner], { willChange: '' })
})
.addLabel('start', 0)
.set([gridItem.DOM.img.outer, gridItem.DOM.img.inner], { willChange: 'transform' }, 'start')
.to([gridItem.DOM.img.outer, gridItem.DOM.img.inner], {scale: 1}, 0);
});
}
// Recalculate current image transform
window.addEventListener('resize', () => {
if ( this.isGridView ) {
return false;
}
// Calculate the transform to apply to the current grid item image
const imageTransform = this.calcTransformImage();
gsap.set(this.gridItemArr[this.currentGridItem].DOM.img.outer, {
scale: imageTransform.scale,
x: imageTransform.x,
y: imageTransform.y
});
// Adjust the transform value for all the other grid items that moved to the thumbnails area.
for (const [position, viewportGridItem] of this.viewportGridItems.entries()) {
const imgOuter = viewportGridItem.DOM.img.outer;
gsap.set(viewportGridItem.DOM.img.outer, {
scale: this.getFinalScaleValue(imgOuter),
x: this.getFinalTranslationValue(imgOuter, position).x,
y: this.getFinalTranslationValue(imgOuter, position).y
});
}
});
// Close the current item's content and reveal back the grid.
this.DOM.backCtrl.addEventListener('click', () => {
if ( this.isGridView || this.isAnimating ) {
return false;
}
this.isAnimating = true;
this.isGridView = true;
// Restart the Locomotive scroll
this.initSmoothScroll();
this.lscroll.scrollTo(this.lastscroll, {duration: 0, disableLerp: true});
this.closeContent();
});
}
/**
* Scale up the image and reveal its content.
* @param {GridItem} gridItem - the gridItem element.
*/
showContent(gridItem) {
// All the other (that are inside the viewport)
this.viewportGridItems = this.gridItemArr.filter(el => el != gridItem && el.DOM.el.classList.contains('in-view'));
// Remaining (not in the viewport)
this.remainingGridItems = this.gridItemArr.filter(el => !this.viewportGridItems.includes(el) && el != gridItem).map(gridItem => gridItem.DOM.el);
// image outer elements
this.viewportGridItemsImgOuter = this.viewportGridItems.map(gridItem => gridItem.DOM.img.outer);
// Calculate the transform to apply to the gridItem's image .
const imageTransform = this.calcTransformImage();
gsap.killTweensOf([gridItem.DOM.img.outer, gridItem.DOM.img.inner]);
this.timeline = gsap.timeline({
defaults: {
duration: 1.4,
ease: 'expo.inOut'
},
// overflow hidden
onStart: () => bodyEl.classList.add('oh'),
onComplete: () => {
// Hide all other grid items from the grid.
gsap.set(this.remainingGridItems, {opacity: 0});
this.isAnimating = false;
}
})
.addLabel('start', 0)
.set([gridItem.DOM.el, gridItem.DOM.el.parentNode.parentNode], {
zIndex: 100
}, 'start')
.set([gridItem.DOM.img.outer, gridItem.DOM.img.inner, this.viewportGridItemsImgOuter], {
willChange: 'transform, opacity'
}, 'start')
.to(this.DOM.heading.top, {
y: '-200%',
scaleY: 4
}, 'start')
.to(this.DOM.heading.bottom, {
y: '200%',
scaleY: 4
}, 'start+=0.05')
.to(gridItem.DOM.img.outer, {
scale: imageTransform.scale,
x: imageTransform.x,
y: imageTransform.y,
onComplete: () => gsap.set(gridItem.DOM.img.outer, {willChange: ''})
}, 'start')
.to(gridItem.DOM.img.inner, {
scale: 1,
onComplete: () => gsap.set(gridItem.DOM.img.inner, {willChange: ''})
}, 'start')
.add(() => {
gsap.set(this.DOM.contentNavItems, {
y: `${gsap.utils.random(100,300)}%`,
opacity: 0
});
}, 'start');
for (const [position, viewportGridItem] of this.viewportGridItems.entries()) {
const imgOuter = viewportGridItem.DOM.img.outer;
this.timeline
.to([viewportGridItem.DOM.caption, gridItem.DOM.caption], {
ease: 'expo',
opacity: 0,
delay: 0.03*position
}, 'start')
.to(viewportGridItem.DOM.img.outer, {
scale: this.getFinalScaleValue(imgOuter),
x: this.getFinalTranslationValue(imgOuter, position).x,
y: this.getFinalTranslationValue(imgOuter, position).y,
onComplete: () => gsap.set(imgOuter, {willChange: ''}),
delay: 0.03*position
}, 'start');
}
this.timeline
.addLabel('showContent', 'start+=0.2')
.to([...this.DOM.contentNavItems].slice(this.viewportGridItems.length+1), {
y: '0%',
opacity: 1,
delay: pos => 0.03*pos
}, 'showContent')
.add(() => {
gridItem.contentItem.DOM.el.classList.add('content__item--current');
bodyEl.classList.add('view-content');
}, 'showContent')
.to([this.DOM.backCtrl, this.DOM.contentNav, gridItem.contentItem.DOM.text], {
opacity: 1
}, 'showContent')
.to(gridItem.contentItem.DOM.title, {
opacity: 1,
startAt: {
y: '-100%',
scaleY: 3
},
y: '0%',
scaleY: 1
}, 'showContent')
}
/**
* Scale down the image and reveal the grid again.
*/
closeContent() {
// Current grid item
const gridItem = this.gridItemArr[this.currentGridItem];
gsap.timeline({
defaults: {
duration: 1.4,
ease: 'expo.inOut'
},
// overflow hidden
onStart: () => {
// Show all other grid items in the grid.
gsap.set(this.remainingGridItems, {opacity: 1});
bodyEl.classList.remove('oh');
},
onComplete: () => {
this.isAnimating = false;
}
})
.addLabel('start', 0)
.to([this.DOM.backCtrl, this.DOM.contentNav, gridItem.contentItem.DOM.text], {
opacity: 0
}, 'start')
.to(gridItem.contentItem.DOM.title, {
opacity: 0,
y: '-100%',
scaleY: 3
}, 'start')
.to([...this.DOM.contentNavItems].slice(this.viewportGridItems.length+1), {
y: `${gsap.utils.random(100,300)}%`,
opacity: 0,
delay: pos => -0.03*pos,
onComplete: () => bodyEl.classList.remove('view-content')
}, 'start')
.add(() => gridItem.contentItem.DOM.el.classList.remove('content__item--current'))
.set([gridItem.DOM.img.outer, this.viewportGridItemsImgOuter], {
willChange: 'transform, opacity'
}, 'start')
.to(gridItem.DOM.img.outer, {
scale: 1,
x: 0,
y: 0,
onComplete: () => {
gsap.set(gridItem.DOM.img.outer, {willChange: ''});
gsap.set([gridItem.DOM.el, gridItem.DOM.el.parentNode.parentNode], {zIndex: 1});
}
}, 'start')
.to(this.viewportGridItemsImgOuter, {
scale: 1,
x: 0,
y: 0,
stagger: pos => -0.03*pos,
onComplete: () => {
gsap.set(this.viewportGridItemsImgOuter, {willChange: ''});
}
}, 'start')
.addLabel('showGrid', 'start+=0.2')
.to([this.DOM.heading.top, this.DOM.heading.bottom], {
y: '0%',
scaleY: 1
}, 'showGrid')
.to([this.viewportGridItems.map(gridItem => gridItem.DOM.caption), gridItem.DOM.caption], {
ease: 'power4.in',
opacity: 1
}, 'showGrid')
}
/**
* Calculates the scale value to apply to the images that animate to the .content__nav area (scale down to the size of a nav area item).
* @param {Element} gridItemImageOuter - the gridItem image outer element.
* @return {Number} the scale value.
*/
getFinalScaleValue(gridItemImageOuter) {
return this.DOM.contentNavItems[0].offsetHeight / gridItemImageOuter.offsetHeight;
}
/**
* Calculates the translate value to apply to the images that animate to the .content__nav area (position it on the nav area).
* @param {Element} gridItemImageOuter - the gridItem image outer element.
* @param {Number} position - the gridItem's position.
* @return {JSON} the translation values.
*/
getFinalTranslationValue(gridItemImageOuter, position) {
const imgrect = adjustedBoundingRect(gridItemImageOuter);
const navrect = adjustedBoundingRect(this.DOM.contentNavItems[position]);
return {
x: (navrect.left + navrect.width/2) - (imgrect.left + imgrect.width/2),
y: (navrect.top + navrect.height/2) - (imgrect.top + imgrect.height/2)
};
}
/**
* Track which items are visible (inside the viewport)
* by adding/removing the 'in-view' class when scrolling.
* This will be used to animate only the ones that are visible.
*/
trackVisibleItems() {
const observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.intersectionRatio > 0) {
entry.target.classList.add('in-view');
}
else {
entry.target.classList.remove('in-view');
}
});
});
this.DOM.gridItems.forEach(item => observer.observe(item));
}
/**
* Calculates the scale and translation values to apply to the images when we click on it (scale up and center it).
* Also used to recalculate those values on resize.
* @return {JSON} the translation and scale values
*/
calcTransformImage() {
const imgrect = adjustedBoundingRect(this.gridItemArr[this.currentGridItem].DOM.img.outer);
return {
scale: winsize.height * 0.7 / imgrect.height,
x: winsize.width * 0.5 - (imgrect.left + imgrect.width/2),
y: winsize.height * 0.5 - (imgrect.top + imgrect.height/2)
};
}
}src/js/gridItem.js
/**
* Class representing a grid of items
*/
export class GridItem {
// DOM elements
DOM = {
// main element (.column__item)
el: null,
// The image element
img: {outer: null, inner: null},
// The caption
caption: null,
// The GridItem's content item id.
contentId: null,
// The ContentItem instance
contentItem: null
};
// Position on the grid.
position = -1;
/**
* Constructor.
* @param {Element} DOM_el - the .column__item element
*/
constructor(DOM_el) {
this.DOM.el = DOM_el;
this.DOM.img.outer = this.DOM.el.querySelector('.column__item-imgwrap');
this.DOM.img.inner = this.DOM.el.querySelector('.column__item-img');
this.position = Number(this.DOM.img.outer.dataset.pos) - 1;
this.DOM.caption = this.DOM.el.querySelector('figcaption');
}
}src/js/index.js
import { preloadImages } from './utils';
import { Grid } from './grid';
// Preload images then remove loader (loading class) from body
preloadImages('.column__item-img').then(() => {
document.body.classList.remove('loading');
// Initialize the grid
new Grid(document.querySelector('.columns'));
});src/js/utils.js
const imagesLoaded = require('imagesloaded');
// Preload images
const preloadImages = (selector = 'img') => {
return new Promise((resolve) => {
imagesLoaded(document.querySelectorAll(selector), {background: true}, resolve);
});
};
const calcWinsize = () => {
return { width: window.innerWidth, height: window.innerHeight };
};
const adjustedBoundingRect = el => {
var rect = el.getBoundingClientRect();
var style = getComputedStyle(el);
var tx = style.transform;
if (tx) {
var sx, sy, dx, dy;
if (tx.startsWith('matrix3d(')) {
var ta = tx.slice(9,-1).split(/, /);
sx = +ta[0];
sy = +ta[5];
dx = +ta[12];
dy = +ta[13];
} else if (tx.startsWith('matrix(')) {
var ta = tx.slice(7,-1).split(/, /);
sx = +ta[0];
sy = +ta[3];
dx = +ta[4];
dy = +ta[5];
} else {
return rect;
}
var to = style.transformOrigin;
var x = rect.x - dx - (1 - sx) * parseFloat(to);
var y = rect.y - dy - (1 - sy) * parseFloat(to.slice(to.indexOf(' ') + 1));
var w = sx ? rect.width / sx : el.offsetWidth;
var h = sy ? rect.height / sy : el.offsetHeight;
return {
x: x, y: y, width: w, height: h, top: y, right: x + w, bottom: y + h, left: x
};
} else {
return rect;
}
}
export {
preloadImages,
calcWinsize,
adjustedBoundingRect
};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
locomotive-scroll@4.1.4 — LICENSE
The MIT License (MIT)
Copyright (c) Locomotive, Inc.
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
이 장면을 만드는 원리
열에서 상세 탐색으로 옮기는 좌표 계산
화면 크기·입력·동시 작업을 고정하고 실제 렌더링 실패와 비용을 관찰합니다.
- 이 예제에서는
- Grid는 현재 보이는 항목만 상세 내비게이션으로 이동시키며 원래 이미지와 목적지의 중심 차이로 이동량을 구합니다. 선택 이미지 확대는 뷰포트 높이의 70%를 사용합니다.