Codrops 원본
On-Scroll Text Repetition Animation
텍스트 · MIT
갤러리 안에서는 화면을 벗어나거나 움직임을 멈추면 예제도 닫힙니다. 다시 재생할 때는 처음부터 시작해요.
SOURCE FILES
원본 코드 읽기
수집한 원본 소스와 실행 안내를 함께 제공합니다.
src/css/base.css
*,
*::after,
*::before {
box-sizing: border-box;
}
:root {
font-size: 15px;
}
body {
margin: 0;
--color-text: #fff;
--color-bg: #000;
--color-link: #fff;
--color-link-hover: #fff;
--font-size-s: 13vw;
--font-size-m: 16vw;
--font-size-l: 24vw;
--font-size-xl: 26vw;
--font-family: widescreen-ex, sans-serif;
--font-weight: 900;
--content-offset: 20vh;
--font-case: uppercase;
--color-rep-text: var(--color-text);
--color-rep-text-main: var(--color-text);
--color-rep-outline: var(--color-text);
--color-rep-bg: var(--color-bg);
/* Adjust these depending on your font */
--font-factor: 0.059;
--font-line: 0.745;
color: var(--color-text);
background-color: var(--color-bg);
font-family: halyard-micro, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow: hidden;
overflow-y: scroll;
}
.demo-2 {
--color-bg: #8d8e98;
--content-offset: 10vh;
--font-family: widescreen-mixed, sans-serif;
--font-size-l: 20vw;
--font-size-xl: 24vw;
}
.demo-3 {
--color-bg: #525fdc;
--content-offset: 10vh;
--color-rep-bg: transparent;
}
.demo-4 {
--color-bg: #1f1d1c;
--color-text: #d14521;
--color-rep-text: #d14521;
--content-offset: 10vh;
--font-family: bely-display, serif;
--font-weight: 400;
--font-factor: 0.059;
--font-line: 0.745;
--font-case: lowercase;
--color-rep-bg: transparent;
--font-size-xl: 34vw;
}
.demo-5 {
--color-bg: #c5c3c7;
--color-text: #b61e1e;
--color-link: #000;
--content-offset: 10vh;
--color-rep-bg: transparent;
}
/* 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;
}
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 {
padding: 1.5rem 2rem 0;
}
.frame {
text-align: center;
}
.frame__title {
margin: 0;
font-size: 1rem;
font-weight: 500;
}
.frame__links {
margin: 0.5rem 0 2rem;
}
.frame__links a:not(:last-child) {
margin-right: 1rem;
}
.hover-line,
.cda-sponsor-link {
white-space: nowrap;
overflow: hidden;
position: relative;
}
.hover-line::before,
.cda-sponsor-link::before {
content: '';
height: 1px;
width: 100%;
background: currentColor;
position: absolute;
top: 92%;
transition: transform 0.3s;
transform-origin: 0% 50%;
}
.hover-line:hover::before,
.cda-sponsor-link:hover::before {
transform: scaleX(0);
transform-origin: 100% 50%;
}
.content {
margin: var(--content-offset) 0 0 0;
display: flex;
flex-direction: column;
align-items: center;
}
.content p {
hyphens: auto;
max-width: 500px;
font-size: 1.25rem;
line-height: 1.8;
margin: 10vh auto;
}
p.footer {
padding-top: 25vh;
font-size: 1rem;
opacity: 0.5;
}
.content__title--size-s {
--size: var(--font-size-s);
}
.content__title--size-m {
--size: var(--font-size-m);
}
.content__title--size-l {
--size: var(--font-size-l);
}
.content__title--size-xl {
--size: var(--font-size-xl);
}
.content__title {
font-size: var(--size);
margin: 0;
display: grid;
font-family: var(--font-family);
font-weight: var(--font-weight);
text-transform: var(--font-case);
cursor: default;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.content__title--left {
margin-right: auto;
}
.content__title--right {
margin-left: auto;
}
.text-rep span {
color: var(--color-rep-text-main);
grid-area: 1 / 1 / 2 / 2;
background: var(--color-rep-bg);
line-height: var(--font-line);
padding-bottom: calc(var(--font-factor)* var(--size));
will-change: transform;
}
.text-rep span:not(:last-child) {
color: var(--color-rep-text);
}
.demo-2 .text-rep span,
.demo-3 .text-rep span:not(:last-child) {
-webkit-text-stroke: 1px var(--color-rep-outline);
text-stroke: 1px var(--color-rep-outline);
-webkit-text-fill-color: transparent;
text-fill-color: transparent;
color: transparent;
}
.demo-3 .text-rep span,
.demo-4 .text-rep span,
.demo-5 .text-rep span {
padding-bottom: 0;
}
@media screen and (min-width: 53em) {
.frame {
display: grid;
grid-template-columns: auto auto auto;
grid-template-areas: 'title demos demos sponsor' 'links links links links';
grid-column-gap: 3vw;
grid-row-gap: 1rem;
justify-content: space-between;
text-align: left;
}
.frame__title {
grid-area: title;
}
.frame__links {
margin: 0;
grid-area: links;
}
.frame__links--demos {
grid-area: demos;
}
}
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>Text Repetition Scroll Effect | Demo 1 | Codrops</title>
<meta name="description" content="An on-scroll animation that shows repeated fragments of a big text as seen on the website of Dr. Dabber." />
<meta name="keywords" content="on-scroll, animation, typography, text, duplication, repetition, css" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="https://use.typekit.net/fxx5dng.css">
<link rel="stylesheet" type="text/css" href="css/base.css" />
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
<script>document.documentElement.className="js";var supportsCssVars=function(){var e,t=document.createElement("style");return t.innerHTML="root: { --tmp-var: bold; }",document.head.appendChild(t),e=!!(window.CSS&&window.CSS.supports&&window.CSS.supports("font-weight","var(--tmp-var)")),t.parentNode.removeChild(t),e};supportsCssVars()||alert("Please view this demo in a modern browser that supports CSS Variables.");</script>
<script src="//tympanus.net/codrops/adpacks/analytics.js"></script>
</head>
<body class="demo-1 loading">
<main data-scroll-container>
<div class="frame">
<h1 class="frame__title">Text Repetition Scroll Effect from <a class="hover-line" href="https://experience.drdabber.com/product/stella">Dr. Dabber</a></h1>
<nav class="frame__links">
<a class="hover-line" href="http://tympanus.net/Development/LinesToLayout/">Previous demo</a>
<a class="hover-line" href="https://tympanus.net/codrops/?p=63187">Article</a>
<a class="hover-line" href="https://github.com/codrops/TextRepetitionEffect">GitHub</a>
</nav>
<nav class="frame__links frame__links--demos">
<a href="index.html" class="current">Demo 1</a>
<a class="hover-line" href="index2.html">Demo 2</a>
<a class="hover-line" href="index3.html">Demo 3</a>
<a class="hover-line" href="index4.html">Demo 4</a>
<a class="hover-line" href="index5.html">Demo 5</a>
</nav>
</div>
<div class="content">
<p>These selected cases of various forms of changes of consciousness all throw a certain light upon our case. Naef's case presents two hysteriform eclipses of memory, one of which is marked by the appearance of delusions, and the other by its long duration, contraction of the field of consciousness, and desire to wander. The peculiar associated impulses are specially clear in the cases of Proust and Mesnet. In our case the impulsive tearing up of the flowers, the digging up of the graves, form a parallel.</p>
<h2 class="content__title content__title--size-l" data-text-rep>Boca</h2>
<p>The continuity of consciousness which the patient presents in the individual attacks recalls the behaviour of the consciousness in MacNish's case; hence our case may be regarded as a transient phenomenon of alternating consciousness. The dreamlike hallucinatory content of the limited consciousness in our case does not, however, justify an unqualified assignment to this group of double consciousness. </p>
<h2 class="content__title content__title--size-s" data-text-rep>Soulmate</h2>
<p>The hallucinations in the second state show a certain creativeness which seems to be conditioned by the auto-suggestibility of this state. In Mesnet's case we noticed the appearance of hallucinatory processes from simple stimulation of touch. The patient's subconsciousness employs simple perceptions for the automatic construction of complicated scenes which then take possession of the limited consciousness. A somewhat similar view must be taken about our patient's hallucinations; at least, the external conditions which gave rise to the appearance of the hallucinations seem to strengthen our supposition.</p>
<h2 class="content__title content__title--size-m content__title--left" data-text-rep>Maui</h2>
<h2 class="content__title content__title--size-m content__title--right" data-text-rep>Wowie</h2>
<p>The walk in the cemetery induces the vision of the skeletons; the meeting with the three boys arouses the hallucination of children buried alive whose voices the patient hears at night-time.[12] She arrived at the cemetery in a somnambulic state, which on this occasion was specially intense in consequence of her having taken alcohol. She performed actions almost instinctively about which her subconsciousness nevertheless did receive certain impressions.</p>
<h2 class="content__title content__title--size-xl" data-text-rep>Kush</h2>
<p>These lapses of memory, which at first seem without content, gain a content by means of accidental auto-suggestion, and this content builds itself up automatically to a certain extent. It achieves no further development, probably on account of the improvement now beginning, and finally it disappears altogether as recovery sets in. Binet and Féré have made numerous experiments on the implanting of suggestions in states of partial sleep.</p>
<p class="footer">From <a class="hover-line" href="https://www.gutenberg.org/files/48225/48225-h/48225-h.htm">Collected Papers on Analytical Psychology</a> by C. G. Jung</p>
<p>
<a class="hover-line" href="index2.html" class="current">Demo 2</a>
</p>
</div>
</main>
<script src="https://tympanus.net/codrops/adpacks/cda_sponsor.js"></script>
<script type="module" src="js/demo1/index.js"></script>
</body>
</html>
함께 쓰는 파일 18개 보기
src/index2.html
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Text Repetition Scroll Effect | Demo 2 | Codrops</title>
<meta name="description" content="An on-scroll animation that shows repeated fragments of a big text as seen on the website of Dr. Dabber." />
<meta name="keywords" content="on-scroll, animation, typography, text, duplication, repetition, css" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="https://use.typekit.net/fxx5dng.css">
<link rel="stylesheet" type="text/css" href="css/base.css" />
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
<script>document.documentElement.className="js";var supportsCssVars=function(){var e,t=document.createElement("style");return t.innerHTML="root: { --tmp-var: bold; }",document.head.appendChild(t),e=!!(window.CSS&&window.CSS.supports&&window.CSS.supports("font-weight","var(--tmp-var)")),t.parentNode.removeChild(t),e};supportsCssVars()||alert("Please view this demo in a modern browser that supports CSS Variables.");</script>
<script src="//tympanus.net/codrops/adpacks/analytics.js"></script>
</head>
<body class="demo-2 loading">
<main data-scroll-container>
<div class="frame">
<h1 class="frame__title">Text Repetition Scroll Effect from <a class="hover-line" href="https://experience.drdabber.com/product/stella">Dr. Dabber</a></h1>
<nav class="frame__links">
<a class="hover-line" href="http://tympanus.net/Development/LinesToLayout/">Previous demo</a>
<a class="hover-line" href="https://tympanus.net/codrops/?p=63187">Article</a>
<a class="hover-line" href="https://github.com/codrops/TextRepetitionEffect">GitHub</a>
</nav>
<nav class="frame__links frame__links--demos">
<a class="hover-line" href="index.html">Demo 1</a>
<a href="index2.html" class="current">Demo 2</a>
<a class="hover-line" href="index3.html">Demo 3</a>
<a class="hover-line" href="index4.html">Demo 4</a>
<a class="hover-line" href="index5.html">Demo 5</a>
</nav>
</div>
<div class="content">
<h2 class="content__title content__title--size-l" data-text-rep>Good</h2>
<p>We thus find in our subject, at a time when there was nothing to indicate the later phenomena, rudimentary automatisms, fragments of dream manifestations, which imply in[48] themselves the possibility that some day more than one association would creep in between the perception of the dispersed attention and consciousness. The misreading shows us, moreover, a certain automatic independence of the psychical elements. </p>
<h2 class="content__title content__title--size-s" data-text-rep>Bonitama</h2>
<p>This occasionally expands to a more or less fleeting dispersion of attention, although with very slight results which are never in any way striking or suspicious; this dispersedness approximates to that of the physiological dream. The misreading can be thus conceived as a prodromal symptom of the later events; especially as its psychology is prototypical for the mechanism of somnambulic dreams, which are indeed nothing but a many-sided multiplication and manifold variation of the elementary processes reviewed above. </p>
<h2 class="content__title content__title--size-l" data-text-rep>Osho</h2>
<p>I never succeeded in demonstrating during my observations similar rudimentary automatisms. It would seem that in course of time the states of dispersed attention, to a certain extent beneath the surface of consciousness, at first of low degree have grown into these remarkable somnambulic attacks; hence they disappeared during the waking state, which was free from attacks.</p>
<h2 class="content__title content__title--size-m content__title--left" data-text-rep>Full</h2>
<h2 class="content__title content__title--size-m content__title--right" data-text-rep>Moon</h2>
<p>So far as concerns the development of the patient's character, beyond a certain not very extensive ripening, no remarkable change could be demonstrated during the observations lasting nearly two years. More remarkable is the fact that in the two years since the cessation (complete?) of the somnambulic attacks, a considerable change in character has taken place. We shall have occasion later on to speak of the importance of this observation.</p>
<h2 class="content__title content__title--size-xl" data-text-rep>Bone</h2>
<p>Closer observation discloses a far-reaching alteration of the entire character. She is now serious, dignified; when she speaks her subject is always an extremely serious one. In this condition she can talk so seriously, forcibly and convincingly, that one is tempted to ask oneself if this is really a girl of fifteen and a half. One has the impression of a mature woman possessed of considerable dramatic talent. The reason for this seriousness, this solemnity of behaviour, is given in her explanation that at these times she stands at the frontier of this world and the other, and associates just as truly with the spirits of the dead as with living people. </p>
<p class="footer">From <a class="hover-line" href="https://www.gutenberg.org/files/48225/48225-h/48225-h.htm">Collected Papers on Analytical Psychology</a> by C. G. Jung</p>
<p>
<a class="hover-line" href="index3.html" class="current">Demo 3</a>
</p>
</div>
</main>
<script src="https://tympanus.net/codrops/adpacks/cda_sponsor.js"></script>
<script type="module" src="js/demo2/index.js"></script>
</body>
</html>
src/index3.html
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Text Repetition Scroll Effect | Demo 3 | Codrops</title>
<meta name="description" content="An on-scroll animation that shows repeated fragments of a big text as seen on the website of Dr. Dabber." />
<meta name="keywords" content="on-scroll, animation, typography, text, duplication, repetition, css" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="https://use.typekit.net/fxx5dng.css">
<link rel="stylesheet" type="text/css" href="css/base.css" />
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
<script>document.documentElement.className="js";var supportsCssVars=function(){var e,t=document.createElement("style");return t.innerHTML="root: { --tmp-var: bold; }",document.head.appendChild(t),e=!!(window.CSS&&window.CSS.supports&&window.CSS.supports("font-weight","var(--tmp-var)")),t.parentNode.removeChild(t),e};supportsCssVars()||alert("Please view this demo in a modern browser that supports CSS Variables.");</script>
<script src="//tympanus.net/codrops/adpacks/analytics.js"></script>
</head>
<body class="demo-3 loading">
<main data-scroll-container>
<div class="frame">
<h1 class="frame__title">Text Repetition Scroll Effect from <a class="hover-line" href="https://experience.drdabber.com/product/stella">Dr. Dabber</a></h1>
<nav class="frame__links">
<a class="hover-line" href="http://tympanus.net/Development/LinesToLayout/">Previous demo</a>
<a class="hover-line" href="https://tympanus.net/codrops/?p=63187">Article</a>
<a class="hover-line" href="https://github.com/codrops/TextRepetitionEffect">GitHub</a>
</nav>
<nav class="frame__links frame__links--demos">
<a class="hover-line" href="index.html">Demo 1</a>
<a class="hover-line" href="index2.html">Demo 2</a>
<a href="index3.html" class="current">Demo 3</a>
<a class="hover-line" href="index4.html">Demo 4</a>
<a class="hover-line" href="index5.html">Demo 5</a>
</nav>
</div>
<div class="content">
<p>These selected cases of various forms of changes of consciousness all throw a certain light upon our case. Naef's case presents two hysteriform eclipses of memory, one of which is marked by the appearance of delusions, and the other by its long duration, contraction of the field of consciousness, and desire to wander. The peculiar associated impulses are specially clear in the cases of Proust and Mesnet. In our case the impulsive tearing up of the flowers, the digging up of the graves, form a parallel.</p>
<h2 class="content__title content__title--size-l" data-text-rep>Musa</h2>
<p>The continuity of consciousness which the patient presents in the individual attacks recalls the behaviour of the consciousness in MacNish's case; hence our case may be regarded as a transient phenomenon of alternating consciousness. The dreamlike hallucinatory content of the limited consciousness in our case does not, however, justify an unqualified assignment to this group of double consciousness. </p>
<h2 class="content__title content__title--size-s" data-text-rep>Comoxo</h2>
<p>The hallucinations in the second state show a certain creativeness which seems to be conditioned by the auto-suggestibility of this state. In Mesnet's case we noticed the appearance of hallucinatory processes from simple stimulation of touch. The patient's subconsciousness employs simple perceptions for the automatic construction of complicated scenes which then take possession of the limited consciousness. A somewhat similar view must be taken about our patient's hallucinations; at least, the external conditions which gave rise to the appearance of the hallucinations seem to strengthen our supposition.</p>
<h2 class="content__title content__title--size-m content__title--left" data-text-rep>Freak</h2>
<h2 class="content__title content__title--size-m content__title--right" data-text-rep>Reason</h2>
<p>The walk in the cemetery induces the vision of the skeletons; the meeting with the three boys arouses the hallucination of children buried alive whose voices the patient hears at night-time.[12] She arrived at the cemetery in a somnambulic state, which on this occasion was specially intense in consequence of her having taken alcohol. She performed actions almost instinctively about which her subconsciousness nevertheless did receive certain impressions.</p>
<h2 class="content__title content__title--size-xl" data-text-rep>Soul</h2>
<p>These lapses of memory, which at first seem without content, gain a content by means of accidental auto-suggestion, and this content builds itself up automatically to a certain extent. It achieves no further development, probably on account of the improvement now beginning, and finally it disappears altogether as recovery sets in. Binet and Féré have made numerous experiments on the implanting of suggestions in states of partial sleep.</p>
<p class="footer">From <a class="hover-line" href="https://www.gutenberg.org/files/48225/48225-h/48225-h.htm">Collected Papers on Analytical Psychology</a> by C. G. Jung</p>
<p>
<a class="hover-line" href="index4.html" class="current">Demo 4</a>
</p>
</div>
</main>
<script src="https://tympanus.net/codrops/adpacks/cda_sponsor.js"></script>
<script type="module" src="js/demo3/index.js"></script>
</body>
</html>
src/index4.html
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Text Repetition Scroll Effect | Demo 4 | Codrops</title>
<meta name="description" content="An on-scroll animation that shows repeated fragments of a big text as seen on the website of Dr. Dabber." />
<meta name="keywords" content="on-scroll, animation, typography, text, duplication, repetition, css" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="https://use.typekit.net/fxx5dng.css">
<link rel="stylesheet" type="text/css" href="css/base.css" />
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
<script>document.documentElement.className="js";var supportsCssVars=function(){var e,t=document.createElement("style");return t.innerHTML="root: { --tmp-var: bold; }",document.head.appendChild(t),e=!!(window.CSS&&window.CSS.supports&&window.CSS.supports("font-weight","var(--tmp-var)")),t.parentNode.removeChild(t),e};supportsCssVars()||alert("Please view this demo in a modern browser that supports CSS Variables.");</script>
<script src="//tympanus.net/codrops/adpacks/analytics.js"></script>
</head>
<body class="demo-4 loading">
<main data-scroll-container>
<div class="frame">
<h1 class="frame__title">Text Repetition Scroll Effect from <a class="hover-line" href="https://experience.drdabber.com/product/stella">Dr. Dabber</a></h1>
<nav class="frame__links">
<a class="hover-line" href="http://tympanus.net/Development/LinesToLayout/">Previous demo</a>
<a class="hover-line" href="https://tympanus.net/codrops/?p=63187">Article</a>
<a class="hover-line" href="https://github.com/codrops/TextRepetitionEffect">GitHub</a>
</nav>
<nav class="frame__links frame__links--demos">
<a class="hover-line" href="index.html">Demo 1</a>
<a class="hover-line" href="index2.html">Demo 2</a>
<a class="hover-line" href="index3.html">Demo 3</a>
<a href="index4.html" class="current">Demo 4</a>
<a class="hover-line" href="index5.html">Demo 5</a>
</nav>
</div>
<div class="content">
<p>So far as concerns the development of the patient's character, beyond a certain not very extensive ripening, no remarkable change could be demonstrated during the observations lasting nearly two years. More remarkable is the fact that in the two years since the cessation (complete?) of the somnambulic attacks, a considerable change in character has taken place. We shall have occasion later on to speak of the importance of this observation.</p>
<h2 class="content__title content__title--size-l" data-text-rep>bogota</h2>
<p>The continuity of consciousness which the patient presents in the individual attacks recalls the behaviour of the consciousness in MacNish's case; hence our case may be regarded as a transient phenomenon of alternating consciousness. The dreamlike hallucinatory content of the limited consciousness in our case does not, however, justify an unqualified assignment to this group of double consciousness. </p>
<h2 class="content__title content__title--size-s" data-text-rep>Barranquilla</h2>
<p>The hallucinations in the second state show a certain creativeness which seems to be conditioned by the auto-suggestibility of this state. In Mesnet's case we noticed the appearance of hallucinatory processes from simple stimulation of touch. The patient's subconsciousness employs simple perceptions for the automatic construction of complicated scenes which then take possession of the limited consciousness. A somewhat similar view must be taken about our patient's hallucinations; at least, the external conditions which gave rise to the appearance of the hallucinations seem to strengthen our supposition.</p>
<h2 class="content__title content__title--size-s" data-text-rep>Santa Marta</h2>
<p>These lapses of memory, which at first seem without content, gain a content by means of accidental auto-suggestion, and this content builds itself up automatically to a certain extent. It achieves no further development, probably on account of the improvement now beginning, and finally it disappears altogether as recovery sets in. Binet and Féré have made numerous experiments on the implanting of suggestions in states of partial sleep.</p>
<h2 class="content__title content__title--size-xl" data-text-rep>cali</h2>
<p class="footer">From <a class="hover-line" href="https://www.gutenberg.org/files/48225/48225-h/48225-h.htm">Collected Papers on Analytical Psychology</a> by C. G. Jung</p>
<p>
<a class="hover-line" href="index5.html" class="current">Demo 5</a>
</p>
</div>
</main>
<script src="https://tympanus.net/codrops/adpacks/cda_sponsor.js"></script>
<script type="module" src="js/demo4/index.js"></script>
</body>
</html>
src/index5.html
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Text Repetition Scroll Effect | Demo 5 | Codrops</title>
<meta name="description" content="An on-scroll animation that shows repeated fragments of a big text as seen on the website of Dr. Dabber." />
<meta name="keywords" content="on-scroll, animation, typography, text, duplication, repetition, css" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="https://use.typekit.net/fxx5dng.css">
<link rel="stylesheet" type="text/css" href="css/base.css" />
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
<script>document.documentElement.className="js";var supportsCssVars=function(){var e,t=document.createElement("style");return t.innerHTML="root: { --tmp-var: bold; }",document.head.appendChild(t),e=!!(window.CSS&&window.CSS.supports&&window.CSS.supports("font-weight","var(--tmp-var)")),t.parentNode.removeChild(t),e};supportsCssVars()||alert("Please view this demo in a modern browser that supports CSS Variables.");</script>
<script src="//tympanus.net/codrops/adpacks/analytics.js"></script>
</head>
<body class="demo-5 loading">
<main data-scroll-container>
<div class="frame">
<h1 class="frame__title">Text Repetition Scroll Effect from <a class="hover-line" href="https://experience.drdabber.com/product/stella">Dr. Dabber</a></h1>
<nav class="frame__links">
<a class="hover-line" href="http://tympanus.net/Development/LinesToLayout/">Previous demo</a>
<a class="hover-line" href="https://tympanus.net/codrops/?p=63187">Article</a>
<a class="hover-line" href="https://github.com/codrops/TextRepetitionEffect">GitHub</a>
</nav>
<nav class="frame__links frame__links--demos">
<a class="hover-line" href="index.html">Demo 1</a>
<a class="hover-line" href="index2.html">Demo 2</a>
<a class="hover-line" href="index3.html">Demo 3</a>
<a class="hover-line" href="index4.html">Demo 4</a>
<a href="index5.html" class="current">Demo 5</a>
</nav>
</div>
<div class="content">
<p>Closer observation discloses a far-reaching alteration of the entire character. She is now serious, dignified; when she speaks her subject is always an extremely serious one. In this condition she can talk so seriously, forcibly and convincingly, that one is tempted to ask oneself if this is really a girl of fifteen and a half. One has the impression of a mature woman possessed of considerable dramatic talent. The reason for this seriousness, this solemnity of behaviour, is given in her explanation that at these times she stands at the frontier of this world and the other, and associates just as truly with the spirits of the dead as with living people. </p>
<h2 class="content__title content__title--size-l" data-text-rep>ozra</h2>
<p>The continuity of consciousness which the patient presents in the individual attacks recalls the behaviour of the consciousness in MacNish's case; hence our case may be regarded as a transient phenomenon of alternating consciousness. The dreamlike hallucinatory content of the limited consciousness in our case does not, however, justify an unqualified assignment to this group of double consciousness. </p>
<h2 class="content__title content__title--size-s" data-text-rep>horizont</h2>
<p>The hallucinations in the second state show a certain creativeness which seems to be conditioned by the auto-suggestibility of this state. In Mesnet's case we noticed the appearance of hallucinatory processes from simple stimulation of touch. The patient's subconsciousness employs simple perceptions for the automatic construction of complicated scenes which then take possession of the limited consciousness. A somewhat similar view must be taken about our patient's hallucinations; at least, the external conditions which gave rise to the appearance of the hallucinations seem to strengthen our supposition.</p>
<h2 class="content__title content__title--size-m content__title--left" data-text-rep>good</h2>
<h2 class="content__title content__title--size-m content__title--right" data-text-rep>vibes</h2>
<p>The walk in the cemetery induces the vision of the skeletons; the meeting with the three boys arouses the hallucination of children buried alive whose voices the patient hears at night-time. She arrived at the cemetery in a somnambulic state, which on this occasion was specially intense in consequence of her having taken alcohol. She performed actions almost instinctively about which her subconsciousness nevertheless did receive certain impressions.</p>
<h2 class="content__title content__title--size-xl" data-text-rep>Babo</h2>
<p>These lapses of memory, which at first seem without content, gain a content by means of accidental auto-suggestion, and this content builds itself up automatically to a certain extent. It achieves no further development, probably on account of the improvement now beginning, and finally it disappears altogether as recovery sets in. Binet and Féré have made numerous experiments on the implanting of suggestions in states of partial sleep.</p>
<p class="footer">From <a class="hover-line" href="https://www.gutenberg.org/files/48225/48225-h/48225-h.htm">Collected Papers on Analytical Psychology</a> by C. G. Jung</p>
<p>
<a class="hover-line" href="index.html" class="current">Demo 1</a>
</p>
</div>
</main>
<script src="https://tympanus.net/codrops/adpacks/cda_sponsor.js"></script>
<script type="module" src="js/demo5/index.js"></script>
</body>
</html>
src/js/demo1/index.js
import { preloadFonts } from '../utils';
import { RepeatTextScrollFx } from './repeatTextScrollFx';
// Preload images and fonts and remove loader
preloadFonts('fxx5dng').then(() => {
// Apply the effect on these elements
document.querySelectorAll('[data-text-rep]').forEach(textEl => {
new RepeatTextScrollFx(textEl);
});
document.body.classList.remove('loading');
});src/js/demo1/repeatTextScrollFx.js
import { getHeight } from '../utils';
import { gsap } from 'gsap';
/**
* Class representing an element with multiple text child elements that translate up/down when scrolling
*/
export class RepeatTextScrollFx {
// DOM elements
DOM = {
// main element ([data-text-rep])
el: null,
// all text spans except the last one (this will be the centered one and doesn't translate
words: null,
}
totalWords = 9;
tyIncrement = 12;
delayIncrement = 0.1;
scrollTimeline;
observer;
/**
* Constructor.
* @param {NodeList} Dom_el - main element ([data-text-rep])
*/
constructor(Dom_el) {
this.DOM.el = Dom_el;
this.layout();
this.setBoundaries();
this.createScrollTimeline();
this.createObserver();
window.addEventListener('resize', () => this.setBoundaries());
}
/**
* Creates the text spans inside the main element
*/
layout() {
const halfWordsCount = Math.floor(this.totalWords/2);
let innerHTML = '';
for (let i = 0; i < this.totalWords; ++i) {
let ty;
let delay;
if ( i === this.totalWords-1 ) {
ty = 0;
delay = 0;
}
else if ( i < halfWordsCount ) {
ty = halfWordsCount*this.tyIncrement-this.tyIncrement*i;
delay = this.delayIncrement*(halfWordsCount-i)-this.delayIncrement
}
else {
ty = -1*(halfWordsCount*this.tyIncrement-(i-halfWordsCount)*this.tyIncrement);
delay = this.delayIncrement*(halfWordsCount- (i-halfWordsCount) )-this.delayIncrement
}
innerHTML += `<span data-delay="${delay}" data-ty="${ty}">${this.DOM.el.innerHTML}</span>`;
}
this.DOM.el.innerHTML = innerHTML;
this.DOM.el.classList.add('text-rep');
this.DOM.words = [...this.DOM.el.querySelectorAll('span')].slice(0, -1);
}
/**
* sets the padding bottom and margin top given the amount that the words will translate up/down
*/
setBoundaries() {
// Set up the margin top and padding bottom values
const paddingBottomMarginTop = getHeight(this.DOM.el) * Math.floor(this.totalWords/2) * this.tyIncrement/100;
gsap.set(this.DOM.el, {
marginTop: paddingBottomMarginTop,
paddingBottom: paddingBottomMarginTop
});
}
/**
* gsap animation timeline
* translates the text spans when the element enters the viewport
*/
createScrollTimeline() {
this.scrollTimeline = gsap.timeline({paused: true})
.to(this.DOM.words, {
duration: 1,
ease: 'power1',
yPercent: (_,target) => target.dataset.ty,
delay: (_,target) => target.dataset.delay
})
}
/**
* Intersection Observer
* Updates the timeline progress when the element is in the viewport
*/
createObserver() {
const observerOptions = {
root: null,
rootMargin: '0px 0px',
threshold: 0
};
// credits: from https://medium.com/elegant-seagulls/parallax-and-scroll-triggered-animations-with-the-intersection-observer-api-and-gsap3-53b58c80b2fa
this.observer = new IntersectionObserver(entry => {
if (entry[0].intersectionRatio > 0) {
if ( !this.isLoaded ) {
this.isLoaded = true;
}
gsap.ticker.add(this.progressTween);
}
else {
if ( this.isLoaded ) {
gsap.ticker.remove(this.progressTween);
}
else {
this.isLoaded = true;
// add and remove immediately
gsap.ticker.add(this.progressTween, true);
}
}
}, observerOptions);
this.progressTween = () => {
// Get scroll distance to bottom of viewport.
const scrollPosition = (window.scrollY + window.innerHeight);
// Get element's position relative to bottom of viewport.
const elPosition = (scrollPosition - this.DOM.el.offsetTop);
// Set desired duration.
const durationDistance = (window.innerHeight + this.DOM.el.offsetHeight);
// Calculate tween progresss.
const currentProgress = (elPosition / durationDistance);
// Set progress of gsap timeline.
this.scrollTimeline.progress(currentProgress);
}
this.observer.observe(this.DOM.el);
}
}src/js/demo2/index.js
import { preloadFonts } from '../utils';
import { RepeatTextScrollFx } from './repeatTextScrollFx';
// Preload images and fonts and remove loader
preloadFonts('fxx5dng').then(() => {
// Apply the effect on these elements
document.querySelectorAll('[data-text-rep]').forEach(textEl => {
new RepeatTextScrollFx(textEl);
});
document.body.classList.remove('loading');
});src/js/demo2/repeatTextScrollFx.js
import { getHeight } from '../utils';
import { gsap } from 'gsap';
/**
* Class representing an element with multiple text child elements that translate up/down when scrolling
*/
export class RepeatTextScrollFx {
// DOM elements
DOM = {
// main element ([data-text-rep])
el: null,
// all text spans except the last one (this will be the centered one and doesn't translate
words: null,
}
totalWords = 9;
tyIncrement = 14;
delayIncrement = 0.08;
scrollTimeline;
observer;
/**
* Constructor.
* @param {NodeList} Dom_el - main element ([data-text-rep])
*/
constructor(Dom_el) {
this.DOM.el = Dom_el;
this.layout();
this.setBoundaries();
this.createScrollTimeline();
this.createObserver();
window.addEventListener('resize', () => this.setBoundaries());
}
/**
* Creates the text spans inside the main element
*/
layout() {
const halfWordsCount = Math.floor(this.totalWords/2);
let innerHTML = '';
for (let i = 0; i < this.totalWords; ++i) {
let ty;
let delay;
if ( i === this.totalWords-1 ) {
ty = 0;
delay = 0;
}
else if ( i < halfWordsCount ) {
ty = halfWordsCount*this.tyIncrement-this.tyIncrement*i;
delay = this.delayIncrement*(halfWordsCount-i)-this.delayIncrement
}
else {
ty = -1*(halfWordsCount*this.tyIncrement-(i-halfWordsCount)*this.tyIncrement);
delay = this.delayIncrement*(halfWordsCount- (i-halfWordsCount) )-this.delayIncrement
}
innerHTML += `<span data-delay="${delay}" data-ty="${ty}">${this.DOM.el.innerHTML}</span>`;
}
this.DOM.el.innerHTML = innerHTML;
this.DOM.el.classList.add('text-rep');
this.DOM.words = [...this.DOM.el.querySelectorAll('span')].slice(0, -1);
}
/**
* sets the padding bottom and margin top given the amount that the words will translate up/down
*/
setBoundaries() {
// Set up the margin top and padding bottom values
const paddingBottomMarginTop = getHeight(this.DOM.el) * Math.floor(this.totalWords/2) * this.tyIncrement/100;
gsap.set(this.DOM.el, {
marginTop: paddingBottomMarginTop,
paddingBottom: paddingBottomMarginTop
});
}
/**
* gsap animation timeline
* translates the text spans when the element enters the viewport
*/
createScrollTimeline() {
this.scrollTimeline = gsap.timeline({paused: true})
.to(this.DOM.words, {
duration: 1,
ease: 'none',
yPercent: (_,target) => target.dataset.ty,
delay: (_,target) => target.dataset.delay
}, 0)
.to(this.DOM.words, {
duration: 1,
ease: 'none',
yPercent: 0,
delay: (_,target) => target.dataset.delay
});
}
/**
* Intersection Observer
* Updates the timeline progress when the element is in the viewport
*/
createObserver() {
const observerOptions = {
root: null,
rootMargin: '0px 0px',
threshold: 0
};
// credits: from https://medium.com/elegant-seagulls/parallax-and-scroll-triggered-animations-with-the-intersection-observer-api-and-gsap3-53b58c80b2fa
this.observer = new IntersectionObserver(entry => {
if (entry[0].intersectionRatio > 0) {
if ( !this.isLoaded ) {
this.isLoaded = true;
}
gsap.ticker.add(this.progressTween);
}
else {
if ( this.isLoaded ) {
gsap.ticker.remove(this.progressTween);
}
else {
this.isLoaded = true;
// add and remove immediately
gsap.ticker.add(this.progressTween, true);
}
}
}, observerOptions);
this.progressTween = () => {
// Get scroll distance to bottom of viewport.
const scrollPosition = (window.scrollY + window.innerHeight);
// Get element's position relative to bottom of viewport.
const elPosition = (scrollPosition - this.DOM.el.offsetTop);
// Set desired duration.
const durationDistance = (window.innerHeight + this.DOM.el.offsetHeight);
// Calculate tween progresss.
const currentProgress = (elPosition / durationDistance);
// Set progress of gsap timeline.
this.scrollTimeline.progress(currentProgress);
}
this.observer.observe(this.DOM.el);
}
}src/js/demo3/index.js
import { preloadFonts } from '../utils';
import { RepeatTextScrollFx } from './repeatTextScrollFx';
// Preload images and fonts and remove loader
preloadFonts('fxx5dng').then(() => {
// Apply the effect on these elements
document.querySelectorAll('[data-text-rep]').forEach(textEl => {
new RepeatTextScrollFx(textEl);
});
document.body.classList.remove('loading');
});src/js/demo3/repeatTextScrollFx.js
import { getHeight } from '../utils';
import { gsap } from 'gsap';
/**
* Class representing an element with multiple text child elements that translate up/down when scrolling
*/
export class RepeatTextScrollFx {
// DOM elements
DOM = {
// main element ([data-text-rep])
el: null,
// all text spans except the last one (this will be the centered one and doesn't translate
words: null,
}
totalWords = 9;
tyIncrement = 14;
delayIncrement = 0.08;
scrollTimeline;
observer;
/**
* Constructor.
* @param {NodeList} Dom_el - main element ([data-text-rep])
*/
constructor(Dom_el) {
this.DOM.el = Dom_el;
this.layout();
this.setBoundaries();
this.createScrollTimeline();
this.createObserver();
window.addEventListener('resize', () => this.setBoundaries());
}
/**
* Creates the text spans inside the main element
*/
layout() {
const halfWordsCount = Math.floor(this.totalWords/2);
let innerHTML = '';
for (let i = 0; i < this.totalWords; ++i) {
let ty;
let delay;
if ( i === this.totalWords-1 ) {
ty = 0;
delay = 0;
}
else if ( i < halfWordsCount ) {
ty = halfWordsCount*this.tyIncrement-this.tyIncrement*i;
delay = this.delayIncrement*(halfWordsCount-i)-this.delayIncrement
}
else {
ty = -1*(halfWordsCount*this.tyIncrement-(i-halfWordsCount)*this.tyIncrement);
delay = this.delayIncrement*(halfWordsCount- (i-halfWordsCount) )-this.delayIncrement
}
innerHTML += `<span data-delay="${delay}" data-ty="${ty}">${this.DOM.el.innerHTML}</span>`;
}
this.DOM.el.innerHTML = innerHTML;
this.DOM.el.classList.add('text-rep');
this.DOM.words = [...this.DOM.el.querySelectorAll('span')].slice(0, -1);
}
/**
* sets the padding bottom and margin top given the amount that the words will translate up/down
*/
setBoundaries() {
// Set up the margin top and padding bottom values
const paddingBottomMarginTop = getHeight(this.DOM.el) * Math.floor(this.totalWords/2) * this.tyIncrement/100;
gsap.set(this.DOM.el, {
marginTop: paddingBottomMarginTop,
paddingBottom: paddingBottomMarginTop
});
}
/**
* gsap animation timeline
* translates the text spans when the element enters the viewport
*/
createScrollTimeline() {
this.scrollTimeline = gsap.timeline({paused: true})
.to(this.DOM.words, {
duration: 1,
ease: 'none',
startAt: {opacity: 0},
opacity: 1,
yPercent: (_,target) => target.dataset.ty,
delay: (_,target) => target.dataset.delay
}, 0)
.to(this.DOM.words, {
duration: 1,
ease: 'none',
opacity: 0,
yPercent: 0,
delay: (_,target) => target.dataset.delay
});
}
/**
* Intersection Observer
* Updates the timeline progress when the element is in the viewport
*/
createObserver() {
const observerOptions = {
root: null,
rootMargin: '0px 0px',
threshold: 0
};
// credits: from https://medium.com/elegant-seagulls/parallax-and-scroll-triggered-animations-with-the-intersection-observer-api-and-gsap3-53b58c80b2fa
this.observer = new IntersectionObserver(entry => {
if (entry[0].intersectionRatio > 0) {
if ( !this.isLoaded ) {
this.isLoaded = true;
}
gsap.ticker.add(this.progressTween);
}
else {
if ( this.isLoaded ) {
gsap.ticker.remove(this.progressTween);
}
else {
this.isLoaded = true;
// add and remove immediately
gsap.ticker.add(this.progressTween, true);
}
}
}, observerOptions);
this.progressTween = () => {
// Get scroll distance to bottom of viewport.
const scrollPosition = (window.scrollY + window.innerHeight);
// Get element's position relative to bottom of viewport.
const elPosition = (scrollPosition - this.DOM.el.offsetTop);
// Set desired duration.
const durationDistance = (window.innerHeight + this.DOM.el.offsetHeight);
// Calculate tween progresss.
const currentProgress = (elPosition / durationDistance);
// Set progress of gsap timeline.
this.scrollTimeline.progress(currentProgress);
}
this.observer.observe(this.DOM.el);
}
}src/js/demo4/index.js
import { preloadFonts } from '../utils';
import { RepeatTextScrollFx } from './repeatTextScrollFx';
// Preload images and fonts and remove loader
preloadFonts('fxx5dng').then(() => {
// Apply the effect on these elements
document.querySelectorAll('[data-text-rep]').forEach(textEl => {
new RepeatTextScrollFx(textEl);
});
document.body.classList.remove('loading');
});src/js/demo4/repeatTextScrollFx.js
import { getHeight } from '../utils';
import { gsap } from 'gsap';
/**
* Class representing an element with multiple text child elements that translate up/down when scrolling
*/
export class RepeatTextScrollFx {
// DOM elements
DOM = {
// main element ([data-text-rep])
el: null,
// all text spans except the last one (this will be the centered one and doesn't translate
words: null,
}
totalWords = 7;
tyIncrement = 40;
delayIncrement = 0.05;
scrollTimeline;
observer;
/**
* Constructor.
* @param {NodeList} Dom_el - main element ([data-text-rep])
*/
constructor(Dom_el) {
this.DOM.el = Dom_el;
this.layout();
this.setBoundaries();
this.createScrollTimeline();
this.createObserver();
window.addEventListener('resize', () => this.setBoundaries());
}
/**
* Creates the text spans inside the main element
*/
layout() {
const halfWordsCount = Math.floor(this.totalWords/2);
let innerHTML = '';
for (let i = 0; i < this.totalWords; ++i) {
let ty;
let delay;
if ( i === this.totalWords-1 ) {
ty = 0;
delay = 0;
}
else if ( i < halfWordsCount ) {
ty = halfWordsCount*this.tyIncrement-this.tyIncrement*i;
delay = this.delayIncrement*(halfWordsCount-i)-this.delayIncrement
}
else {
ty = -1*(halfWordsCount*this.tyIncrement-(i-halfWordsCount)*this.tyIncrement);
delay = this.delayIncrement*(halfWordsCount- (i-halfWordsCount) )-this.delayIncrement
}
innerHTML += `<span data-delay="${delay}" data-ty="${ty}">${this.DOM.el.innerHTML}</span>`;
}
this.DOM.el.innerHTML = innerHTML;
this.DOM.el.classList.add('text-rep');
this.DOM.words = [...this.DOM.el.querySelectorAll('span')].slice(0, -1);
}
/**
* sets the padding bottom and margin top given the amount that the words will translate up/down
*/
setBoundaries() {
// Set up the margin top and padding bottom values
const paddingBottomMarginTop = getHeight(this.DOM.el) * Math.floor(this.totalWords/2) * this.tyIncrement/100;
gsap.set(this.DOM.el, {
marginTop: paddingBottomMarginTop,
paddingBottom: paddingBottomMarginTop
});
}
/**
* gsap animation timeline
* translates the text spans when the element enters the viewport
*/
createScrollTimeline() {
this.scrollTimeline = gsap.timeline({paused: true})
.to(this.DOM.words, {
duration: 1,
ease: 'sine.inOut',
yPercent: (_,target) => target.dataset.ty,
xPercent: (_,target) => target.dataset.ty*.1,
opacity: 0,
delay: (_,target) => target.dataset.delay
})
}
/**
* Intersection Observer
* Updates the timeline progress when the element is in the viewport
*/
createObserver() {
const observerOptions = {
root: null,
rootMargin: '0px 0px',
threshold: 0
};
// credits: from https://medium.com/elegant-seagulls/parallax-and-scroll-triggered-animations-with-the-intersection-observer-api-and-gsap3-53b58c80b2fa
this.observer = new IntersectionObserver(entry => {
if (entry[0].intersectionRatio > 0) {
if ( !this.isLoaded ) {
this.isLoaded = true;
}
gsap.ticker.add(this.progressTween);
}
else {
if ( this.isLoaded ) {
gsap.ticker.remove(this.progressTween);
}
else {
this.isLoaded = true;
// add and remove immediately
gsap.ticker.add(this.progressTween, true);
}
}
}, observerOptions);
this.progressTween = () => {
// Get scroll distance to bottom of viewport.
const scrollPosition = (window.scrollY + window.innerHeight);
// Get element's position relative to bottom of viewport.
const elPosition = (scrollPosition - this.DOM.el.offsetTop);
// Set desired duration.
const durationDistance = (window.innerHeight + this.DOM.el.offsetHeight);
// Calculate tween progresss.
const currentProgress = (elPosition / durationDistance);
// Set progress of gsap timeline.
this.scrollTimeline.progress(currentProgress);
}
this.observer.observe(this.DOM.el);
}
}src/js/demo5/index.js
import { preloadFonts } from '../utils';
import { RepeatTextScrollFx } from './repeatTextScrollFx';
// Preload images and fonts and remove loader
preloadFonts('fxx5dng').then(() => {
// Apply the effect on these elements
document.querySelectorAll('[data-text-rep]').forEach(textEl => {
new RepeatTextScrollFx(textEl);
});
document.body.classList.remove('loading');
});src/js/demo5/repeatTextScrollFx.js
import { getHeight } from '../utils';
import { gsap } from 'gsap';
/**
* Class representing an element with multiple text child elements that translate up/down when scrolling
*/
export class RepeatTextScrollFx {
// DOM elements
DOM = {
// main element ([data-text-rep])
el: null,
// all text spans except the last one (this will be the centered one and doesn't translate
words: null,
}
totalWords = 8;
tyIncrement = 16;
txIncrement = 2;
opacityIncrement = 0.15;
delayIncrement = 0.01;
scrollTimeline;
observer;
/**
* Constructor.
* @param {NodeList} Dom_el - main element ([data-text-rep])
*/
constructor(Dom_el) {
this.DOM.el = Dom_el;
this.layout();
this.setBoundaries();
this.createScrollTimeline();
this.createObserver();
window.addEventListener('resize', () => this.setBoundaries());
}
/**
* Creates the text spans inside the main element
*/
layout() {
const halfWordsCount = Math.floor(this.totalWords/2);
let innerHTML = '';
for (let i = 0; i < this.totalWords; ++i) {
const tx = i === this.totalWords-1 ? 0 : -1* (this.totalWords-i)*this.txIncrement;
const ty = i === this.totalWords-1 ? 0 : -1* (this.totalWords-i)*this.tyIncrement;
const opacity = i === this.totalWords-1 ? 1 : Math.min(i*this.opacityIncrement,1);
const delay = i === this.totalWords-1 ? 0 : (this.totalWords-i)*this.delayIncrement;
innerHTML += `<span data-delay="${delay}" data-opacity="${opacity}" data-ty="${ty}" data-tx="${tx}">${this.DOM.el.innerHTML}</span>`;
}
this.DOM.el.innerHTML = innerHTML;
this.DOM.el.classList.add('text-rep');
this.DOM.words = [...this.DOM.el.querySelectorAll('span')].slice(0, -1);
}
/**
* sets the padding bottom and margin top given the amount that the words will translate up/down
*/
setBoundaries() {
// Set up the margin top and padding bottom values
const paddingBottomMarginTop = getHeight(this.DOM.el) * Math.floor(this.totalWords) * this.tyIncrement/100;
gsap.set(this.DOM.el, {
//marginTop: paddingBottomMarginTop,
paddingBottom: paddingBottomMarginTop
});
}
/**
* gsap animation timeline
* translates the text spans when the element enters the viewport
*/
createScrollTimeline() {
this.scrollTimeline = gsap.timeline({paused: true})
.to(this.DOM.words, {
duration: 1,
ease: 'none',
yPercent: (_,target) => -1*target.dataset.ty,
xPercent: (_,target) => -1*target.dataset.tx,
startAt: {opacity: 0},
opacity: (_,target) => target.dataset.opacity,
delay: (_,target) => target.dataset.delay
})
}
/**
* Intersection Observer
* Updates the timeline progress when the element is in the viewport
*/
createObserver() {
const observerOptions = {
root: null,
rootMargin: '0px 0px',
threshold: 0
};
// credits: from https://medium.com/elegant-seagulls/parallax-and-scroll-triggered-animations-with-the-intersection-observer-api-and-gsap3-53b58c80b2fa
this.observer = new IntersectionObserver(entry => {
if (entry[0].intersectionRatio > 0) {
if ( !this.isLoaded ) {
this.isLoaded = true;
}
gsap.ticker.add(this.progressTween);
}
else {
if ( this.isLoaded ) {
gsap.ticker.remove(this.progressTween);
}
else {
this.isLoaded = true;
// add and remove immediately
gsap.ticker.add(this.progressTween, true);
}
}
}, observerOptions);
this.progressTween = () => {
// Get scroll distance to bottom of viewport.
const scrollPosition = (window.scrollY + window.innerHeight);
// Get element's position relative to bottom of viewport.
const elPosition = (scrollPosition - this.DOM.el.offsetTop);
// Set desired duration.
const durationDistance = (window.innerHeight + this.DOM.el.offsetHeight);
// Calculate tween progresss.
const currentProgress = (elPosition / durationDistance);
// Set progress of gsap timeline.
this.scrollTimeline.progress(currentProgress);
}
this.observer.observe(this.DOM.el);
}
}src/js/utils.js
/**
* Preload fonts
* @param {String} id
*/
const preloadFonts = id => {
return new Promise((resolve) => {
WebFont.load({
typekit: {
id: id
},
active: resolve
});
});
};
/**
* Gets the height of an element without counting with the padding
* @param {Element} el
*/
const getHeight = el => {
const computedStyle = getComputedStyle(el);
let elementHeight = el.clientHeight; // height with padding
elementHeight -= parseFloat(computedStyle.paddingTop) + parseFloat(computedStyle.paddingBottom);
return elementHeight;
}
export {
preloadFonts,
getHeight
};Media credits and license evidence실행 안내·자료
README.md
## 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
BEHIND THE EXAMPLE
이 장면을 만드는 원리
반복 글자의 이동만큼 읽기 공간 확보
시각적인 글자 분할과 사용자에게 한 글자로 보이는 단위를 구분합니다.
- 이 예제에서는
- RepeatTextScrollFx는 원문 HTML을 여러 span으로 복제하고 텍스트 높이·반복 수·tyIncrement에서 marginTop과 paddingBottom을 계산합니다.
코드와 함께 확인하기
코드에서 찾기
setBoundariesrepeatTextScrollFx.js반복된 시각 층의 이동 범위를 주변 공간으로 반영합니다.
직접 해보기
글꼴·줄 수·확대 배율을 바꾸고 resize를 반복합니다.
살펴볼 변화복제본 잘림과 공간 누적을 확인하며 읽기용 원문이 중복 노출되지 않도록 해야 합니다.