├── .gitattributes ├── .gitignore ├── LICENSE ├── README.md ├── dist ├── favicon.a64e97b2.ico ├── index.49c46c74.js ├── index.6d147055.js ├── index.d73f7ad5.css ├── index.html ├── index2.228f0f6b.js ├── index2.2bf911ad.js ├── index2.html ├── index3.567ae035.js ├── index3.cc40078a.js ├── index3.html ├── index4.4ae4db92.js ├── index4.ea1c40c1.js ├── index4.html ├── index5.0d3e295b.js ├── index5.69124e8c.js ├── index5.d46ad30b.js ├── index5.df9dd68a.js └── index5.html ├── package.json └── src ├── css └── base.css ├── favicon.ico ├── img ├── 1.jpg └── 2.jpg ├── index.html ├── index2.html ├── index3.html ├── index4.html ├── index5.html └── js ├── demo1 ├── index.js └── repeatTextScrollFx.js ├── demo2 ├── index.js └── repeatTextScrollFx.js ├── demo3 ├── index.js └── repeatTextScrollFx.js ├── demo4 ├── index.js └── repeatTextScrollFx.js ├── demo5 ├── index.js └── repeatTextScrollFx.js └── utils.js /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .cache 3 | .parcel-cache 4 | package-lock.json -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2009 - 2021 [Codrops](https://tympanus.net/codrops) 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Text Repetition Scroll Effect 2 | 3 | An on-scroll animation that shows repeated fragments of a big text as seen on the website of [Dr. Dabber](https://experience.drdabber.com/product/stella). 4 | 5 | ![Text Repetition Scroll Effect](https://tympanus.net/codrops/wp-content/uploads/2022/04/TextRep_feat.jpg) 6 | 7 | [Article on Codrops](https://tympanus.net/codrops/?p=63187) 8 | 9 | [Demo](http://tympanus.net/Development/TextRepetitionEffect/) 10 | 11 | 12 | ## Installation 13 | 14 | Install dependencies: 15 | 16 | ``` 17 | npm install 18 | ``` 19 | 20 | Compile the code for development and start a local server: 21 | 22 | ``` 23 | npm start 24 | ``` 25 | 26 | Create the build: 27 | 28 | ``` 29 | npm run build 30 | ``` 31 | 32 | ## Misc 33 | 34 | Follow Codrops: [Twitter](http://www.twitter.com/codrops), [Facebook](http://www.facebook.com/codrops), [GitHub](https://github.com/codrops), [Instagram](https://www.instagram.com/codropsss/) 35 | 36 | ## License 37 | [MIT](LICENSE) 38 | 39 | Made with :blue_heart: by [Codrops](http://www.codrops.com) 40 | 41 | 42 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /dist/favicon.a64e97b2.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TextRepetitionEffect/fabaafe0124e7bdf66906c6214f00800f5575c4c/dist/favicon.a64e97b2.ico -------------------------------------------------------------------------------- /dist/index.49c46c74.js: -------------------------------------------------------------------------------- 1 | !function(){var e="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:"undefined"!=typeof window?window:"undefined"!=typeof global?global:{},t={},r={},n=e.parcelRequire7cb3;null==n&&((n=function(e){if(e in t)return t[e].exports;if(e in r){var n=r[e];delete r[e];var i={id:e,exports:{}};return t[e]=i,n.call(i.exports,i,i.exports),i.exports}var o=new Error("Cannot find module '"+e+"'");throw o.code="MODULE_NOT_FOUND",o}).register=function(e,t){r[e]=t},e.parcelRequire7cb3=n);var i=n("1OZqT"),o=n("fNRGU"),s=(i=n("1OZqT"),n("cH00A")),a=function(){"use strict";function e(t){var r=this;o.classCallCheck(this,e),o.defineProperty(this,"DOM",{el:null,words:null}),o.defineProperty(this,"totalWords",9),o.defineProperty(this,"tyIncrement",12),o.defineProperty(this,"delayIncrement",.1),o.defineProperty(this,"scrollTimeline",void 0),o.defineProperty(this,"observer",void 0),this.DOM.el=t,this.layout(),this.setBoundaries(),this.createScrollTimeline(),this.createObserver(),window.addEventListener("resize",(function(){return r.setBoundaries()}))}return o.createClass(e,[{key:"layout",value:function(){for(var e=Math.floor(this.totalWords/2),t="",r=0;r').concat(this.DOM.el.innerHTML,"")}this.DOM.el.innerHTML=t,this.DOM.el.classList.add("text-rep"),this.DOM.words=o.toConsumableArray(this.DOM.el.querySelectorAll("span")).slice(0,-1)}},{key:"setBoundaries",value:function(){var e=i.getHeight(this.DOM.el)*Math.floor(this.totalWords/2)*this.tyIncrement/100;s.gsap.set(this.DOM.el,{marginTop:e,paddingBottom:e})}},{key:"createScrollTimeline",value:function(){this.scrollTimeline=s.gsap.timeline({paused:!0}).to(this.DOM.words,{duration:1,ease:"power1",yPercent:function(e,t){return t.dataset.ty},delay:function(e,t){return t.dataset.delay}})}},{key:"createObserver",value:function(){var e=this;this.observer=new IntersectionObserver((function(t){t[0].intersectionRatio>0?(e.isLoaded||(e.isLoaded=!0),s.gsap.ticker.add(e.progressTween)):e.isLoaded?s.gsap.ticker.remove(e.progressTween):(e.isLoaded=!0,s.gsap.ticker.add(e.progressTween,!0))}),{root:null,rootMargin:"0px 0px",threshold:0}),this.progressTween=function(){var t=(window.scrollY+window.innerHeight-e.DOM.el.offsetTop)/(window.innerHeight+e.DOM.el.offsetHeight);e.scrollTimeline.progress(t)},this.observer.observe(this.DOM.el)}}]),e}();i.preloadFonts("fxx5dng").then((function(){document.querySelectorAll("[data-text-rep]").forEach((function(e){new a(e)})),document.body.classList.remove("loading")}))}(); -------------------------------------------------------------------------------- /dist/index.6d147055.js: -------------------------------------------------------------------------------- 1 | var e="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:"undefined"!=typeof window?window:"undefined"!=typeof global?global:{},t={},s={},r=e.parcelRequire7cb3;null==r&&((r=function(e){if(e in t)return t[e].exports;if(e in s){var r=s[e];delete s[e];var i={id:e,exports:{}};return t[e]=i,r.call(i.exports,i,i.exports),i.exports}var o=new Error("Cannot find module '"+e+"'");throw o.code="MODULE_NOT_FOUND",o}).register=function(e,t){s[e]=t},e.parcelRequire7cb3=r);var i=r("5IQP4"),o=r("cdGhx"),n=(i=r("5IQP4"),r("1oYLf"));class l{layout(){const e=Math.floor(this.totalWords/2);let t="";for(let s=0;s${this.DOM.el.innerHTML}`}this.DOM.el.innerHTML=t,this.DOM.el.classList.add("text-rep"),this.DOM.words=[...this.DOM.el.querySelectorAll("span")].slice(0,-1)}setBoundaries(){const e=i.getHeight(this.DOM.el)*Math.floor(this.totalWords/2)*this.tyIncrement/100;n.gsap.set(this.DOM.el,{marginTop:e,paddingBottom:e})}createScrollTimeline(){this.scrollTimeline=n.gsap.timeline({paused:!0}).to(this.DOM.words,{duration:1,ease:"power1",yPercent:(e,t)=>t.dataset.ty,delay:(e,t)=>t.dataset.delay})}createObserver(){this.observer=new IntersectionObserver((e=>{e[0].intersectionRatio>0?(this.isLoaded||(this.isLoaded=!0),n.gsap.ticker.add(this.progressTween)):this.isLoaded?n.gsap.ticker.remove(this.progressTween):(this.isLoaded=!0,n.gsap.ticker.add(this.progressTween,!0))}),{root:null,rootMargin:"0px 0px",threshold:0}),this.progressTween=()=>{const e=(window.scrollY+window.innerHeight-this.DOM.el.offsetTop)/(window.innerHeight+this.DOM.el.offsetHeight);this.scrollTimeline.progress(e)},this.observer.observe(this.DOM.el)}constructor(e){o.defineProperty(this,"DOM",{el:null,words:null}),o.defineProperty(this,"totalWords",9),o.defineProperty(this,"tyIncrement",12),o.defineProperty(this,"delayIncrement",.1),o.defineProperty(this,"scrollTimeline",void 0),o.defineProperty(this,"observer",void 0),this.DOM.el=e,this.layout(),this.setBoundaries(),this.createScrollTimeline(),this.createObserver(),window.addEventListener("resize",(()=>this.setBoundaries()))}}i.preloadFonts("fxx5dng").then((()=>{document.querySelectorAll("[data-text-rep]").forEach((e=>{new l(e)})),document.body.classList.remove("loading")})); -------------------------------------------------------------------------------- /dist/index.d73f7ad5.css: -------------------------------------------------------------------------------- 1 | *,:after,:before{box-sizing:border-box}:root{font-size:15px}body{--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);--font-factor:.059;--font-line:.745;color:var(--color-text);background-color:var(--color-bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;font-family:halyard-micro,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif;overflow-x: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:.059;--font-line:.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}.js .loading:before,.js .loading:after{content:"";z-index:1000;position:fixed}.js .loading:before{width:100%;height:100%;background:var(--color-bg);top:0;left:0}.js .loading:after{width:60px;height:60px;opacity:.4;background:var(--color-link);border-radius:50%;margin:-30px 0 0 -30px;animation:loaderAnim .7s linear infinite alternate forwards;top:50%;left:50%}@keyframes loaderAnim{to{opacity:1;transform:scale(.5)}}a{color:var(--color-link);outline:0;text-decoration:none}a:hover{color:var(--color-link-hover);outline:0}a:focus{background:#d3d3d3;outline:0}a:focus:not(:focus-visible){background:0 0}a:focus-visible{background:0 0;outline:2px solid red}.unbutton{font:inherit;background:0 0;border:0;margin:0;padding:0}.unbutton:focus{outline:0}main{padding:1.5rem 2rem 0}.frame{text-align:center}.frame__title{margin:0;font-size:1rem;font-weight:500}.frame__links{margin:.5rem 0 2rem}.frame__links a:not(:last-child){margin-right:1rem}.hover-line,.cda-sponsor-link{white-space:nowrap;position:relative;overflow:hidden}.hover-line:before,.cda-sponsor-link:before{content:"";height:1px;width:100%;transform-origin:0%;background:currentColor;transition:transform .3s;position:absolute;top:92%}.hover-line:hover:before,.cda-sponsor-link:hover:before{transform-origin:100%;transform:scaleX(0)}.content{margin:var(--content-offset)0 0 0;flex-direction:column;align-items:center;display:flex}.content p{-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;max-width:500px;margin:10vh auto;font-size:1.25rem;line-height:1.8}p.footer{opacity:.5;padding-top:25vh;font-size:1rem}.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);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;-ms-user-select:none;user-select:none;margin:0;display:grid}.content__title--left{margin-right:auto}.content__title--right{margin-left:auto}.text-rep span{color:var(--color-rep-text-main);background:var(--color-rep-bg);line-height:var(--font-line);padding-bottom:calc(var(--font-factor)*var(--size));will-change:transform;grid-area:1/1/2/2}.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:rgba(0,0,0,0)}.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{grid-column-gap:3vw;grid-row-gap:1rem;text-align:left;grid-template-columns:auto auto auto;grid-template-areas:"title demos demos sponsor""links links links links";justify-content:space-between;display:grid}.frame__title{grid-area:title}.frame__links{grid-area:links;margin:0}.frame__links--demos{grid-area:demos}} -------------------------------------------------------------------------------- /dist/index.html: -------------------------------------------------------------------------------- 1 | Text Repetition Scroll Effect | Demo 1 | Codrops

Text Repetition Scroll Effect from Dr. Dabber

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.

Boca

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.

Soulmate

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.

Maui

Wowie

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.

Kush

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.

From Collected Papers on Analytical Psychology by C. G. Jung

Demo 2

-------------------------------------------------------------------------------- /dist/index2.228f0f6b.js: -------------------------------------------------------------------------------- 1 | !function(){var e="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:"undefined"!=typeof window?window:"undefined"!=typeof global?global:{},t={},n={},r=e.parcelRequire7cb3;null==r&&((r=function(e){if(e in t)return t[e].exports;if(e in n){var r=n[e];delete n[e];var i={id:e,exports:{}};return t[e]=i,r.call(i.exports,i,i.exports),i.exports}var o=new Error("Cannot find module '"+e+"'");throw o.code="MODULE_NOT_FOUND",o}).register=function(e,t){n[e]=t},e.parcelRequire7cb3=r);var i=r("1OZqT"),o=r("fNRGU"),s=(i=r("1OZqT"),r("cH00A")),a=function(){"use strict";function e(t){var n=this;o.classCallCheck(this,e),o.defineProperty(this,"DOM",{el:null,words:null}),o.defineProperty(this,"totalWords",9),o.defineProperty(this,"tyIncrement",14),o.defineProperty(this,"delayIncrement",.08),o.defineProperty(this,"scrollTimeline",void 0),o.defineProperty(this,"observer",void 0),this.DOM.el=t,this.layout(),this.setBoundaries(),this.createScrollTimeline(),this.createObserver(),window.addEventListener("resize",(function(){return n.setBoundaries()}))}return o.createClass(e,[{key:"layout",value:function(){for(var e=Math.floor(this.totalWords/2),t="",n=0;n').concat(this.DOM.el.innerHTML,"")}this.DOM.el.innerHTML=t,this.DOM.el.classList.add("text-rep"),this.DOM.words=o.toConsumableArray(this.DOM.el.querySelectorAll("span")).slice(0,-1)}},{key:"setBoundaries",value:function(){var e=i.getHeight(this.DOM.el)*Math.floor(this.totalWords/2)*this.tyIncrement/100;s.gsap.set(this.DOM.el,{marginTop:e,paddingBottom:e})}},{key:"createScrollTimeline",value:function(){this.scrollTimeline=s.gsap.timeline({paused:!0}).to(this.DOM.words,{duration:1,ease:"none",yPercent:function(e,t){return t.dataset.ty},delay:function(e,t){return t.dataset.delay}},0).to(this.DOM.words,{duration:1,ease:"none",yPercent:0,delay:function(e,t){return t.dataset.delay}})}},{key:"createObserver",value:function(){var e=this;this.observer=new IntersectionObserver((function(t){t[0].intersectionRatio>0?(e.isLoaded||(e.isLoaded=!0),s.gsap.ticker.add(e.progressTween)):e.isLoaded?s.gsap.ticker.remove(e.progressTween):(e.isLoaded=!0,s.gsap.ticker.add(e.progressTween,!0))}),{root:null,rootMargin:"0px 0px",threshold:0}),this.progressTween=function(){var t=(window.scrollY+window.innerHeight-e.DOM.el.offsetTop)/(window.innerHeight+e.DOM.el.offsetHeight);e.scrollTimeline.progress(t)},this.observer.observe(this.DOM.el)}}]),e}();i.preloadFonts("fxx5dng").then((function(){document.querySelectorAll("[data-text-rep]").forEach((function(e){new a(e)})),document.body.classList.remove("loading")}))}(); -------------------------------------------------------------------------------- /dist/index2.2bf911ad.js: -------------------------------------------------------------------------------- 1 | var e="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:"undefined"!=typeof window?window:"undefined"!=typeof global?global:{},t={},s={},r=e.parcelRequire7cb3;null==r&&((r=function(e){if(e in t)return t[e].exports;if(e in s){var r=s[e];delete s[e];var i={id:e,exports:{}};return t[e]=i,r.call(i.exports,i,i.exports),i.exports}var o=new Error("Cannot find module '"+e+"'");throw o.code="MODULE_NOT_FOUND",o}).register=function(e,t){s[e]=t},e.parcelRequire7cb3=r);var i=r("5IQP4"),o=r("cdGhx"),n=(i=r("5IQP4"),r("1oYLf"));class l{layout(){const e=Math.floor(this.totalWords/2);let t="";for(let s=0;s${this.DOM.el.innerHTML}`}this.DOM.el.innerHTML=t,this.DOM.el.classList.add("text-rep"),this.DOM.words=[...this.DOM.el.querySelectorAll("span")].slice(0,-1)}setBoundaries(){const e=i.getHeight(this.DOM.el)*Math.floor(this.totalWords/2)*this.tyIncrement/100;n.gsap.set(this.DOM.el,{marginTop:e,paddingBottom:e})}createScrollTimeline(){this.scrollTimeline=n.gsap.timeline({paused:!0}).to(this.DOM.words,{duration:1,ease:"none",yPercent:(e,t)=>t.dataset.ty,delay:(e,t)=>t.dataset.delay},0).to(this.DOM.words,{duration:1,ease:"none",yPercent:0,delay:(e,t)=>t.dataset.delay})}createObserver(){this.observer=new IntersectionObserver((e=>{e[0].intersectionRatio>0?(this.isLoaded||(this.isLoaded=!0),n.gsap.ticker.add(this.progressTween)):this.isLoaded?n.gsap.ticker.remove(this.progressTween):(this.isLoaded=!0,n.gsap.ticker.add(this.progressTween,!0))}),{root:null,rootMargin:"0px 0px",threshold:0}),this.progressTween=()=>{const e=(window.scrollY+window.innerHeight-this.DOM.el.offsetTop)/(window.innerHeight+this.DOM.el.offsetHeight);this.scrollTimeline.progress(e)},this.observer.observe(this.DOM.el)}constructor(e){o.defineProperty(this,"DOM",{el:null,words:null}),o.defineProperty(this,"totalWords",9),o.defineProperty(this,"tyIncrement",14),o.defineProperty(this,"delayIncrement",.08),o.defineProperty(this,"scrollTimeline",void 0),o.defineProperty(this,"observer",void 0),this.DOM.el=e,this.layout(),this.setBoundaries(),this.createScrollTimeline(),this.createObserver(),window.addEventListener("resize",(()=>this.setBoundaries()))}}i.preloadFonts("fxx5dng").then((()=>{document.querySelectorAll("[data-text-rep]").forEach((e=>{new l(e)})),document.body.classList.remove("loading")})); -------------------------------------------------------------------------------- /dist/index2.html: -------------------------------------------------------------------------------- 1 | Text Repetition Scroll Effect | Demo 2 | Codrops

Text Repetition Scroll Effect from Dr. Dabber

Good

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.

Bonitama

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.

Osho

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.

Full

Moon

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.

Bone

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.

From Collected Papers on Analytical Psychology by C. G. Jung

Demo 3

-------------------------------------------------------------------------------- /dist/index3.567ae035.js: -------------------------------------------------------------------------------- 1 | !function(){var e="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:"undefined"!=typeof window?window:"undefined"!=typeof global?global:{},t={},n={},r=e.parcelRequire7cb3;null==r&&((r=function(e){if(e in t)return t[e].exports;if(e in n){var r=n[e];delete n[e];var i={id:e,exports:{}};return t[e]=i,r.call(i.exports,i,i.exports),i.exports}var o=new Error("Cannot find module '"+e+"'");throw o.code="MODULE_NOT_FOUND",o}).register=function(e,t){n[e]=t},e.parcelRequire7cb3=r);var i=r("1OZqT"),o=r("fNRGU"),s=(i=r("1OZqT"),r("cH00A")),a=function(){"use strict";function e(t){var n=this;o.classCallCheck(this,e),o.defineProperty(this,"DOM",{el:null,words:null}),o.defineProperty(this,"totalWords",9),o.defineProperty(this,"tyIncrement",14),o.defineProperty(this,"delayIncrement",.08),o.defineProperty(this,"scrollTimeline",void 0),o.defineProperty(this,"observer",void 0),this.DOM.el=t,this.layout(),this.setBoundaries(),this.createScrollTimeline(),this.createObserver(),window.addEventListener("resize",(function(){return n.setBoundaries()}))}return o.createClass(e,[{key:"layout",value:function(){for(var e=Math.floor(this.totalWords/2),t="",n=0;n').concat(this.DOM.el.innerHTML,"")}this.DOM.el.innerHTML=t,this.DOM.el.classList.add("text-rep"),this.DOM.words=o.toConsumableArray(this.DOM.el.querySelectorAll("span")).slice(0,-1)}},{key:"setBoundaries",value:function(){var e=i.getHeight(this.DOM.el)*Math.floor(this.totalWords/2)*this.tyIncrement/100;s.gsap.set(this.DOM.el,{marginTop:e,paddingBottom:e})}},{key:"createScrollTimeline",value:function(){this.scrollTimeline=s.gsap.timeline({paused:!0}).to(this.DOM.words,{duration:1,ease:"none",startAt:{opacity:0},opacity:1,yPercent:function(e,t){return t.dataset.ty},delay:function(e,t){return t.dataset.delay}},0).to(this.DOM.words,{duration:1,ease:"none",opacity:0,yPercent:0,delay:function(e,t){return t.dataset.delay}})}},{key:"createObserver",value:function(){var e=this;this.observer=new IntersectionObserver((function(t){t[0].intersectionRatio>0?(e.isLoaded||(e.isLoaded=!0),s.gsap.ticker.add(e.progressTween)):e.isLoaded?s.gsap.ticker.remove(e.progressTween):(e.isLoaded=!0,s.gsap.ticker.add(e.progressTween,!0))}),{root:null,rootMargin:"0px 0px",threshold:0}),this.progressTween=function(){var t=(window.scrollY+window.innerHeight-e.DOM.el.offsetTop)/(window.innerHeight+e.DOM.el.offsetHeight);e.scrollTimeline.progress(t)},this.observer.observe(this.DOM.el)}}]),e}();i.preloadFonts("fxx5dng").then((function(){document.querySelectorAll("[data-text-rep]").forEach((function(e){new a(e)})),document.body.classList.remove("loading")}))}(); -------------------------------------------------------------------------------- /dist/index3.cc40078a.js: -------------------------------------------------------------------------------- 1 | var e="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:"undefined"!=typeof window?window:"undefined"!=typeof global?global:{},t={},s={},i=e.parcelRequire7cb3;null==i&&((i=function(e){if(e in t)return t[e].exports;if(e in s){var i=s[e];delete s[e];var r={id:e,exports:{}};return t[e]=r,i.call(r.exports,r,r.exports),r.exports}var o=new Error("Cannot find module '"+e+"'");throw o.code="MODULE_NOT_FOUND",o}).register=function(e,t){s[e]=t},e.parcelRequire7cb3=i);var r=i("5IQP4"),o=i("cdGhx"),n=(r=i("5IQP4"),i("1oYLf"));class l{layout(){const e=Math.floor(this.totalWords/2);let t="";for(let s=0;s${this.DOM.el.innerHTML}`}this.DOM.el.innerHTML=t,this.DOM.el.classList.add("text-rep"),this.DOM.words=[...this.DOM.el.querySelectorAll("span")].slice(0,-1)}setBoundaries(){const e=r.getHeight(this.DOM.el)*Math.floor(this.totalWords/2)*this.tyIncrement/100;n.gsap.set(this.DOM.el,{marginTop:e,paddingBottom:e})}createScrollTimeline(){this.scrollTimeline=n.gsap.timeline({paused:!0}).to(this.DOM.words,{duration:1,ease:"none",startAt:{opacity:0},opacity:1,yPercent:(e,t)=>t.dataset.ty,delay:(e,t)=>t.dataset.delay},0).to(this.DOM.words,{duration:1,ease:"none",opacity:0,yPercent:0,delay:(e,t)=>t.dataset.delay})}createObserver(){this.observer=new IntersectionObserver((e=>{e[0].intersectionRatio>0?(this.isLoaded||(this.isLoaded=!0),n.gsap.ticker.add(this.progressTween)):this.isLoaded?n.gsap.ticker.remove(this.progressTween):(this.isLoaded=!0,n.gsap.ticker.add(this.progressTween,!0))}),{root:null,rootMargin:"0px 0px",threshold:0}),this.progressTween=()=>{const e=(window.scrollY+window.innerHeight-this.DOM.el.offsetTop)/(window.innerHeight+this.DOM.el.offsetHeight);this.scrollTimeline.progress(e)},this.observer.observe(this.DOM.el)}constructor(e){o.defineProperty(this,"DOM",{el:null,words:null}),o.defineProperty(this,"totalWords",9),o.defineProperty(this,"tyIncrement",14),o.defineProperty(this,"delayIncrement",.08),o.defineProperty(this,"scrollTimeline",void 0),o.defineProperty(this,"observer",void 0),this.DOM.el=e,this.layout(),this.setBoundaries(),this.createScrollTimeline(),this.createObserver(),window.addEventListener("resize",(()=>this.setBoundaries()))}}r.preloadFonts("fxx5dng").then((()=>{document.querySelectorAll("[data-text-rep]").forEach((e=>{new l(e)})),document.body.classList.remove("loading")})); -------------------------------------------------------------------------------- /dist/index3.html: -------------------------------------------------------------------------------- 1 | Text Repetition Scroll Effect | Demo 3 | Codrops

Text Repetition Scroll Effect from Dr. Dabber

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.

Musa

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.

Comoxo

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.

Freak

Reason

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.

Soul

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.

From Collected Papers on Analytical Psychology by C. G. Jung

Demo 4

-------------------------------------------------------------------------------- /dist/index4.4ae4db92.js: -------------------------------------------------------------------------------- 1 | !function(){var e="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:"undefined"!=typeof window?window:"undefined"!=typeof global?global:{},t={},n={},r=e.parcelRequire7cb3;null==r&&((r=function(e){if(e in t)return t[e].exports;if(e in n){var r=n[e];delete n[e];var i={id:e,exports:{}};return t[e]=i,r.call(i.exports,i,i.exports),i.exports}var o=new Error("Cannot find module '"+e+"'");throw o.code="MODULE_NOT_FOUND",o}).register=function(e,t){n[e]=t},e.parcelRequire7cb3=r);var i=r("1OZqT"),o=r("fNRGU"),s=(i=r("1OZqT"),r("cH00A")),a=function(){"use strict";function e(t){var n=this;o.classCallCheck(this,e),o.defineProperty(this,"DOM",{el:null,words:null}),o.defineProperty(this,"totalWords",7),o.defineProperty(this,"tyIncrement",40),o.defineProperty(this,"delayIncrement",.05),o.defineProperty(this,"scrollTimeline",void 0),o.defineProperty(this,"observer",void 0),this.DOM.el=t,this.layout(),this.setBoundaries(),this.createScrollTimeline(),this.createObserver(),window.addEventListener("resize",(function(){return n.setBoundaries()}))}return o.createClass(e,[{key:"layout",value:function(){for(var e=Math.floor(this.totalWords/2),t="",n=0;n').concat(this.DOM.el.innerHTML,"")}this.DOM.el.innerHTML=t,this.DOM.el.classList.add("text-rep"),this.DOM.words=o.toConsumableArray(this.DOM.el.querySelectorAll("span")).slice(0,-1)}},{key:"setBoundaries",value:function(){var e=i.getHeight(this.DOM.el)*Math.floor(this.totalWords/2)*this.tyIncrement/100;s.gsap.set(this.DOM.el,{marginTop:e,paddingBottom:e})}},{key:"createScrollTimeline",value:function(){this.scrollTimeline=s.gsap.timeline({paused:!0}).to(this.DOM.words,{duration:1,ease:"sine.inOut",yPercent:function(e,t){return t.dataset.ty},xPercent:function(e,t){return.1*t.dataset.ty},opacity:0,delay:function(e,t){return t.dataset.delay}})}},{key:"createObserver",value:function(){var e=this;this.observer=new IntersectionObserver((function(t){t[0].intersectionRatio>0?(e.isLoaded||(e.isLoaded=!0),s.gsap.ticker.add(e.progressTween)):e.isLoaded?s.gsap.ticker.remove(e.progressTween):(e.isLoaded=!0,s.gsap.ticker.add(e.progressTween,!0))}),{root:null,rootMargin:"0px 0px",threshold:0}),this.progressTween=function(){var t=(window.scrollY+window.innerHeight-e.DOM.el.offsetTop)/(window.innerHeight+e.DOM.el.offsetHeight);e.scrollTimeline.progress(t)},this.observer.observe(this.DOM.el)}}]),e}();i.preloadFonts("fxx5dng").then((function(){document.querySelectorAll("[data-text-rep]").forEach((function(e){new a(e)})),document.body.classList.remove("loading")}))}(); -------------------------------------------------------------------------------- /dist/index4.ea1c40c1.js: -------------------------------------------------------------------------------- 1 | var e="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:"undefined"!=typeof window?window:"undefined"!=typeof global?global:{},t={},s={},i=e.parcelRequire7cb3;null==i&&((i=function(e){if(e in t)return t[e].exports;if(e in s){var i=s[e];delete s[e];var r={id:e,exports:{}};return t[e]=r,i.call(r.exports,r,r.exports),r.exports}var o=new Error("Cannot find module '"+e+"'");throw o.code="MODULE_NOT_FOUND",o}).register=function(e,t){s[e]=t},e.parcelRequire7cb3=i);var r=i("5IQP4"),o=i("cdGhx"),n=(r=i("5IQP4"),i("1oYLf"));class l{layout(){const e=Math.floor(this.totalWords/2);let t="";for(let s=0;s${this.DOM.el.innerHTML}`}this.DOM.el.innerHTML=t,this.DOM.el.classList.add("text-rep"),this.DOM.words=[...this.DOM.el.querySelectorAll("span")].slice(0,-1)}setBoundaries(){const e=r.getHeight(this.DOM.el)*Math.floor(this.totalWords/2)*this.tyIncrement/100;n.gsap.set(this.DOM.el,{marginTop:e,paddingBottom:e})}createScrollTimeline(){this.scrollTimeline=n.gsap.timeline({paused:!0}).to(this.DOM.words,{duration:1,ease:"sine.inOut",yPercent:(e,t)=>t.dataset.ty,xPercent:(e,t)=>.1*t.dataset.ty,opacity:0,delay:(e,t)=>t.dataset.delay})}createObserver(){this.observer=new IntersectionObserver((e=>{e[0].intersectionRatio>0?(this.isLoaded||(this.isLoaded=!0),n.gsap.ticker.add(this.progressTween)):this.isLoaded?n.gsap.ticker.remove(this.progressTween):(this.isLoaded=!0,n.gsap.ticker.add(this.progressTween,!0))}),{root:null,rootMargin:"0px 0px",threshold:0}),this.progressTween=()=>{const e=(window.scrollY+window.innerHeight-this.DOM.el.offsetTop)/(window.innerHeight+this.DOM.el.offsetHeight);this.scrollTimeline.progress(e)},this.observer.observe(this.DOM.el)}constructor(e){o.defineProperty(this,"DOM",{el:null,words:null}),o.defineProperty(this,"totalWords",7),o.defineProperty(this,"tyIncrement",40),o.defineProperty(this,"delayIncrement",.05),o.defineProperty(this,"scrollTimeline",void 0),o.defineProperty(this,"observer",void 0),this.DOM.el=e,this.layout(),this.setBoundaries(),this.createScrollTimeline(),this.createObserver(),window.addEventListener("resize",(()=>this.setBoundaries()))}}r.preloadFonts("fxx5dng").then((()=>{document.querySelectorAll("[data-text-rep]").forEach((e=>{new l(e)})),document.body.classList.remove("loading")})); -------------------------------------------------------------------------------- /dist/index4.html: -------------------------------------------------------------------------------- 1 | Text Repetition Scroll Effect | Demo 4 | Codrops

Text Repetition Scroll Effect from Dr. Dabber

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.

bogota

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.

Barranquilla

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.

Santa Marta

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.

cali

From Collected Papers on Analytical Psychology by C. G. Jung

Demo 5

-------------------------------------------------------------------------------- /dist/index5.69124e8c.js: -------------------------------------------------------------------------------- 1 | var e="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:"undefined"!=typeof window?window:"undefined"!=typeof global?global:{},t={},s={},i=e.parcelRequire7cb3;null==i&&((i=function(e){if(e in t)return t[e].exports;if(e in s){var i=s[e];delete s[e];var r={id:e,exports:{}};return t[e]=r,i.call(r.exports,r,r.exports),r.exports}var o=new Error("Cannot find module '"+e+"'");throw o.code="MODULE_NOT_FOUND",o}).register=function(e,t){s[e]=t},e.parcelRequire7cb3=i);var r=i("5IQP4"),o=i("cdGhx"),n=(r=i("5IQP4"),i("1oYLf"));class a{layout(){Math.floor(this.totalWords/2);let e="";for(let t=0;t${this.DOM.el.innerHTML}`}this.DOM.el.innerHTML=e,this.DOM.el.classList.add("text-rep"),this.DOM.words=[...this.DOM.el.querySelectorAll("span")].slice(0,-1)}setBoundaries(){const e=r.getHeight(this.DOM.el)*Math.floor(this.totalWords)*this.tyIncrement/100;n.gsap.set(this.DOM.el,{paddingBottom:e})}createScrollTimeline(){this.scrollTimeline=n.gsap.timeline({paused:!0}).to(this.DOM.words,{duration:1,ease:"none",yPercent:(e,t)=>-1*t.dataset.ty,xPercent:(e,t)=>-1*t.dataset.tx,startAt:{opacity:0},opacity:(e,t)=>t.dataset.opacity,delay:(e,t)=>t.dataset.delay})}createObserver(){this.observer=new IntersectionObserver((e=>{e[0].intersectionRatio>0?(this.isLoaded||(this.isLoaded=!0),n.gsap.ticker.add(this.progressTween)):this.isLoaded?n.gsap.ticker.remove(this.progressTween):(this.isLoaded=!0,n.gsap.ticker.add(this.progressTween,!0))}),{root:null,rootMargin:"0px 0px",threshold:0}),this.progressTween=()=>{const e=(window.scrollY+window.innerHeight-this.DOM.el.offsetTop)/(window.innerHeight+this.DOM.el.offsetHeight);this.scrollTimeline.progress(e)},this.observer.observe(this.DOM.el)}constructor(e){o.defineProperty(this,"DOM",{el:null,words:null}),o.defineProperty(this,"totalWords",8),o.defineProperty(this,"tyIncrement",16),o.defineProperty(this,"txIncrement",2),o.defineProperty(this,"opacityIncrement",.15),o.defineProperty(this,"delayIncrement",.01),o.defineProperty(this,"scrollTimeline",void 0),o.defineProperty(this,"observer",void 0),this.DOM.el=e,this.layout(),this.setBoundaries(),this.createScrollTimeline(),this.createObserver(),window.addEventListener("resize",(()=>this.setBoundaries()))}}r.preloadFonts("fxx5dng").then((()=>{document.querySelectorAll("[data-text-rep]").forEach((e=>{new a(e)})),document.body.classList.remove("loading")})); -------------------------------------------------------------------------------- /dist/index5.d46ad30b.js: -------------------------------------------------------------------------------- 1 | function t(t,e,r,i){Object.defineProperty(t,e,{get:r,set:i,enumerable:!0,configurable:!0})}var e="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:"undefined"!=typeof window?window:"undefined"!=typeof global?global:{},r={},i={},n=e.parcelRequire7cb3;null==n&&((n=function(t){if(t in r)return r[t].exports;if(t in i){var e=i[t];delete i[t];var n={id:t,exports:{}};return r[t]=n,e.call(n.exports,n,n.exports),n.exports}var s=new Error("Cannot find module '"+t+"'");throw s.code="MODULE_NOT_FOUND",s}).register=function(t,e){i[t]=e},e.parcelRequire7cb3=n),n.register("5IQP4",(function(e,r){t(e.exports,"preloadFonts",(function(){return i})),t(e.exports,"getHeight",(function(){return n}));const i=t=>new Promise((e=>{WebFont.load({typekit:{id:t},active:e})})),n=t=>{const e=getComputedStyle(t);let r=t.clientHeight;return r-=parseFloat(e.paddingTop)+parseFloat(e.paddingBottom),r}})),n.register("cdGhx",(function(e,r){t(e.exports,"defineProperty",(function(){return n("igDHq").default}));n("igDHq")})),n.register("igDHq",(function(e,r){function i(t,e,r){return e in t?Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}):t[e]=r,t}t(e.exports,"default",(function(){return i}))})),n.register("1oYLf",(function(e,r){t(e.exports,"gsap",(function(){return a}));var i=n("jxfTi"),s=n("bnyTL"),a=i.gsap.registerPlugin(s.CSSPlugin)||i.gsap;a.core.Tween})),n.register("jxfTi",(function(e,r){function i(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}function n(t,e){t.prototype=Object.create(e.prototype),t.prototype.constructor=t,t.__proto__=e} 2 | /*! 3 | * GSAP 3.10.2 4 | * https://greensock.com 5 | * 6 | * @license Copyright 2008-2022, GreenSock. All rights reserved. 7 | * Subject to the terms at https://greensock.com/standard-license or for 8 | * Club GreenSock members, the agreement issued with that membership. 9 | * @author: Jack Doyle, jack@greensock.com 10 | */t(e.exports,"_config",(function(){return R})),t(e.exports,"_isString",(function(){return X})),t(e.exports,"_isUndefined",(function(){return W})),t(e.exports,"_numExp",(function(){return tt})),t(e.exports,"_numWithUnitExp",(function(){return et})),t(e.exports,"_relExp",(function(){return it})),t(e.exports,"gsap",(function(){return Or})),t(e.exports,"_missingPlugin",(function(){return ht})),t(e.exports,"_plugins",(function(){return mt})),t(e.exports,"GSCache",(function(){return Ge})),t(e.exports,"_getCache",(function(){return wt})),t(e.exports,"_getProperty",(function(){return bt})),t(e.exports,"_forEachName",(function(){return Ot})),t(e.exports,"_round",(function(){return Mt})),t(e.exports,"_parseRelative",(function(){return Ct})),t(e.exports,"_ticker",(function(){return ze})),t(e.exports,"getUnit",(function(){return ue})),t(e.exports,"_replaceRandom",(function(){return ye})),t(e.exports,"_getSetter",(function(){return lr})),t(e.exports,"PropTween",(function(){return xr})),t(e.exports,"_colorExp",(function(){return Se})),t(e.exports,"_colorStringFilter",(function(){return Re})),t(e.exports,"_renderComplexString",(function(){return cr})),t(e.exports,"_checkPlugin",(function(){return tr})),t(e.exports,"_sortPropTweensByPriority",(function(){return yr}));var s,a,o,u,h,f,l,_,p,c,d,m,g,v,y,x,T,w,b,O,M,k,C,P,A,D,S,E,R={autoSleep:120,force3D:"auto",nullTargetWarn:1,units:{lineHeight:""}},z={duration:.5,overwrite:!1,delay:0},F=1e8,B=1e-8,U=2*Math.PI,I=U/4,L=0,N=Math.sqrt,Y=Math.cos,q=Math.sin,X=function(t){return"string"==typeof t},j=function(t){return"function"==typeof t},V=function(t){return"number"==typeof t},W=function(t){return void 0===t},G=function(t){return"object"==typeof t},H=function(t){return!1!==t},Q=function(){return"undefined"!=typeof window},Z=function(t){return j(t)||X(t)},$="function"==typeof ArrayBuffer&&ArrayBuffer.isView||function(){},J=Array.isArray,K=/(?:-?\.?\d|\.)+/gi,tt=/[-+=.]*\d+[.e\-+]*\d*[e\-+]*\d*/g,et=/[-+=.]*\d+[.e-]*\d*[a-z%]*/g,rt=/[-+=.]*\d+\.?\d*(?:e-|e\+)?\d*/gi,it=/[+-]=-?[.\d]+/,nt=/[^,'"\[\]\s]+/gi,st=/^[+\-=e\s\d]*\d+[.\d]*([a-z]*|%)\s*$/i,at={},ot={},ut=function(t){return(ot=zt(t,at))&&Or},ht=function(t,e){return console.warn("Invalid property",t,"set to",e,"Missing plugin? gsap.registerPlugin()")},ft=function(t,e){return!e&&console.warn(t)},lt=function(t,e){return t&&(at[t]=e)&&ot&&(ot[t]=e)||at},_t=function(){return 0},pt={},ct=[],dt={},mt={},gt={},vt=30,yt=[],xt="",Tt=function(t){var e,r,i=t[0];if(G(i)||j(i)||(t=[t]),!(e=(i._gsap||{}).harness)){for(r=yt.length;r--&&!yt[r].targetTest(i););e=yt[r]}for(r=t.length;r--;)t[r]&&(t[r]._gsap||(t[r]._gsap=new Ge(t[r],e)))||t.splice(r,1);return t},wt=function(t){return t._gsap||Tt(_e(t))[0]._gsap},bt=function(t,e,r){return(r=t[e])&&j(r)?t[e]():W(r)&&t.getAttribute&&t.getAttribute(e)||r},Ot=function(t,e){return(t=t.split(",")).forEach(e)||t},Mt=function(t){return Math.round(1e5*t)/1e5||0},kt=function(t){return Math.round(1e7*t)/1e7||0},Ct=function(t,e){var r=e.charAt(0),i=parseFloat(e.substr(2));return t=parseFloat(t),"+"===r?t+i:"-"===r?t-i:"*"===r?t*i:t/i},Pt=function(t,e){for(var r=e.length,i=0;t.indexOf(e[i])<0&&++is;)a=a._prev;return a?(e._next=a._next,a._next=e):(e._next=t[r],t[r]=e),e._next?e._next._prev=e:t[i]=e,e._prev=a,e.parent=e._dp=t,e},Lt=function(t,e,r,i){void 0===r&&(r="_first"),void 0===i&&(i="_last");var n=e._prev,s=e._next;n?n._next=s:t[r]===e&&(t[r]=s),s?s._prev=n:t[i]===e&&(t[i]=n),e._next=e._prev=e.parent=null},Nt=function(t,e){t.parent&&(!e||t.parent.autoRemoveChildren)&&t.parent.remove(t),t._act=0},Yt=function(t,e){if(t&&(!e||e._end>t._dur||e._start<0))for(var r=t;r;)r._dirty=1,r=r.parent;return t},qt=function(t){for(var e=t.parent;e&&e.parent;)e._dirty=1,e.totalDuration(),e=e.parent;return t},Xt=function t(e){return!e||e._ts&&t(e.parent)},jt=function(t){return t._repeat?Vt(t._tTime,t=t.duration()+t._rDelay)*t:0},Vt=function(t,e){var r=Math.floor(t/=e);return t&&r===t?r-1:r},Wt=function(t,e){return(t-e._start)*e._ts+(e._ts>=0?0:e._dirty?e.totalDuration():e._tDur)},Gt=function(t){return t._end=kt(t._start+(t._tDur/Math.abs(t._ts||t._rts||B)||0))},Ht=function(t,e){var r=t._dp;return r&&r.smoothChildTiming&&t._ts&&(t._start=kt(r._time-(t._ts>0?e/t._ts:((t._dirty?t.totalDuration():t._tDur)-e)/-t._ts)),Gt(t),r._dirty||Yt(r,t)),t},Qt=function(t,e){var r;if((e._time||e._initted&&!e._dur)&&(r=Wt(t.rawTime(),e),(!e._dur||oe(0,e.totalDuration(),r)-e._tTime>B)&&e.render(r,!0)),Yt(t,e)._dp&&t._initted&&t._time>=t._dur&&t._ts){if(t._dur=0&&r.totalTime(r._tTime),r=r._dp;t._zTime=-1e-8}},Zt=function(t,e,r,i){return e.parent&&Nt(e),e._start=kt((V(r)?r:r||t!==a?ne(t,r,e):t._time)+e._delay),e._end=kt(e._start+(e.totalDuration()/Math.abs(e.timeScale())||0)),It(t,e,"_first","_last",t._sort?"_start":0),te(e)||(t._recent=e),i||Qt(t,e),t},$t=function(t,e){return(at.ScrollTrigger||ht("scrollTrigger",e))&&at.ScrollTrigger.create(e,t)},Jt=function(t,e,r,i){return er(t,e),t._initted?!r&&t._pt&&(t._dur&&!1!==t.vars.lazy||!t._dur&&t.vars.lazy)&&l!==ze.frame?(ct.push(t),t._lazy=[e,i],1):void 0:1},Kt=function t(e){var r=e.parent;return r&&r._ts&&r._initted&&!r._lock&&(r.rawTime()<0||t(r))},te=function(t){var e=t.data;return"isFromStart"===e||"isStart"===e},ee=function(t,e,r,i){var n=t._repeat,s=kt(e)||0,a=t._tTime/t._tDur;return a&&!i&&(t._time*=s/t._dur),t._dur=s,t._tDur=n?n<0?1e10:kt(s*(n+1)+t._rDelay*n):s,a>0&&!i?Ht(t,t._tTime=t._tDur*a):t.parent&&Gt(t),r||Yt(t.parent,t),t},re=function(t){return t instanceof Qe?Yt(t):ee(t,t._dur)},ie={_start:0,endTime:_t,totalDuration:_t},ne=function t(e,r,i){var n,s,a,o=e.labels,u=e._recent||ie,h=e.duration()>=F?u.endTime(!1):e._dur;return X(r)&&(isNaN(r)||r in o)?(s=r.charAt(0),a="%"===r.substr(-1),n=r.indexOf("="),"<"===s||">"===s?(n>=0&&(r=r.replace(/=/,"")),("<"===s?u._start:u.endTime(u._repeat>=0))+(parseFloat(r.substr(1))||0)*(a?(n<0?u:i).totalDuration()/100:1)):n<0?(r in o||(o[r]=h),o[r]):(s=parseFloat(r.charAt(n-1)+r.substr(n+1)),a&&i&&(s=s/100*(J(i)?i[0]:i).totalDuration()),n>1?t(e,r.substr(0,n-1),i)+s:h+s)):null==r?h:+r},se=function(t,e,r){var i,n,s=V(e[1]),a=(s?2:1)+(t<2?0:1),o=e[a];if(s&&(o.duration=e[1]),o.parent=r,t){for(i=o,n=r;n&&!("immediateRender"in i);)i=n.vars.defaults||{},n=H(n.vars.inherit)&&n.parent;o.immediateRender=H(i.immediateRender),t<2?o.runBackwards=1:o.startAt=e[a-1]}return new ar(e[0],o,e[a+1])},ae=function(t,e){return t||0===t?e(t):e},oe=function(t,e,r){return re?e:r},ue=function(t,e){return X(t)&&(e=st.exec(t))?e[1]:""},he=[].slice,fe=function(t,e){return t&&G(t)&&"length"in t&&(!e&&!t.length||t.length-1 in t&&G(t[0]))&&!t.nodeType&&t!==o},le=function(t,e,r){return void 0===r&&(r=[]),t.forEach((function(t){var i;return X(t)&&!e||fe(t,1)?(i=r).push.apply(i,_e(t)):r.push(t)}))||r},_e=function(t,e,r){return!X(t)||r||!u&&Fe()?J(t)?le(t,r):fe(t)?he.call(t,0):t?[t]:[]:he.call((e||h).querySelectorAll(t),0)},pe=function(t){return t.sort((function(){return.5-Math.random()}))},ce=function(t){if(j(t))return t;var e=G(t)?t:{each:t},r=qe(e.ease),i=e.from||0,n=parseFloat(e.base)||0,s={},a=i>0&&i<1,o=isNaN(i)||a,u=e.axis,h=i,f=i;return X(i)?h=f={center:.5,edges:.5,end:1}[i]||0:!a&&o&&(h=i[0],f=i[1]),function(t,a,l){var _,p,c,d,m,g,v,y,x,T=(l||e).length,w=s[T];if(!w){if(!(x="auto"===e.grid?0:(e.grid||[1,F])[1])){for(v=-1e8;v<(v=l[x++].getBoundingClientRect().left)&&xv&&(v=m),mT?T-1:u?"y"===u?T/x:x:Math.max(x,T/x))||0)*("edges"===i?-1:1),w.b=T<0?n-T:n,w.u=ue(e.amount||e.each)||0,r=r&&T<0?Ne(r):r}return T=(w[t]-w.min)/w.max||0,kt(w.b+(r?r(T):T)*w.v)+w.u}},de=function(t){var e=Math.pow(10,((t+"").split(".")[1]||"").length);return function(r){var i=Math.round(parseFloat(r)/t)*t*e;return(i-i%1)/e+(V(r)?0:ue(r))}},me=function(t,e){var r,i,n=J(t);return!n&&G(t)&&(r=n=t.radius||F,t.values?(t=_e(t.values),(i=!V(t[0]))&&(r*=r)):t=de(t.increment)),ae(e,n?j(t)?function(e){return i=t(e),Math.abs(i-e)<=r?i:e}:function(e){for(var n,s,a=parseFloat(i?e.x:e),o=parseFloat(i?e.y:0),u=F,h=0,f=t.length;f--;)(n=i?(n=t[f].x-a)*n+(s=t[f].y-o)*s:Math.abs(t[f]-a))(n=Math.abs(n))&&(s=i,o=n);return s},we=function(t,e,r){var i,n,s=t.vars,a=s[e];if(a)return i=s[e+"Params"],n=s.callbackScope||t,r&&ct.length&&At(),i?a.apply(n,i):a.call(n)},be=function(t){return Nt(t),t.scrollTrigger&&t.scrollTrigger.kill(!1),t.progress()<1&&we(t,"onInterrupt"),t},Oe=function(t){var e=(t=!t.name&&t.default||t).name,r=j(t),i=e&&!r&&t.init?function(){this._props=[]}:t,n={init:_t,render:dr,add:Ke,kill:gr,modifier:mr,rawVars:0},s={targetTest:0,get:0,getSetter:lr,aliases:{},register:0};if(Fe(),t!==i){if(mt[e])return;Rt(i,Rt(Bt(t,n),s)),zt(i.prototype,zt(n,Bt(t,s))),mt[i.prop=e]=i,t.targetTest&&(yt.push(i),pt[e]=1),e=("css"===e?"CSS":e.charAt(0).toUpperCase()+e.substr(1))+"Plugin"}lt(e,i),t.register&&t.register(Or,i,xr)},Me=255,ke={aqua:[0,Me,Me],lime:[0,Me,0],silver:[192,192,192],black:[0,0,0],maroon:[128,0,0],teal:[0,128,128],blue:[0,0,Me],navy:[0,0,128],white:[Me,Me,Me],olive:[128,128,0],yellow:[Me,Me,0],orange:[Me,165,0],gray:[128,128,128],purple:[128,0,128],green:[0,128,0],red:[Me,0,0],pink:[Me,192,203],cyan:[0,Me,Me],transparent:[Me,Me,Me,0]},Ce=function(t,e,r){return(6*(t+=t<0?1:t>1?-1:0)<1?e+(r-e)*t*6:t<.5?r:3*t<2?e+(r-e)*(2/3-t)*6:e)*Me+.5|0},Pe=function(t,e,r){var i,n,s,a,o,u,h,f,l,_,p=t?V(t)?[t>>16,t>>8&Me,t&Me]:0:ke.black;if(!p){if(","===t.substr(-1)&&(t=t.substr(0,t.length-1)),ke[t])p=ke[t];else if("#"===t.charAt(0)){if(t.length<6&&(i=t.charAt(1),n=t.charAt(2),s=t.charAt(3),t="#"+i+i+n+n+s+s+(5===t.length?t.charAt(4)+t.charAt(4):"")),9===t.length)return[(p=parseInt(t.substr(1,6),16))>>16,p>>8&Me,p&Me,parseInt(t.substr(7),16)/255];p=[(t=parseInt(t.substr(1),16))>>16,t>>8&Me,t&Me]}else if("hsl"===t.substr(0,3))if(p=_=t.match(K),e){if(~t.indexOf("="))return p=t.match(tt),r&&p.length<4&&(p[3]=1),p}else a=+p[0]%360/360,o=+p[1]/100,i=2*(u=+p[2]/100)-(n=u<=.5?u*(o+1):u+o-u*o),p.length>3&&(p[3]*=1),p[0]=Ce(a+1/3,i,n),p[1]=Ce(a,i,n),p[2]=Ce(a-1/3,i,n);else p=t.match(K)||ke.transparent;p=p.map(Number)}return e&&!_&&(i=p[0]/Me,n=p[1]/Me,s=p[2]/Me,u=((h=Math.max(i,n,s))+(f=Math.min(i,n,s)))/2,h===f?a=o=0:(l=h-f,o=u>.5?l/(2-h-f):l/(h+f),a=h===i?(n-s)/l+(nT&&(b+=a-w),((r=(n=(O+=a)-b)-k)>0||o)&&(s=++g.frame,v=n-1e3*g.time,g.time=n/=1e3,k+=r+(r>=M?4:M-r),i=1),o||(c=d(t)),i)for(y=0;y=e&&y--},_listeners:C=[]}),Fe=function(){return!p&&ze.wake()},Be={},Ue=/^[\d.\-M][\d.\-,\s]/,Ie=/["']/g,Le=function(t){for(var e,r,i,n={},s=t.substr(1,t.length-3).split(":"),a=s[0],o=1,u=s.length;o1&&a.config?a.config.apply(null,~t.indexOf("{")?[Le(s[1])]:(e=t,r=e.indexOf("(")+1,i=e.indexOf(")"),n=e.indexOf("(",r),e.substring(r,~n&&n=1?r:1,s=(i||(e?.3:.45))/(r<1?r:1),a=s/U*(Math.asin(1/n)||0),o=function(t){return 1===t?1:n*Math.pow(2,-10*t)*q((t-a)*s)+1},u="out"===e?o:"in"===e?function(t){return 1-o(1-t)}:je(o);return s=U/s,u.config=function(r,i){return t(e,r,i)},u},We=function t(e,r){void 0===r&&(r=1.70158);var i=function(t){return t?--t*t*((r+1)*t+r)+1:0},n="out"===e?i:"in"===e?function(t){return 1-i(1-t)}:je(i);return n.config=function(r){return t(e,r)},n};Ot("Linear,Quad,Cubic,Quart,Quint,Strong",(function(t,e){var r=e<5?e+1:e;Xe(t+",Power"+(r-1),e?function(t){return Math.pow(t,r)}:function(t){return t},(function(t){return 1-Math.pow(1-t,r)}),(function(t){return t<.5?Math.pow(2*t,r)/2:1-Math.pow(2*(1-t),r)/2}))})),Be.Linear.easeNone=Be.none=Be.Linear.easeIn,Xe("Elastic",Ve("in"),Ve("out"),Ve()),A=7.5625,S=1/(D=2.75),Xe("Bounce",(function(t){return 1-E(1-t)}),E=function(t){return t0?t+(t+this._rDelay)*this._repeat:t):this.totalDuration()&&this._dur},e.totalDuration=function(t){return arguments.length?(this._dirty=0,ee(this,this._repeat<0?t:(t-this._repeat*this._rDelay)/(this._repeat+1))):this._tDur},e.totalTime=function(t,e){if(Fe(),!arguments.length)return this._tTime;var r=this._dp;if(r&&r.smoothChildTiming&&this._ts){for(Ht(this,t),!r._dp||r.parent||Qt(r,this);r&&r.parent;)r.parent._time!==r._start+(r._ts>=0?r._tTime/r._ts:(r.totalDuration()-r._tTime)/-r._ts)&&r.totalTime(r._tTime,!0),r=r.parent;!this.parent&&this._dp.autoRemoveChildren&&(this._ts>0&&t0||!this._tDur&&!t)&&Zt(this._dp,this,this._start-this._delay)}return(this._tTime!==t||!this._dur&&!e||this._initted&&Math.abs(this._zTime)===B||!t&&!this._initted&&(this.add||this._ptLookup))&&(this._ts||(this._pTime=t),Dt(this,t,e)),this},e.time=function(t,e){return arguments.length?this.totalTime(Math.min(this.totalDuration(),t+jt(this))%(this._dur+this._rDelay)||(t?this._dur:0),e):this._time},e.totalProgress=function(t,e){return arguments.length?this.totalTime(this.totalDuration()*t,e):this.totalDuration()?Math.min(1,this._tTime/this._tDur):this.ratio},e.progress=function(t,e){return arguments.length?this.totalTime(this.duration()*(!this._yoyo||1&this.iteration()?t:1-t)+jt(this),e):this.duration()?Math.min(1,this._time/this._dur):this.ratio},e.iteration=function(t,e){var r=this.duration()+this._rDelay;return arguments.length?this.totalTime(this._time+(t-1)*r,e):this._repeat?Vt(this._tTime,r)+1:1},e.timeScale=function(t){if(!arguments.length)return-1e-8===this._rts?0:this._rts;if(this._rts===t)return this;var e=this.parent&&this._ts?Wt(this.parent._time,this):this._tTime;return this._rts=+t||0,this._ts=this._ps||-1e-8===t?0:this._rts,this.totalTime(oe(-this._delay,this._tDur,e),!0),Gt(this),qt(this)},e.paused=function(t){return arguments.length?(this._ps!==t&&(this._ps=t,t?(this._pTime=this._tTime||Math.max(-this._delay,this.rawTime()),this._ts=this._act=0):(Fe(),this._ts=this._rts,this.totalTime(this.parent&&!this.parent.smoothChildTiming?this.rawTime():this._tTime||this._pTime,1===this.progress()&&Math.abs(this._zTime)!==B&&(this._tTime-=B)))),this):this._ps},e.startTime=function(t){if(arguments.length){this._start=t;var e=this.parent||this._dp;return e&&(e._sort||!this.parent)&&Zt(e,this,t-this._delay),this}return this._start},e.endTime=function(t){return this._start+(H(t)?this.totalDuration():this.duration())/Math.abs(this._ts||1)},e.rawTime=function(t){var e=this.parent||this._dp;return e?t&&(!this._ts||this._repeat&&this._time&&this.totalProgress()<1)?this._tTime%(this._dur+this._rDelay):this._ts?Wt(e.rawTime(t),this):this._tTime:this._tTime},e.globalTime=function(t){for(var e=this,r=arguments.length?t:e.rawTime();e;)r=e._start+r/(e._ts||1),e=e._dp;return r},e.repeat=function(t){return arguments.length?(this._repeat=t===1/0?-2:t,re(this)):-2===this._repeat?1/0:this._repeat},e.repeatDelay=function(t){if(arguments.length){var e=this._time;return this._rDelay=t,re(this),e?this.time(e):this}return this._rDelay},e.yoyo=function(t){return arguments.length?(this._yoyo=t,this):this._yoyo},e.seek=function(t,e){return this.totalTime(ne(this,t),H(e))},e.restart=function(t,e){return this.play().totalTime(t?-this._delay:0,H(e))},e.play=function(t,e){return null!=t&&this.seek(t,e),this.reversed(!1).paused(!1)},e.reverse=function(t,e){return null!=t&&this.seek(t||this.totalDuration(),e),this.reversed(!0).paused(!1)},e.pause=function(t,e){return null!=t&&this.seek(t,e),this.paused(!0)},e.resume=function(){return this.paused(!1)},e.reversed=function(t){return arguments.length?(!!t!==this.reversed()&&this.timeScale(-this._rts||(t?-1e-8:0)),this):this._rts<0},e.invalidate=function(){return this._initted=this._act=0,this._zTime=-1e-8,this},e.isActive=function(){var t,e=this.parent||this._dp,r=this._start;return!(e&&!(this._ts&&this._initted&&e.isActive()&&(t=e.rawTime(!0))>=r&&t1?(e?(i[t]=e,r&&(i[t+"Params"]=r),"onUpdate"===t&&(this._onUpdate=e)):delete i[t],this):i[t]},e.then=function(t){var e=this;return new Promise((function(r){var i=j(t)?t:Et,n=function(){var t=e.then;e.then=null,j(i)&&(i=i(e))&&(i.then||i===e)&&(e.then=t),r(i),e.then=t};e._initted&&1===e.totalProgress()&&e._ts>=0||!e._tTime&&e._ts<0?n():e._prom=n}))},e.kill=function(){be(this)},t}();Rt(He.prototype,{_time:0,_start:0,_end:0,_tTime:0,_tDur:0,_dirty:0,_repeat:0,_yoyo:!1,parent:null,_initted:!1,_rDelay:0,_ts:1,_dp:0,ratio:0,_zTime:-1e-8,_prom:0,_ps:!1,_rts:1});var Qe=function(t){function e(e,r){var n;return void 0===e&&(e={}),(n=t.call(this,e)||this).labels={},n.smoothChildTiming=!!e.smoothChildTiming,n.autoRemoveChildren=!!e.autoRemoveChildren,n._sort=H(e.sortChildren),a&&Zt(e.parent||a,i(n),r),e.reversed&&n.reverse(),e.paused&&n.paused(!0),e.scrollTrigger&&$t(i(n),e.scrollTrigger),n}n(e,t);var r=e.prototype;return r.to=function(t,e,r){return se(0,arguments,this),this},r.from=function(t,e,r){return se(1,arguments,this),this},r.fromTo=function(t,e,r,i){return se(2,arguments,this),this},r.set=function(t,e,r){return e.duration=0,e.parent=this,Ut(e).repeatDelay||(e.repeat=0),e.immediateRender=!!e.immediateRender,new ar(t,e,ne(this,r),1),this},r.call=function(t,e,r){return Zt(this,ar.delayedCall(0,t,e),r)},r.staggerTo=function(t,e,r,i,n,s,a){return r.duration=e,r.stagger=r.stagger||i,r.onComplete=s,r.onCompleteParams=a,r.parent=this,new ar(t,r,ne(this,n)),this},r.staggerFrom=function(t,e,r,i,n,s,a){return r.runBackwards=1,Ut(r).immediateRender=H(r.immediateRender),this.staggerTo(t,e,r,i,n,s,a)},r.staggerFromTo=function(t,e,r,i,n,s,a,o){return i.startAt=r,Ut(i).immediateRender=H(i.immediateRender),this.staggerTo(t,e,i,n,s,a,o)},r.render=function(t,e,r){var i,n,s,o,u,h,f,l,_,p,c,d,m=this._time,g=this._dirty?this.totalDuration():this._tDur,v=this._dur,y=t<=0?0:kt(t),x=this._zTime<0!=t<0&&(this._initted||!v);if(this!==a&&y>g&&t>=0&&(y=g),y!==this._tTime||r||x){if(m!==this._time&&v&&(y+=this._time-m,t+=this._time-m),i=y,_=this._start,h=!(l=this._ts),x&&(v||(m=this._zTime),(t||!e)&&(this._zTime=t)),this._repeat){if(c=this._yoyo,u=v+this._rDelay,this._repeat<-1&&t<0)return this.totalTime(100*u+t,e,r);if(i=kt(y%u),y===g?(o=this._repeat,i=v):((o=~~(y/u))&&o===y/u&&(i=v,o--),i>v&&(i=v)),p=Vt(this._tTime,u),!m&&this._tTime&&p!==o&&(p=o),c&&1&o&&(i=v-i,d=1),o!==p&&!this._lock){var T=c&&1&p,w=T===(c&&1&o);if(oe)for(i=t._first;i&&i._start<=r;){if("isPause"===i.data&&i._start>e)return i;i=i._next}else for(i=t._last;i&&i._start>=r;){if("isPause"===i.data&&i._start=m&&t>=0)for(n=this._first;n;){if(s=n._next,(n._act||i>=n._start)&&n._ts&&f!==n){if(n.parent!==this)return this.render(t,e,r);if(n.render(n._ts>0?(i-n._start)*n._ts:(n._dirty?n.totalDuration():n._tDur)+(i-n._start)*n._ts,e,r),i!==this._time||!this._ts&&!h){f=0,s&&(y+=this._zTime=-1e-8);break}}n=s}else{n=this._last;for(var b=t<0?t:i;n;){if(s=n._prev,(n._act||b<=n._end)&&n._ts&&f!==n){if(n.parent!==this)return this.render(t,e,r);if(n.render(n._ts>0?(b-n._start)*n._ts:(n._dirty?n.totalDuration():n._tDur)+(b-n._start)*n._ts,e,r),i!==this._time||!this._ts&&!h){f=0,s&&(y+=this._zTime=b?-1e-8:B);break}}n=s}}if(f&&!e&&(this.pause(),f.render(i>=m?0:-1e-8)._zTime=i>=m?1:-1,this._ts))return this._start=_,Gt(this),this.render(t,e,r);this._onUpdate&&!e&&we(this,"onUpdate",!0),(y===g&&this._tTime>=this.totalDuration()||!y&&m)&&(_!==this._start&&Math.abs(l)===Math.abs(this._ts)||this._lock||((t||!v)&&(y===g&&this._ts>0||!y&&this._ts<0)&&Nt(this,1),e||t<0&&!m||!y&&!m&&g||(we(this,y===g&&t>=0?"onComplete":"onReverseComplete",!0),this._prom&&!(y0)&&this._prom())))}return this},r.add=function(t,e){var r=this;if(V(e)||(e=ne(this,e,t)),!(t instanceof He)){if(J(t))return t.forEach((function(t){return r.add(t,e)})),this;if(X(t))return this.addLabel(t,e);if(!j(t))return this;t=ar.delayedCall(0,t)}return this!==t?Zt(this,t,e):this},r.getChildren=function(t,e,r,i){void 0===t&&(t=!0),void 0===e&&(e=!0),void 0===r&&(r=!0),void 0===i&&(i=-1e8);for(var n=[],s=this._first;s;)s._start>=i&&(s instanceof ar?e&&n.push(s):(r&&n.push(s),t&&n.push.apply(n,s.getChildren(!0,e,r)))),s=s._next;return n},r.getById=function(t){for(var e=this.getChildren(1,1,1),r=e.length;r--;)if(e[r].vars.id===t)return e[r]},r.remove=function(t){return X(t)?this.removeLabel(t):j(t)?this.killTweensOf(t):(Lt(this,t),t===this._recent&&(this._recent=this._last),Yt(this))},r.totalTime=function(e,r){return arguments.length?(this._forcing=1,!this._dp&&this._ts&&(this._start=kt(ze.time-(this._ts>0?e/this._ts:(this.totalDuration()-e)/-this._ts))),t.prototype.totalTime.call(this,e,r),this._forcing=0,this):this._tTime},r.addLabel=function(t,e){return this.labels[t]=ne(this,e),this},r.removeLabel=function(t){return delete this.labels[t],this},r.addPause=function(t,e,r){var i=ar.delayedCall(0,e||_t,r);return i.data="isPause",this._hasPause=1,Zt(this,i,ne(this,t))},r.removePause=function(t){var e=this._first;for(t=ne(this,t);e;)e._start===t&&"isPause"===e.data&&Nt(e),e=e._next},r.killTweensOf=function(t,e,r){for(var i=this.getTweensOf(t,r),n=i.length;n--;)Ze!==i[n]&&i[n].kill(t,e);return this},r.getTweensOf=function(t,e){for(var r,i=[],n=_e(t),s=this._first,a=V(e);s;)s instanceof ar?Pt(s._targets,n)&&(a?(!Ze||s._initted&&s._ts)&&s.globalTime(0)<=e&&s.globalTime(s.totalDuration())>e:!e||s.isActive())&&i.push(s):(r=s.getTweensOf(n,e)).length&&i.push.apply(i,r),s=s._next;return i},r.tweenTo=function(t,e){e=e||{};var r,i=this,n=ne(i,t),s=e,a=s.startAt,o=s.onStart,u=s.onStartParams,h=s.immediateRender,f=ar.to(i,Rt({ease:e.ease||"none",lazy:!1,immediateRender:!1,time:n,overwrite:"auto",duration:e.duration||Math.abs((n-(a&&"time"in a?a.time:i._time))/i.timeScale())||B,onStart:function(){if(i.pause(),!r){var t=e.duration||Math.abs((n-(a&&"time"in a?a.time:i._time))/i.timeScale());f._dur!==t&&ee(f,t,0,1).render(f._time,!0,!0),r=1}o&&o.apply(f,u||[])}},e));return h?f.render(0):f},r.tweenFromTo=function(t,e,r){return this.tweenTo(e,Rt({startAt:{time:ne(this,t)}},r))},r.recent=function(){return this._recent},r.nextLabel=function(t){return void 0===t&&(t=this._time),Te(this,ne(this,t))},r.previousLabel=function(t){return void 0===t&&(t=this._time),Te(this,ne(this,t),1)},r.currentLabel=function(t){return arguments.length?this.seek(t,!0):this.previousLabel(this._time+B)},r.shiftChildren=function(t,e,r){void 0===r&&(r=0);for(var i,n=this._first,s=this.labels;n;)n._start>=r&&(n._start+=t,n._end+=t),n=n._next;if(e)for(i in s)s[i]>=r&&(s[i]+=t);return Yt(this)},r.invalidate=function(){var e=this._first;for(this._lock=0;e;)e.invalidate(),e=e._next;return t.prototype.invalidate.call(this)},r.clear=function(t){void 0===t&&(t=!0);for(var e,r=this._first;r;)e=r._next,this.remove(r),r=e;return this._dp&&(this._time=this._tTime=this._pTime=0),t&&(this.labels={}),Yt(this)},r.totalDuration=function(t){var e,r,i,n=0,s=this,o=s._last,u=F;if(arguments.length)return s.timeScale((s._repeat<0?s.duration():s.totalDuration())/(s.reversed()?-t:t));if(s._dirty){for(i=s.parent;o;)e=o._prev,o._dirty&&o.totalDuration(),(r=o._start)>u&&s._sort&&o._ts&&!s._lock?(s._lock=1,Zt(s,o,r-o._delay,1)._lock=0):u=r,r<0&&o._ts&&(n-=r,(!i&&!s._dp||i&&i.smoothChildTiming)&&(s._start+=r/s._ts,s._time-=r,s._tTime-=r),s.shiftChildren(-r,!1,-1/0),u=0),o._end>n&&o._ts&&(n=o._end),o=e;ee(s,s===a&&s._time>n?s._time:n,1,1),s._dirty=0}return s._tDur},e.updateRoot=function(t){if(a._ts&&(Dt(a,Wt(t,a)),l=ze.frame),ze.frame>=vt){vt+=R.autoSleep||120;var e=a._first;if((!e||!e._ts)&&R.autoSleep&&ze._listeners.length<2){for(;e&&!e._ts;)e=e._next;e||ze.sleep()}}},e}(He);Rt(Qe.prototype,{_lock:0,_hasPause:0,_forcing:0});var Ze,$e,Je=function(t,e,r,i,n,s,a){var o,u,h,f,l,_,p,c,d=new xr(this._pt,t,e,0,1,cr,null,n),m=0,g=0;for(d.b=r,d.e=i,r+="",(p=~(i+="").indexOf("random("))&&(i=ye(i)),s&&(s(c=[r,i],t,e),r=c[0],i=c[1]),u=r.match(rt)||[];o=rt.exec(i);)f=o[0],l=i.substring(m,o.index),h?h=(h+1)%5:"rgba("===l.substr(-5)&&(h=1),f!==u[g++]&&(_=parseFloat(u[g-1])||0,d._pt={_next:d._pt,p:l||1===g?l:",",s:_,c:"="===f.charAt(1)?Ct(_,f)-_:parseFloat(f)-_,m:h&&h<4?Math.round:0},m=rt.lastIndex);return d.c=m0&&!A&&(e._startAt=0),D&&r<=0)return void(r&&(e._zTime=r))}else!1===A&&(e._startAt=0);else if(k&&D)if(S)!A&&(e._startAt=0);else if(r&&(T=!1),o=Rt({overwrite:!1,data:"isFromStart",lazy:T&&H(w),immediateRender:T,stagger:0,parent:R},i),m&&(o[_.prop]=m),Nt(e._startAt=ar.set(E,o)),r<0&&e._startAt.render(-1,!0),e._zTime=r,T){if(!r)return}else t(e._startAt,B);for(e._pt=e._ptCache=0,w=D&&H(w)||w&&!D,n=0;n")}));else{for(p in l={},b)"ease"===p||"easeEach"===p||rr(p,b[p],l,b.easeEach);for(p in l)for(A=l[p].sort((function(t,e){return t.t-e.t})),E=0,f=0;fp-B&&t>=0?p:tc&&(i=c)),(u=this._yoyo&&1&s)&&(l=this._yEase,i=c-i),o=Vt(this._tTime,a),i===_&&!r&&this._initted)return this._tTime=d,this;s!==o&&(f&&this._yEase&&Ye(f,u),!this.vars.repeatRefresh||u||this._lock||(this._lock=r=1,this.render(kt(a*s),!0).invalidate()._lock=0))}if(!this._initted){if(Jt(this,t<0?t:i,r,e))return this._tTime=0,this;if(_!==this._time)return this;if(c!==this._dur)return this.render(t,e,r)}if(this._tTime=d,this._time=i,!this._act&&this._ts&&(this._act=1,this._lazy=0),this.ratio=h=(l||this._ease)(i/c),this._from&&(this.ratio=h=1-h),i&&!_&&!e&&(we(this,"onStart"),this._tTime!==d))return this;for(n=this._pt;n;)n.r(h,n.d),n=n._next;f&&f.render(t<0?t:!i&&u?-1e-8:f._dur*f._ease(i/this._dur),e,r)||this._startAt&&(this._zTime=t),this._onUpdate&&!e&&(t<0&&this._startAt&&this._startAt.render(t,!0,r),we(this,"onUpdate")),this._repeat&&s!==o&&this.vars.onRepeat&&!e&&this.parent&&we(this,"onRepeat"),d!==this._tDur&&d||this._tTime!==d||(t<0&&this._startAt&&!this._onUpdate&&this._startAt.render(t,!0,!0),(t||!c)&&(d===this._tDur&&this._ts>0||!d&&this._ts<0)&&Nt(this,1),e||t<0&&!_||!d&&!_||(we(this,d===p?"onComplete":"onReverseComplete",!0),this._prom&&!(d0)&&this._prom()))}}else!function(t,e,r,i){var n,s,a,o=t.ratio,u=e<0||!e&&(!t._start&&Kt(t)&&(t._initted||!te(t))||(t._ts<0||t._dp._ts<0)&&!te(t))?0:1,h=t._rDelay,f=0;if(h&&t._repeat&&(f=oe(0,t._tDur,e),s=Vt(f,h),t._yoyo&&1&s&&(u=1-u),s!==Vt(t._tTime,h)&&(o=1-u,t.vars.repeatRefresh&&t._initted&&t.invalidate())),u!==o||i||t._zTime===B||!e&&t._zTime){if(!t._initted&&Jt(t,e,i,r))return;for(a=t._zTime,t._zTime=e||(r?B:0),r||(r=e&&!a),t.ratio=u,t._from&&(u=1-u),t._time=0,t._tTime=f,n=t._pt;n;)n.r(u,n.d),n=n._next;t._startAt&&e<0&&t._startAt.render(e,!0,!0),t._onUpdate&&!r&&we(t,"onUpdate"),f&&t._repeat&&!r&&t.parent&&we(t,"onRepeat"),(e>=t._tDur||e<0)&&t.ratio===u&&(u&&Nt(t,1),r||(we(t,u?"onComplete":"onReverseComplete",!0),t._prom&&t._prom()))}else t._zTime||(t._zTime=e)}(this,t,e,r);return this},r.targets=function(){return this._targets},r.invalidate=function(){return this._pt=this._op=this._startAt=this._onUpdate=this._lazy=this.ratio=0,this._ptLookup=[],this.timeline&&this.timeline.invalidate(),t.prototype.invalidate.call(this)},r.resetTo=function(t,e,r,i){p||ze.wake(),this._ts||this.play();var n=Math.min(this._dur,(this._dp._time-this._start)*this._ts);return this._initted||er(this,n),function(t,e,r,i,n,s,a){var o,u,h,f=(t._pt&&t._ptCache||(t._ptCache={}))[e];if(!f)for(f=t._ptCache[e]=[],u=t._ptLookup,h=t._targets.length;h--;){if((o=u[h][e])&&o.d&&o.d._pt)for(o=o.d._pt;o&&o.p!==e;)o=o._next;if(!o)return $e=1,t.vars[e]="+=0",er(t,a),$e=0,1;f.push(o)}for(h=f.length;h--;)(o=f[h]).s=!i&&0!==i||n?o.s+(i||0)+s*o.c:i,o.c=r-o.s,o.e&&(o.e=Mt(r)+ue(o.e)),o.b&&(o.b=o.s+ue(o.b))}(this,t,e,r,i,this._ease(n/this._dur),n)?this.resetTo(t,e,r,i):(Ht(this,0),this.parent||It(this._dp,this,"_first","_last",this._dp._sort?"_start":0),this.render(0))},r.kill=function(t,e){if(void 0===e&&(e="all"),!(t||e&&"all"!==e))return this._lazy=this._pt=0,this.parent?be(this):this;if(this.timeline){var r=this.timeline.totalDuration();return this.timeline.killTweensOf(t,e,Ze&&!0!==Ze.vars.overwrite)._first||be(this),this.parent&&r!==this.timeline.totalDuration()&&ee(this,this._dur*this.timeline._tDur/r,0,1),this}var i,n,s,a,o,u,h,f=this._targets,l=t?_e(t):f,_=this._ptLookup,p=this._pt;if((!e||"all"===e)&&function(t,e){for(var r=t.length,i=r===e.length;i&&r--&&t[r]===e[r];);return r<0}(f,l))return"all"===e&&(this._pt=0),be(this);for(i=this._op=this._op||[],"all"!==e&&(X(e)&&(o={},Ot(e,(function(t){return o[t]=1})),e=o),e=function(t,e){var r,i,n,s,a=t[0]?wt(t[0]).harness:0,o=a&&a.aliases;if(!o)return e;for(i in r=zt({},e),o)if(i in r)for(n=(s=o[i].split(",")).length;n--;)r[s[n]]=r[i];return r}(f,e)),h=f.length;h--;)if(~l.indexOf(f[h]))for(o in n=_[h],"all"===e?(i[h]=e,a=n,s={}):(s=i[h]=i[h]||{},a=e),a)(u=n&&n[o])&&("kill"in u.d&&!0!==u.d.kill(o)||Lt(this,u,"_pt"),delete n[o]),"all"!==s&&(s[o]=1);return this._initted&&!this._pt&&p&&be(this),this},e.to=function(t,r){return new e(t,r,arguments[2])},e.from=function(t,e){return se(1,arguments)},e.delayedCall=function(t,r,i,n){return new e(r,0,{immediateRender:!1,lazy:!1,overwrite:!1,delay:t,onComplete:r,onReverseComplete:r,onCompleteParams:i,onReverseCompleteParams:i,callbackScope:n})},e.fromTo=function(t,e,r){return se(2,arguments)},e.set=function(t,r){return r.duration=0,r.repeatDelay||(r.repeat=0),new e(t,r)},e.killTweensOf=function(t,e,r){return a.killTweensOf(t,e,r)},e}(He);Rt(ar.prototype,{_targets:[],_lazy:0,_startAt:0,_op:0,_onInit:0}),Ot("staggerTo,staggerFrom,staggerFromTo",(function(t){ar[t]=function(){var e=new Qe,r=he.call(arguments,0);return r.splice("staggerFromTo"===t?5:4,0,0),e[t].apply(e,r)}}));var or=function(t,e,r){return t[e]=r},ur=function(t,e,r){return t[e](r)},hr=function(t,e,r,i){return t[e](i.fp,r)},fr=function(t,e,r){return t.setAttribute(e,r)},lr=function(t,e){return j(t[e])?ur:W(t[e])&&t.setAttribute?fr:or},_r=function(t,e){return e.set(e.t,e.p,Math.round(1e6*(e.s+e.c*t))/1e6,e)},pr=function(t,e){return e.set(e.t,e.p,!!(e.s+e.c*t),e)},cr=function(t,e){var r=e._pt,i="";if(!t&&e.b)i=e.b;else if(1===t&&e.e)i=e.e;else{for(;r;)i=r.p+(r.m?r.m(r.s+r.c*t):Math.round(1e4*(r.s+r.c*t))/1e4)+i,r=r._next;i+=e.c}e.set(e.t,e.p,i,e)},dr=function(t,e){for(var r=e._pt;r;)r.r(t,r.d),r=r._next},mr=function(t,e,r,i){for(var n,s=this._pt;s;)n=s._next,s.p===i&&s.modifier(t,e,r),s=n},gr=function(t){for(var e,r,i=this._pt;i;)r=i._next,i.p===t&&!i.op||i.op===t?Lt(this,i,"_pt"):i.dep||(e=1),i=r;return!e},vr=function(t,e,r,i){i.mSet(t,e,i.m.call(i.tween,r,i.mt),i)},yr=function(t){for(var e,r,i,n,s=t._pt;s;){for(e=s._next,r=i;r&&r.pr>s.pr;)r=r._next;(s._prev=r?r._prev:n)?s._prev._next=s:i=s,(s._next=r)?r._prev=s:n=s,s=e}t._pt=i},xr=function(){function t(t,e,r,i,n,s,a,o,u){this.t=e,this.s=i,this.c=n,this.p=r,this.r=s||_r,this.d=a||this,this.set=o||or,this.pr=u||0,this._next=t,t&&(t._prev=this)}return t.prototype.modifier=function(t,e,r){this.mSet=this.mSet||this.set,this.set=vr,this.m=t,this.mt=r,this.tween=e},t}();Ot(xt+"parent,duration,ease,delay,overwrite,runBackwards,startAt,yoyo,immediateRender,repeat,repeatDelay,data,paused,reversed,lazy,callbackScope,stringFilter,id,yoyoEase,stagger,inherit,repeatRefresh,keyframes,autoRevert,scrollTrigger",(function(t){return pt[t]=1})),at.TweenMax=at.TweenLite=ar,at.TimelineLite=at.TimelineMax=Qe,a=new Qe({sortChildren:!1,defaults:z,autoRemoveChildren:!0,id:"root",smoothChildTiming:!0}),R.stringFilter=Re;var Tr={registerPlugin:function(){for(var t=arguments.length,e=new Array(t),r=0;r1){var i=t.map((function(t){return Or.quickSetter(t,e,r)})),n=i.length;return function(t){for(var e=n;e--;)i[e](t)}}t=t[0]||{};var s=mt[e],a=wt(t),o=a.harness&&(a.harness.aliases||{})[e]||e,u=s?function(e){var i=new s;_._pt=0,i.init(t,r?e+r:e,_,0,[t]),i.render(1,i),_._pt&&dr(1,_)}:a.set(t,o);return s?u:function(e){return u(t,o,r?e+r:e,a,1)}},quickTo:function(t,e,r){var i,n=Or.to(t,zt(((i={})[e]="+=0.1",i.paused=!0,i),r||{})),s=function(t,r,i){return n.resetTo(e,t,r,i)};return s.tween=n,s},isTweening:function(t){return a.getTweensOf(t,!0).length>0},defaults:function(t){return t&&t.ease&&(t.ease=qe(t.ease,z.ease)),Ft(z,t||{})},config:function(t){return Ft(R,t||{})},registerEffect:function(t){var e=t.name,r=t.effect,i=t.plugins,n=t.defaults,s=t.extendTimeline;(i||"").split(",").forEach((function(t){return t&&!mt[t]&&!at[t]&&ft(e+" effect requires "+t+" plugin.")})),gt[e]=function(t,e,i){return r(_e(t),Rt(e||{},n),i)},s&&(Qe.prototype[e]=function(t,r,i){return this.add(gt[e](t,G(r)?r:(i=r)&&{},this),i)})},registerEase:function(t,e){Be[t]=qe(e)},parseEase:function(t,e){return arguments.length?qe(t,e):Be},getById:function(t){return a.getById(t)},exportRoot:function(t,e){void 0===t&&(t={});var r,i,n=new Qe(t);for(n.smoothChildTiming=H(t.smoothChildTiming),a.remove(n),n._dp=0,n._time=n._tTime=a._time,r=a._first;r;)i=r._next,!e&&!r._dur&&r instanceof ar&&r.vars.onComplete===r._targets[0]||Zt(n,r,r._start-r._delay),r=i;return Zt(a,n,0),n},utils:{wrap:function t(e,r,i){var n=r-e;return J(e)?ve(e,t(0,e.length),r):ae(i,(function(t){return(n+(t-e)%n)%n+e}))},wrapYoyo:function t(e,r,i){var n=r-e,s=2*n;return J(e)?ve(e,t(0,e.length-1),r):ae(i,(function(t){return e+((t=(s+(t-e)%s)%s||0)>n?s-t:t)}))},distribute:ce,random:ge,snap:me,normalize:function(t,e,r){return xe(t,e,0,1,r)},getUnit:ue,clamp:function(t,e,r){return ae(r,(function(r){return oe(t,e,r)}))},splitColor:Pe,toArray:_e,selector:function(t){return t=_e(t)[0]||ft("Invalid scope")||{},function(e){var r=t.current||t.nativeElement||t;return _e(e,r.querySelectorAll?r:r===t?ft("Invalid scope")||h.createElement("div"):t)}},mapRange:xe,pipe:function(){for(var t=arguments.length,e=new Array(t),r=0;r=0?B[n]:"")+t},I=function(){"undefined"!=typeof window&&window.document&&(i=window,s=i.document,a=s.documentElement,u=z("div")||{style:{}},z("div"),E=U(E),R=E+"Origin",u.style.cssText="border-width:0;line-height:0;position:absolute;padding:0",f=!!U("perspective"),o=1)},L=function t(e){var r,i=z("svg",this.ownerSVGElement&&this.ownerSVGElement.getAttribute("xmlns")||"http://www.w3.org/2000/svg"),n=this.parentNode,s=this.nextSibling,o=this.style.cssText;if(a.appendChild(i),i.appendChild(this),this.style.display="block",e)try{r=this.getBBox(),this._gsapBBox=this.getBBox,this.getBBox=t}catch(t){}else this._gsapBBox&&(r=this._gsapBBox());return n&&(s?n.insertBefore(this,s):n.appendChild(this)),a.removeChild(i),this.style.cssText=o,r},N=function(t,e){for(var r=e.length;r--;)if(t.hasAttribute(e[r]))return t.getAttribute(e[r])},Y=function(t){var e;try{e=t.getBBox()}catch(r){e=L.call(t,!0)}return e&&(e.width||e.height)||t.getBBox===L||(e=L.call(t,!0)),!e||e.width||e.x||e.y?e:{x:+N(t,["x","cx","x1"])||0,y:+N(t,["y","cy","y1"])||0,width:0,height:0}},q=function(t){return!(!t.getCTM||t.parentNode&&!t.ownerSVGElement||!Y(t))},X=function(t,e){if(e){var r=t.style;e in _&&e!==R&&(e=E),r.removeProperty?("ms"!==e.substr(0,2)&&"webkit"!==e.substr(0,6)||(e="-"+e),r.removeProperty(e.replace(m,"-$1").toLowerCase())):r.removeAttribute(e)}},j=function(t,e,r,i,n,s){var a=new l.PropTween(t._pt,e,r,0,1,s?M:O);return t._pt=a,a.b=i,a.e=n,t._props.push(r),a},V={deg:1,rad:1,turn:1},W=function t(e,r,i,n){var a,o,h,f,p=parseFloat(i)||0,c=(i+"").trim().substr((p+"").length)||"px",d=u.style,m=g.test(r),v="svg"===e.tagName.toLowerCase(),y=(v?"client":"offset")+(m?"Width":"Height"),x=100,T="px"===n,w="%"===n;return n===c||!p||V[n]||V[c]?p:("px"!==c&&!T&&(p=t(e,r,i,"px")),f=e.getCTM&&q(e),!w&&"%"!==c||!_[r]&&!~r.indexOf("adius")?(d[m?"width":"height"]=x+(T?c:n),o=~r.indexOf("adius")||"em"===n&&e.appendChild&&!v?e:e.parentNode,f&&(o=(e.ownerSVGElement||{}).parentNode),o&&o!==s&&o.appendChild||(o=s.body),(h=o._gsap)&&w&&h.width&&m&&h.time===l._ticker.time?l._round(p/h.width*x):((w||"%"===c)&&(d.position=F(e,"position")),o===e&&(d.position="static"),o.appendChild(u),a=u[y],o.removeChild(u),d.position="absolute",m&&w&&((h=l._getCache(o)).time=l._ticker.time,h.width=o[y]),l._round(T?a*p/x:a&&p?x/a*p:0))):(a=f?e.getBBox()[m?"width":"height"]:e[y],l._round(w?p/a*x:p/100*a)))},G=function(t,e,r,i){var n;return o||I(),e in y&&"transform"!==e&&~(e=y[e]).indexOf(",")&&(e=e.split(",")[0]),_[e]&&"transform"!==e?(n=nt(t,i),n="transformOrigin"!==e?n[e]:n.svg?n.origin:st(F(t,R))+" "+n.zOrigin+"px"):(!(n=t.style[e])||"auto"===n||i||~(n+"").indexOf("calc("))&&(n=$[e]&&$[e](t,e,r)||F(t,e)||l._getProperty(t,e)||("opacity"===e?1:0)),r&&!~(n+"").trim().indexOf(" ")?W(t,e,n,r)+r:n},H=function(t,e,r,i){if(!r||"none"===r){var n=U(e,t,1),s=n&&F(t,n,1);s&&s!==r?(e=n,r=s):"borderColor"===e&&(r=F(t,"borderTopColor"))}var a,o,u,h,f,_,p,c,d,m,g,v=new l.PropTween(this._pt,t.style,e,0,1,l._renderComplexString),y=0,x=0;if(v.b=r,v.e=i,r+="","auto"===(i+="")&&(t.style[e]=i,i=F(t,e)||i,t.style[e]=r),a=[r,i],l._colorStringFilter(a),i=a[1],u=(r=a[0]).match(l._numWithUnitExp)||[],(i.match(l._numWithUnitExp)||[]).length){for(;o=l._numWithUnitExp.exec(i);)p=o[0],d=i.substring(y,o.index),f?f=(f+1)%5:"rgba("!==d.substr(-5)&&"hsla("!==d.substr(-5)||(f=1),p!==(_=u[x++]||"")&&(h=parseFloat(_)||0,g=_.substr((h+"").length),"="===p.charAt(1)&&(p=l._parseRelative(h,p)+g),c=parseFloat(p),m=p.substr((c+"").length),y=l._numWithUnitExp.lastIndex-m.length,m||(m=m||l._config.units[e]||g,y===i.length&&(i+=m,v.e+=m)),g!==m&&(h=W(t,e,_,m)||0),v._pt={_next:v._pt,p:d||1===x?d:",",s:h,c:c-h,m:f&&f<4||"zIndex"===e?Math.round:0});v.c=y-1;)r=o[n],_[r]&&(i=1,r="transformOrigin"===r?R:E),X(s,r);i&&(X(s,E),u&&(u.svg&&s.removeAttribute("transform"),nt(s,1),u.uncache=1))}},$={clearProps:function(t,e,r,i,n){if("isFromStart"!==n.data){var s=t._pt=new l.PropTween(t._pt,e,r,0,0,Z);return s.u=i,s.pr=-10,s.tween=n,t._props.push(r),1}}},J=[1,0,0,1,0,0],K={},tt=function(t){return"matrix(1, 0, 0, 1, 0, 0)"===t||"none"===t||!t},et=function(t){var e=F(t,E);return tt(e)?J:e.substr(7).match(l._numExp).map(l._round)},rt=function(t,e){var r,i,n,s,o=t._gsap||l._getCache(t),u=t.style,h=et(t);return o.svg&&t.getAttribute("transform")?"1,0,0,1,0,0"===(h=[(n=t.transform.baseVal.consolidate().matrix).a,n.b,n.c,n.d,n.e,n.f]).join(",")?J:h:(h!==J||t.offsetParent||t===a||o.svg||(n=u.display,u.display="block",(r=t.parentNode)&&t.offsetParent||(s=1,i=t.nextSibling,a.appendChild(t)),h=et(t),n?u.display=n:X(t,"display"),s&&(i?r.insertBefore(t,i):r?r.appendChild(t):a.removeChild(t))),e&&h.length>6?[h[0],h[1],h[4],h[5],h[12],h[13]]:h)},it=function(t,e,r,i,n,s){var a,o,u,h=t._gsap,f=n||rt(t,!0),l=h.xOrigin||0,_=h.yOrigin||0,p=h.xOffset||0,c=h.yOffset||0,d=f[0],m=f[1],g=f[2],v=f[3],y=f[4],x=f[5],T=e.split(" "),w=parseFloat(T[0])||0,b=parseFloat(T[1])||0;r?f!==J&&(o=d*v-m*g)&&(u=w*(-m/o)+b*(d/o)-(d*x-m*y)/o,w=w*(v/o)+b*(-g/o)+(g*x-v*y)/o,b=u):(w=(a=Y(t)).x+(~T[0].indexOf("%")?w/100*a.width:w),b=a.y+(~(T[1]||T[0]).indexOf("%")?b/100*a.height:b)),i||!1!==i&&h.smooth?(y=w-l,x=b-_,h.xOffset=p+(y*d+x*g)-y,h.yOffset=c+(y*m+x*v)-x):h.xOffset=h.yOffset=0,h.xOrigin=w,h.yOrigin=b,h.smooth=!!i,h.origin=e,h.originIsAbsolute=!!r,t.style[R]="0px 0px",s&&(j(s,h,"xOrigin",l,w),j(s,h,"yOrigin",_,b),j(s,h,"xOffset",p,h.xOffset),j(s,h,"yOffset",c,h.yOffset)),t.setAttribute("data-svg-origin",w+" "+b)},nt=function(t,e){var r=t._gsap||new l.GSCache(t);if("x"in r&&!e&&!r.uncache)return r;var i,n,s,a,o,u,h,_,m,g,v,y,x,T,w,b,O,M,k,C,P,A,D,S,z,B,U,I,L,N,Y,X,j=t.style,V=r.scaleX<0,W="px",G="deg",H=F(t,R)||"0";return i=n=s=u=h=_=m=g=v=0,a=o=1,r.svg=!(!t.getCTM||!q(t)),T=rt(t,r.svg),r.svg&&(S=(!r.uncache||"0px 0px"===H)&&!e&&t.getAttribute("data-svg-origin"),it(t,S||H,!!S||r.originIsAbsolute,!1!==r.smooth,T)),y=r.xOrigin||0,x=r.yOrigin||0,T!==J&&(M=T[0],k=T[1],C=T[2],P=T[3],i=A=T[4],n=D=T[5],6===T.length?(a=Math.sqrt(M*M+k*k),o=Math.sqrt(P*P+C*C),u=M||k?d(k,M)*p:0,(m=C||P?d(C,P)*p+u:0)&&(o*=Math.abs(Math.cos(m*c))),r.svg&&(i-=y-(y*M+x*C),n-=x-(y*k+x*P))):(X=T[6],N=T[7],U=T[8],I=T[9],L=T[10],Y=T[11],i=T[12],n=T[13],s=T[14],h=(w=d(X,L))*p,w&&(S=A*(b=Math.cos(-w))+U*(O=Math.sin(-w)),z=D*b+I*O,B=X*b+L*O,U=A*-O+U*b,I=D*-O+I*b,L=X*-O+L*b,Y=N*-O+Y*b,A=S,D=z,X=B),_=(w=d(-C,L))*p,w&&(b=Math.cos(-w),Y=P*(O=Math.sin(-w))+Y*b,M=S=M*b-U*O,k=z=k*b-I*O,C=B=C*b-L*O),u=(w=d(k,M))*p,w&&(S=M*(b=Math.cos(w))+k*(O=Math.sin(w)),z=A*b+D*O,k=k*b-M*O,D=D*b-A*O,M=S,A=z),h&&Math.abs(h)+Math.abs(u)>359.9&&(h=u=0,_=180-_),a=l._round(Math.sqrt(M*M+k*k+C*C)),o=l._round(Math.sqrt(D*D+X*X)),w=d(A,D),m=Math.abs(w)>2e-4?w*p:0,v=Y?1/(Y<0?-Y:Y):0),r.svg&&(S=t.getAttribute("transform"),r.forceCSS=t.setAttribute("transform","")||!tt(F(t,E)),S&&t.setAttribute("transform",S))),Math.abs(m)>90&&Math.abs(m)<270&&(V?(a*=-1,m+=u<=0?180:-180,u+=u<=0?180:-180):(o*=-1,m+=m<=0?180:-180)),e=e||r.uncache,r.x=i-((r.xPercent=i&&(!e&&r.xPercent||(Math.round(t.offsetWidth/2)===Math.round(-i)?-50:0)))?t.offsetWidth*r.xPercent/100:0)+W,r.y=n-((r.yPercent=n&&(!e&&r.yPercent||(Math.round(t.offsetHeight/2)===Math.round(-n)?-50:0)))?t.offsetHeight*r.yPercent/100:0)+W,r.z=s+W,r.scaleX=l._round(a),r.scaleY=l._round(o),r.rotation=l._round(u)+G,r.rotationX=l._round(h)+G,r.rotationY=l._round(_)+G,r.skewX=m+G,r.skewY=g+G,r.transformPerspective=v+W,(r.zOrigin=parseFloat(H.split(" ")[2])||0)&&(j[R]=st(H)),r.xOffset=r.yOffset=0,r.force3D=l._config.force3D,r.renderTransform=r.svg?_t:f?lt:ot,r.uncache=0,r},st=function(t){return(t=t.split(" "))[0]+" "+t[1]},at=function(t,e,r){var i=l.getUnit(e);return l._round(parseFloat(e)+parseFloat(W(t,"x",r+"px",i)))+i},ot=function(t,e){e.z="0px",e.rotationY=e.rotationX="0deg",e.force3D=0,lt(t,e)},ut="0deg",ht="0px",ft=") ",lt=function(t,e){var r=e||this,i=r.xPercent,n=r.yPercent,s=r.x,a=r.y,o=r.z,u=r.rotation,h=r.rotationY,f=r.rotationX,l=r.skewX,_=r.skewY,p=r.scaleX,d=r.scaleY,m=r.transformPerspective,g=r.force3D,v=r.target,y=r.zOrigin,x="",T="auto"===g&&t&&1!==t||!0===g;if(y&&(f!==ut||h!==ut)){var w,b=parseFloat(h)*c,O=Math.sin(b),M=Math.cos(b);b=parseFloat(f)*c,w=Math.cos(b),s=at(v,s,O*w*-y),a=at(v,a,-Math.sin(b)*-y),o=at(v,o,M*w*-y+y)}m!==ht&&(x+="perspective("+m+ft),(i||n)&&(x+="translate("+i+"%, "+n+"%) "),(T||s!==ht||a!==ht||o!==ht)&&(x+=o!==ht||T?"translate3d("+s+", "+a+", "+o+") ":"translate("+s+", "+a+ft),u!==ut&&(x+="rotate("+u+ft),h!==ut&&(x+="rotateY("+h+ft),f!==ut&&(x+="rotateX("+f+ft),l===ut&&_===ut||(x+="skew("+l+", "+_+ft),1===p&&1===d||(x+="scale("+p+", "+d+ft),v.style[E]=x||"translate(0, 0)"},_t=function(t,e){var r,i,n,s,a,o=e||this,u=o.xPercent,h=o.yPercent,f=o.x,_=o.y,p=o.rotation,d=o.skewX,m=o.skewY,g=o.scaleX,v=o.scaleY,y=o.target,x=o.xOrigin,T=o.yOrigin,w=o.xOffset,b=o.yOffset,O=o.forceCSS,M=parseFloat(f),k=parseFloat(_);p=parseFloat(p),d=parseFloat(d),(m=parseFloat(m))&&(d+=m=parseFloat(m),p+=m),p||d?(p*=c,d*=c,r=Math.cos(p)*g,i=Math.sin(p)*g,n=Math.sin(p-d)*-v,s=Math.cos(p-d)*v,d&&(m*=c,a=Math.tan(d-m),n*=a=Math.sqrt(1+a*a),s*=a,m&&(a=Math.tan(m),r*=a=Math.sqrt(1+a*a),i*=a)),r=l._round(r),i=l._round(i),n=l._round(n),s=l._round(s)):(r=g,s=v,i=n=0),(M&&!~(f+"").indexOf("px")||k&&!~(_+"").indexOf("px"))&&(M=W(y,"x",f,"px"),k=W(y,"y",_,"px")),(x||T||w||b)&&(M=l._round(M+x-(x*r+T*n)+w),k=l._round(k+T-(x*i+T*s)+b)),(u||h)&&(a=y.getBBox(),M=l._round(M+u/100*a.width),k=l._round(k+h/100*a.height)),a="matrix("+r+","+i+","+n+","+s+","+M+","+k+")",y.setAttribute("transform",a),O&&(y.style[E]=a)},pt=function(t,e,r,i,n){var s,a,o=360,u=l._isString(n),h=parseFloat(n)*(u&&~n.indexOf("rad")?p:1)-i,f=i+h+"deg";return u&&("short"===(s=n.split("_")[1])&&(h%=o)!==h%180&&(h+=h<0?o:-360),"cw"===s&&h<0?h=(h+36e9)%o-~~(h/o)*o:"ccw"===s&&h>0&&(h=(h-36e9)%o-~~(h/o)*o)),t._pt=a=new l.PropTween(t._pt,e,r,i,h,T),a.e=f,a.u="deg",t._props.push(r),a},ct=function(t,e){for(var r in e)t[r]=e[r];return t},dt=function(t,e,r){var i,n,s,a,o,u,h,f=ct({},r._gsap),p=r.style;for(n in f.svg?(s=r.getAttribute("transform"),r.setAttribute("transform",""),p[E]=e,i=nt(r,1),X(r,E),r.setAttribute("transform",s)):(s=getComputedStyle(r)[E],p[E]=e,i=nt(r,1),p[E]=s),_)(s=f[n])!==(a=i[n])&&"perspective,force3D,transformOrigin,svgOrigin".indexOf(n)<0&&(o=l.getUnit(s)!==(h=l.getUnit(a))?W(r,n,s,h):parseFloat(s),u=parseFloat(a),t._pt=new l.PropTween(t._pt,i,n,o,u-o,x),t._pt.u=h||0,t._props.push(n));ct(i,f)};l._forEachName("padding,margin,Width,Radius",(function(t,e){var r="Top",i="Right",n="Bottom",s="Left",a=(e<3?[r,i,n,s]:[r+s,r+i,n+i,n+s]).map((function(r){return e<2?t+r:"border"+r+t}));$[e>1?"border"+t:t]=function(t,e,r,i,n){var s,o;if(arguments.length<4)return s=a.map((function(e){return G(t,e,r)})),5===(o=s.join(" ")).split(s[0]).length?s[0]:o;s=(i+"").split(" "),o={},a.forEach((function(t,e){return o[t]=s[e]=s[e]||s[(e-1)/2|0]})),t.init(e,o,n)}}));var mt,gt,vt,yt={name:"css",register:I,targetTest:function(t){return t.style&&t.nodeType},init:function(t,e,r,i,n){var s,a,u,h,f,p,c,d,m,g,T,O,M,k,C,P,A,D,S,R=this._props,z=t.style,F=r.vars.startAt;for(c in o||I(),e)if("autoRound"!==c&&(a=e[c],!l._plugins[c]||!l._checkPlugin(c,e,r,i,t,n)))if(f=typeof a,p=$[c],"function"===f&&(f=typeof(a=a.call(r,i,t,n))),"string"===f&&~a.indexOf("random(")&&(a=l._replaceRandom(a)),p)p(this,t,c,a,r)&&(C=1);else if("--"===c.substr(0,2))s=(getComputedStyle(t).getPropertyValue(c)+"").trim(),a+="",l._colorExp.lastIndex=0,l._colorExp.test(s)||(d=l.getUnit(s),m=l.getUnit(a)),m?d!==m&&(s=W(t,c,s,m)+m):d&&(a+=d),this.add(z,"setProperty",s,a,i,n,0,0,c),R.push(c);else if("undefined"!==f){if(F&&c in F?(s="function"==typeof F[c]?F[c].call(r,i,t,n):F[c],l._isString(s)&&~s.indexOf("random(")&&(s=l._replaceRandom(s)),l.getUnit(s+"")||(s+=l._config.units[c]||l.getUnit(G(t,c))||""),"="===(s+"").charAt(1)&&(s=G(t,c))):s=G(t,c),h=parseFloat(s),(g="string"===f&&"="===a.charAt(1)&&a.substr(0,2))&&(a=a.substr(2)),u=parseFloat(a),c in y&&("autoAlpha"===c&&(1===h&&"hidden"===G(t,"visibility")&&u&&(h=0),j(this,z,"visibility",h?"inherit":"hidden",u?"inherit":"hidden",!u)),"scale"!==c&&"transform"!==c&&~(c=y[c]).indexOf(",")&&(c=c.split(",")[0])),T=c in _)if(O||((M=t._gsap).renderTransform&&!e.parseTransform||nt(t,e.parseTransform),k=!1!==e.smoothOrigin&&M.smooth,(O=this._pt=new l.PropTween(this._pt,z,E,0,1,M.renderTransform,M,0,-1)).dep=1),"scale"===c)this._pt=new l.PropTween(this._pt,M,"scaleY",M.scaleY,(g?l._parseRelative(M.scaleY,g+u):u)-M.scaleY||0),R.push("scaleY",c),c+="X";else{if("transformOrigin"===c){A=void 0,D=void 0,S=void 0,A=(P=a).split(" "),D=A[0],S=A[1]||"50%","top"!==D&&"bottom"!==D&&"left"!==S&&"right"!==S||(P=D,D=S,S=P),A[0]=Q[D]||D,A[1]=Q[S]||S,a=A.join(" "),M.svg?it(t,a,0,k,0,this):((m=parseFloat(a.split(" ")[2])||0)!==M.zOrigin&&j(this,M,"zOrigin",M.zOrigin,m),j(this,z,c,st(s),st(a)));continue}if("svgOrigin"===c){it(t,a,1,k,0,this);continue}if(c in K){pt(this,M,c,h,g?l._parseRelative(h,g+a):a);continue}if("smoothOrigin"===c){j(this,M,"smooth",M.smooth,a);continue}if("force3D"===c){M[c]=a;continue}if("transform"===c){dt(this,a,t);continue}}else c in z||(c=U(c)||c);if(T||(u||0===u)&&(h||0===h)&&!v.test(a)&&c in z)u||(u=0),(d=(s+"").substr((h+"").length))!==(m=l.getUnit(a)||(c in l._config.units?l._config.units[c]:d))&&(h=W(t,c,s,m)),this._pt=new l.PropTween(this._pt,T?M:z,c,h,(g?l._parseRelative(h,g+u):u)-h,T||"px"!==m&&"zIndex"!==c||!1===e.autoRound?x:b),this._pt.u=m||0,d!==m&&"%"!==m&&(this._pt.b=s,this._pt.r=w);else if(c in z)H.call(this,t,c,s,g?g+a:a);else{if(!(c in t)){l._missingPlugin(c,a);continue}this.add(t,c,s||t[c],g?g+a:a,i,n)}R.push(c)}C&&l._sortPropTweensByPriority(this)},get:G,aliases:y,getSetter:function(t,e,r){var i=y[e];return i&&i.indexOf(",")<0&&(e=i),e in _&&e!==R&&(t._gsap.x||G(t,"x"))?r&&h===r?"scale"===e?A:P:(h=r||{},"scale"===e?D:S):t.style&&!l._isUndefined(t.style[e])?k:~e.indexOf("-")?C:l._getSetter(t,e)},core:{_removeProperty:X,_getMatrix:rt}};l.gsap.utils.checkPrefix=U,mt="x,y,z,scale,scaleX,scaleY,xPercent,yPercent",gt="rotation,rotationX,rotationY,skewX,skewY",vt=l._forEachName(mt+","+gt+",transform,transformOrigin,svgOrigin,force3D,smoothOrigin,transformPerspective",(function(t){_[t]=1})),l._forEachName(gt,(function(t){l._config.units[t]="deg",K[t]=1})),y[vt[13]]=mt+","+gt,l._forEachName("0:translateX,1:translateY,2:translateZ,8:rotate,8:rotationZ,8:rotateZ,9:rotateX,10:rotateY",(function(t){var e=t.split(":");y[e[1]]=vt[e[0]]})),l._forEachName("x,y,z,top,right,bottom,left,width,height,fontSize,padding,margin,perspective",(function(t){l._config.units[t]="px"})),l.gsap.registerPlugin(yt)})); -------------------------------------------------------------------------------- /dist/index5.df9dd68a.js: -------------------------------------------------------------------------------- 1 | !function(){var e="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:"undefined"!=typeof window?window:"undefined"!=typeof global?global:{},t={},r={},n=e.parcelRequire7cb3;null==n&&((n=function(e){if(e in t)return t[e].exports;if(e in r){var n=r[e];delete r[e];var o={id:e,exports:{}};return t[e]=o,n.call(o.exports,o,o.exports),o.exports}var i=new Error("Cannot find module '"+e+"'");throw i.code="MODULE_NOT_FOUND",i}).register=function(e,t){r[e]=t},e.parcelRequire7cb3=n);var o=n("1OZqT"),i=n("fNRGU"),s=(o=n("1OZqT"),n("cH00A")),a=function(){"use strict";function e(t){var r=this;i.classCallCheck(this,e),i.defineProperty(this,"DOM",{el:null,words:null}),i.defineProperty(this,"totalWords",8),i.defineProperty(this,"tyIncrement",16),i.defineProperty(this,"txIncrement",2),i.defineProperty(this,"opacityIncrement",.15),i.defineProperty(this,"delayIncrement",.01),i.defineProperty(this,"scrollTimeline",void 0),i.defineProperty(this,"observer",void 0),this.DOM.el=t,this.layout(),this.setBoundaries(),this.createScrollTimeline(),this.createObserver(),window.addEventListener("resize",(function(){return r.setBoundaries()}))}return i.createClass(e,[{key:"layout",value:function(){Math.floor(this.totalWords/2);for(var e="",t=0;t').concat(this.DOM.el.innerHTML,"")}this.DOM.el.innerHTML=e,this.DOM.el.classList.add("text-rep"),this.DOM.words=i.toConsumableArray(this.DOM.el.querySelectorAll("span")).slice(0,-1)}},{key:"setBoundaries",value:function(){var e=o.getHeight(this.DOM.el)*Math.floor(this.totalWords)*this.tyIncrement/100;s.gsap.set(this.DOM.el,{paddingBottom:e})}},{key:"createScrollTimeline",value:function(){this.scrollTimeline=s.gsap.timeline({paused:!0}).to(this.DOM.words,{duration:1,ease:"none",yPercent:function(e,t){return-1*t.dataset.ty},xPercent:function(e,t){return-1*t.dataset.tx},startAt:{opacity:0},opacity:function(e,t){return t.dataset.opacity},delay:function(e,t){return t.dataset.delay}})}},{key:"createObserver",value:function(){var e=this;this.observer=new IntersectionObserver((function(t){t[0].intersectionRatio>0?(e.isLoaded||(e.isLoaded=!0),s.gsap.ticker.add(e.progressTween)):e.isLoaded?s.gsap.ticker.remove(e.progressTween):(e.isLoaded=!0,s.gsap.ticker.add(e.progressTween,!0))}),{root:null,rootMargin:"0px 0px",threshold:0}),this.progressTween=function(){var t=(window.scrollY+window.innerHeight-e.DOM.el.offsetTop)/(window.innerHeight+e.DOM.el.offsetHeight);e.scrollTimeline.progress(t)},this.observer.observe(this.DOM.el)}}]),e}();o.preloadFonts("fxx5dng").then((function(){document.querySelectorAll("[data-text-rep]").forEach((function(e){new a(e)})),document.body.classList.remove("loading")}))}(); -------------------------------------------------------------------------------- /dist/index5.html: -------------------------------------------------------------------------------- 1 | Text Repetition Scroll Effect | Demo 5 | Codrops

Text Repetition Scroll Effect from Dr. Dabber

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.

ozra

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.

horizont

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.

good

vibes

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.

Babo

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.

From Collected Papers on Analytical Psychology by C. G. Jung

Demo 1

-------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "textrepetitioneffect", 3 | "version": "1.0.0", 4 | "browserslist": "> 0.5%, last 2 versions, not dead", 5 | "description": "", 6 | "scripts": { 7 | "start": "parcel src/index.html --open", 8 | "clean": "rm -rf dist/*", 9 | "build:parcel": "parcel build src/index.html --no-content-hash --no-source-maps --public-url ./", 10 | "build": "npm run clean && npm run build:parcel" 11 | }, 12 | "repository": { 13 | "type": "git", 14 | "url": "git://github.com/codrops/[NAME].git" 15 | }, 16 | "keywords": [], 17 | "author": "Codrops", 18 | "license": "MIT", 19 | "homepage": "https://tympanus.net/codrops", 20 | "bugs": { 21 | "url": "https://github.com/codrops/[NAME]/issues" 22 | }, 23 | "devDependencies": { 24 | "parcel": "^2.4.1" 25 | }, 26 | "dependencies": { 27 | "gsap": "^3.10.2" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /src/css/base.css: -------------------------------------------------------------------------------- 1 | *, 2 | *::after, 3 | *::before { 4 | box-sizing: border-box; 5 | } 6 | 7 | :root { 8 | font-size: 15px; 9 | } 10 | 11 | body { 12 | margin: 0; 13 | --color-text: #fff; 14 | --color-bg: #000; 15 | --color-link: #fff; 16 | --color-link-hover: #fff; 17 | --font-size-s: 13vw; 18 | --font-size-m: 16vw; 19 | --font-size-l: 24vw; 20 | --font-size-xl: 26vw; 21 | --font-family: widescreen-ex, sans-serif; 22 | --font-weight: 900; 23 | --content-offset: 20vh; 24 | --font-case: uppercase; 25 | --color-rep-text: var(--color-text); 26 | --color-rep-text-main: var(--color-text); 27 | --color-rep-outline: var(--color-text); 28 | --color-rep-bg: var(--color-bg); 29 | /* Adjust these depending on your font */ 30 | --font-factor: 0.059; 31 | --font-line: 0.745; 32 | color: var(--color-text); 33 | background-color: var(--color-bg); 34 | font-family: halyard-micro, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif; 35 | -webkit-font-smoothing: antialiased; 36 | -moz-osx-font-smoothing: grayscale; 37 | overflow: hidden; 38 | overflow-y: scroll; 39 | } 40 | 41 | .demo-2 { 42 | --color-bg: #8d8e98; 43 | --content-offset: 10vh; 44 | --font-family: widescreen-mixed, sans-serif; 45 | --font-size-l: 20vw; 46 | --font-size-xl: 24vw; 47 | } 48 | 49 | .demo-3 { 50 | --color-bg: #525fdc; 51 | --content-offset: 10vh; 52 | --color-rep-bg: transparent; 53 | } 54 | 55 | .demo-4 { 56 | --color-bg: #1f1d1c; 57 | --color-text: #d14521; 58 | --color-rep-text: #d14521; 59 | --content-offset: 10vh; 60 | --font-family: bely-display, serif; 61 | --font-weight: 400; 62 | --font-factor: 0.059; 63 | --font-line: 0.745; 64 | --font-case: lowercase; 65 | --color-rep-bg: transparent; 66 | --font-size-xl: 34vw; 67 | } 68 | 69 | .demo-5 { 70 | --color-bg: #c5c3c7; 71 | --color-text: #b61e1e; 72 | --color-link: #000; 73 | --content-offset: 10vh; 74 | --color-rep-bg: transparent; 75 | } 76 | 77 | /* Page Loader */ 78 | .js .loading::before, 79 | .js .loading::after { 80 | content: ''; 81 | position: fixed; 82 | z-index: 1000; 83 | } 84 | 85 | .js .loading::before { 86 | top: 0; 87 | left: 0; 88 | width: 100%; 89 | height: 100%; 90 | background: var(--color-bg); 91 | } 92 | 93 | .js .loading::after { 94 | top: 50%; 95 | left: 50%; 96 | width: 60px; 97 | height: 60px; 98 | margin: -30px 0 0 -30px; 99 | border-radius: 50%; 100 | opacity: 0.4; 101 | background: var(--color-link); 102 | animation: loaderAnim 0.7s linear infinite alternate forwards; 103 | 104 | } 105 | 106 | @keyframes loaderAnim { 107 | to { 108 | opacity: 1; 109 | transform: scale3d(0.5,0.5,1); 110 | } 111 | } 112 | 113 | a { 114 | text-decoration: none; 115 | color: var(--color-link); 116 | outline: none; 117 | } 118 | 119 | a:hover { 120 | color: var(--color-link-hover); 121 | outline: none; 122 | } 123 | 124 | /* Better focus styles from https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible */ 125 | a:focus { 126 | /* Provide a fallback style for browsers 127 | that don't support :focus-visible */ 128 | outline: none; 129 | background: lightgrey; 130 | } 131 | 132 | a:focus:not(:focus-visible) { 133 | /* Remove the focus indicator on mouse-focus for browsers 134 | that do support :focus-visible */ 135 | background: transparent; 136 | } 137 | 138 | a:focus-visible { 139 | /* Draw a very noticeable focus style for 140 | keyboard-focus on browsers that do support 141 | :focus-visible */ 142 | outline: 2px solid red; 143 | background: transparent; 144 | } 145 | 146 | .unbutton { 147 | background: none; 148 | border: 0; 149 | padding: 0; 150 | margin: 0; 151 | font: inherit; 152 | } 153 | 154 | .unbutton:focus { 155 | outline: none; 156 | } 157 | 158 | main { 159 | padding: 1.5rem 2rem 0; 160 | } 161 | 162 | .frame { 163 | text-align: center; 164 | } 165 | 166 | .frame__title { 167 | margin: 0; 168 | font-size: 1rem; 169 | font-weight: 500; 170 | } 171 | 172 | .frame__links { 173 | margin: 0.5rem 0 2rem; 174 | } 175 | 176 | .frame__links a:not(:last-child) { 177 | margin-right: 1rem; 178 | } 179 | 180 | .hover-line, 181 | .cda-sponsor-link { 182 | white-space: nowrap; 183 | overflow: hidden; 184 | position: relative; 185 | } 186 | 187 | .hover-line::before, 188 | .cda-sponsor-link::before { 189 | content: ''; 190 | height: 1px; 191 | width: 100%; 192 | background: currentColor; 193 | position: absolute; 194 | top: 92%; 195 | transition: transform 0.3s; 196 | transform-origin: 0% 50%; 197 | } 198 | 199 | .hover-line:hover::before, 200 | .cda-sponsor-link:hover::before { 201 | transform: scaleX(0); 202 | transform-origin: 100% 50%; 203 | } 204 | 205 | .content { 206 | margin: var(--content-offset) 0 0 0; 207 | display: flex; 208 | flex-direction: column; 209 | align-items: center; 210 | } 211 | 212 | .content p { 213 | hyphens: auto; 214 | max-width: 500px; 215 | font-size: 1.25rem; 216 | line-height: 1.8; 217 | margin: 10vh auto; 218 | } 219 | 220 | p.footer { 221 | padding-top: 25vh; 222 | font-size: 1rem; 223 | opacity: 0.5; 224 | } 225 | 226 | .content__title--size-s { 227 | --size: var(--font-size-s); 228 | } 229 | 230 | .content__title--size-m { 231 | --size: var(--font-size-m); 232 | } 233 | 234 | .content__title--size-l { 235 | --size: var(--font-size-l); 236 | } 237 | 238 | .content__title--size-xl { 239 | --size: var(--font-size-xl); 240 | } 241 | 242 | .content__title { 243 | font-size: var(--size); 244 | margin: 0; 245 | display: grid; 246 | font-family: var(--font-family); 247 | font-weight: var(--font-weight); 248 | text-transform: var(--font-case); 249 | cursor: default; 250 | -webkit-touch-callout: none; 251 | -webkit-user-select: none; 252 | -moz-user-select: none; 253 | -ms-user-select: none; 254 | user-select: none; 255 | } 256 | 257 | .content__title--left { 258 | margin-right: auto; 259 | } 260 | 261 | .content__title--right { 262 | margin-left: auto; 263 | } 264 | 265 | .text-rep span { 266 | color: var(--color-rep-text-main); 267 | grid-area: 1 / 1 / 2 / 2; 268 | background: var(--color-rep-bg); 269 | line-height: var(--font-line); 270 | padding-bottom: calc(var(--font-factor)* var(--size)); 271 | will-change: transform; 272 | } 273 | 274 | .text-rep span:not(:last-child) { 275 | color: var(--color-rep-text); 276 | } 277 | 278 | .demo-2 .text-rep span, 279 | .demo-3 .text-rep span:not(:last-child) { 280 | -webkit-text-stroke: 1px var(--color-rep-outline); 281 | text-stroke: 1px var(--color-rep-outline); 282 | -webkit-text-fill-color: transparent; 283 | text-fill-color: transparent; 284 | color: transparent; 285 | } 286 | 287 | .demo-3 .text-rep span, 288 | .demo-4 .text-rep span, 289 | .demo-5 .text-rep span { 290 | padding-bottom: 0; 291 | } 292 | 293 | @media screen and (min-width: 53em) { 294 | .frame { 295 | display: grid; 296 | grid-template-columns: auto auto auto; 297 | grid-template-areas: 'title demos demos sponsor' 'links links links links'; 298 | grid-column-gap: 3vw; 299 | grid-row-gap: 1rem; 300 | justify-content: space-between; 301 | text-align: left; 302 | } 303 | .frame__title { 304 | grid-area: title; 305 | } 306 | .frame__links { 307 | margin: 0; 308 | grid-area: links; 309 | } 310 | .frame__links--demos { 311 | grid-area: demos; 312 | } 313 | } 314 | -------------------------------------------------------------------------------- /src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TextRepetitionEffect/fabaafe0124e7bdf66906c6214f00800f5575c4c/src/favicon.ico -------------------------------------------------------------------------------- /src/img/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TextRepetitionEffect/fabaafe0124e7bdf66906c6214f00800f5575c4c/src/img/1.jpg -------------------------------------------------------------------------------- /src/img/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TextRepetitionEffect/fabaafe0124e7bdf66906c6214f00800f5575c4c/src/img/2.jpg -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Text Repetition Scroll Effect | Demo 1 | Codrops 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 |
20 |

Text Repetition Scroll Effect from Dr. Dabber

21 | 26 | 33 |
34 |
35 |

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.

36 |

Boca

37 |

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.

38 |

Soulmate

39 |

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.

40 |

Maui

41 |

Wowie

42 |

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.

43 |

Kush

44 |

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.

45 |

From Collected Papers on Analytical Psychology by C. G. Jung

46 |

47 | Demo 2 48 |

49 |
50 |
51 | 52 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /src/index2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Text Repetition Scroll Effect | Demo 2 | Codrops 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 |
20 |

Text Repetition Scroll Effect from Dr. Dabber

21 | 26 | 33 |
34 |
35 |

Good

36 |

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.

37 |

Bonitama

38 |

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.

39 |

Osho

40 |

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.

41 |

Full

42 |

Moon

43 |

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.

44 |

Bone

45 |

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.

46 |

From Collected Papers on Analytical Psychology by C. G. Jung

47 |

48 | Demo 3 49 |

50 |
51 |
52 | 53 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /src/index3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Text Repetition Scroll Effect | Demo 3 | Codrops 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 |
20 |

Text Repetition Scroll Effect from Dr. Dabber

21 | 26 | 33 |
34 |
35 |

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.

36 |

Musa

37 |

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.

38 |

Comoxo

39 |

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.

40 |

Freak

41 |

Reason

42 |

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.

43 |

Soul

44 |

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.

45 |

From Collected Papers on Analytical Psychology by C. G. Jung

46 |

47 | Demo 4 48 |

49 |
50 |
51 | 52 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /src/index4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Text Repetition Scroll Effect | Demo 4 | Codrops 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 |
20 |

Text Repetition Scroll Effect from Dr. Dabber

21 | 26 | 33 |
34 |
35 |

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.

36 |

bogota

37 |

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.

38 |

Barranquilla

39 |

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.

40 |

Santa Marta

41 |

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.

42 |

cali

43 |

From Collected Papers on Analytical Psychology by C. G. Jung

44 |

45 | Demo 5 46 |

47 |
48 |
49 | 50 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /src/index5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Text Repetition Scroll Effect | Demo 5 | Codrops 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 |
20 |

Text Repetition Scroll Effect from Dr. Dabber

21 | 26 | 33 |
34 |
35 |

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.

36 |

ozra

37 |

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.

38 |

horizont

39 |

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.

40 |

good

41 |

vibes

42 |

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.

43 |

Babo

44 |

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.

45 |

From Collected Papers on Analytical Psychology by C. G. Jung

46 |

47 | Demo 1 48 |

49 |
50 |
51 | 52 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /src/js/demo1/index.js: -------------------------------------------------------------------------------- 1 | import { preloadFonts } from '../utils'; 2 | import { RepeatTextScrollFx } from './repeatTextScrollFx'; 3 | 4 | // Preload images and fonts and remove loader 5 | preloadFonts('fxx5dng').then(() => { 6 | 7 | // Apply the effect on these elements 8 | document.querySelectorAll('[data-text-rep]').forEach(textEl => { 9 | new RepeatTextScrollFx(textEl); 10 | }); 11 | 12 | document.body.classList.remove('loading'); 13 | 14 | }); -------------------------------------------------------------------------------- /src/js/demo1/repeatTextScrollFx.js: -------------------------------------------------------------------------------- 1 | import { getHeight } from '../utils'; 2 | import { gsap } from 'gsap'; 3 | 4 | /** 5 | * Class representing an element with multiple text child elements that translate up/down when scrolling 6 | */ 7 | export class RepeatTextScrollFx { 8 | // DOM elements 9 | DOM = { 10 | // main element ([data-text-rep]) 11 | el: null, 12 | // all text spans except the last one (this will be the centered one and doesn't translate 13 | words: null, 14 | } 15 | totalWords = 9; 16 | tyIncrement = 12; 17 | delayIncrement = 0.1; 18 | scrollTimeline; 19 | observer; 20 | 21 | /** 22 | * Constructor. 23 | * @param {NodeList} Dom_el - main element ([data-text-rep]) 24 | */ 25 | constructor(Dom_el) { 26 | this.DOM.el = Dom_el; 27 | this.layout(); 28 | this.setBoundaries(); 29 | this.createScrollTimeline(); 30 | this.createObserver(); 31 | 32 | window.addEventListener('resize', () => this.setBoundaries()); 33 | } 34 | /** 35 | * Creates the text spans inside the main element 36 | */ 37 | layout() { 38 | const halfWordsCount = Math.floor(this.totalWords/2); 39 | let innerHTML = ''; 40 | 41 | for (let i = 0; i < this.totalWords; ++i) { 42 | 43 | let ty; 44 | let delay; 45 | 46 | if ( i === this.totalWords-1 ) { 47 | ty = 0; 48 | delay = 0; 49 | } 50 | else if ( i < halfWordsCount ) { 51 | ty = halfWordsCount*this.tyIncrement-this.tyIncrement*i; 52 | delay = this.delayIncrement*(halfWordsCount-i)-this.delayIncrement 53 | 54 | } 55 | else { 56 | ty = -1*(halfWordsCount*this.tyIncrement-(i-halfWordsCount)*this.tyIncrement); 57 | delay = this.delayIncrement*(halfWordsCount- (i-halfWordsCount) )-this.delayIncrement 58 | } 59 | 60 | innerHTML += `${this.DOM.el.innerHTML}`; 61 | } 62 | 63 | this.DOM.el.innerHTML = innerHTML; 64 | this.DOM.el.classList.add('text-rep'); 65 | 66 | this.DOM.words = [...this.DOM.el.querySelectorAll('span')].slice(0, -1); 67 | } 68 | /** 69 | * sets the padding bottom and margin top given the amount that the words will translate up/down 70 | */ 71 | setBoundaries() { 72 | // Set up the margin top and padding bottom values 73 | const paddingBottomMarginTop = getHeight(this.DOM.el) * Math.floor(this.totalWords/2) * this.tyIncrement/100; 74 | gsap.set(this.DOM.el, { 75 | marginTop: paddingBottomMarginTop, 76 | paddingBottom: paddingBottomMarginTop 77 | }); 78 | } 79 | /** 80 | * gsap animation timeline 81 | * translates the text spans when the element enters the viewport 82 | */ 83 | createScrollTimeline() { 84 | this.scrollTimeline = gsap.timeline({paused: true}) 85 | 86 | .to(this.DOM.words, { 87 | duration: 1, 88 | ease: 'power1', 89 | yPercent: (_,target) => target.dataset.ty, 90 | delay: (_,target) => target.dataset.delay 91 | }) 92 | } 93 | /** 94 | * Intersection Observer 95 | * Updates the timeline progress when the element is in the viewport 96 | */ 97 | createObserver() { 98 | const observerOptions = { 99 | root: null, 100 | rootMargin: '0px 0px', 101 | threshold: 0 102 | }; 103 | 104 | // credits: from https://medium.com/elegant-seagulls/parallax-and-scroll-triggered-animations-with-the-intersection-observer-api-and-gsap3-53b58c80b2fa 105 | this.observer = new IntersectionObserver(entry => { 106 | if (entry[0].intersectionRatio > 0) { 107 | 108 | if ( !this.isLoaded ) { 109 | this.isLoaded = true; 110 | } 111 | gsap.ticker.add(this.progressTween); 112 | 113 | } 114 | else { 115 | 116 | if ( this.isLoaded ) { 117 | gsap.ticker.remove(this.progressTween); 118 | } 119 | else { 120 | this.isLoaded = true; 121 | // add and remove immediately 122 | gsap.ticker.add(this.progressTween, true); 123 | } 124 | 125 | } 126 | }, observerOptions); 127 | 128 | this.progressTween = () => { 129 | // Get scroll distance to bottom of viewport. 130 | const scrollPosition = (window.scrollY + window.innerHeight); 131 | // Get element's position relative to bottom of viewport. 132 | const elPosition = (scrollPosition - this.DOM.el.offsetTop); 133 | // Set desired duration. 134 | const durationDistance = (window.innerHeight + this.DOM.el.offsetHeight); 135 | // Calculate tween progresss. 136 | const currentProgress = (elPosition / durationDistance); 137 | // Set progress of gsap timeline. 138 | this.scrollTimeline.progress(currentProgress); 139 | } 140 | 141 | this.observer.observe(this.DOM.el); 142 | } 143 | } -------------------------------------------------------------------------------- /src/js/demo2/index.js: -------------------------------------------------------------------------------- 1 | import { preloadFonts } from '../utils'; 2 | import { RepeatTextScrollFx } from './repeatTextScrollFx'; 3 | 4 | // Preload images and fonts and remove loader 5 | preloadFonts('fxx5dng').then(() => { 6 | 7 | // Apply the effect on these elements 8 | document.querySelectorAll('[data-text-rep]').forEach(textEl => { 9 | new RepeatTextScrollFx(textEl); 10 | }); 11 | 12 | document.body.classList.remove('loading'); 13 | 14 | }); -------------------------------------------------------------------------------- /src/js/demo2/repeatTextScrollFx.js: -------------------------------------------------------------------------------- 1 | import { getHeight } from '../utils'; 2 | import { gsap } from 'gsap'; 3 | 4 | /** 5 | * Class representing an element with multiple text child elements that translate up/down when scrolling 6 | */ 7 | export class RepeatTextScrollFx { 8 | // DOM elements 9 | DOM = { 10 | // main element ([data-text-rep]) 11 | el: null, 12 | // all text spans except the last one (this will be the centered one and doesn't translate 13 | words: null, 14 | } 15 | totalWords = 9; 16 | tyIncrement = 14; 17 | delayIncrement = 0.08; 18 | scrollTimeline; 19 | observer; 20 | 21 | /** 22 | * Constructor. 23 | * @param {NodeList} Dom_el - main element ([data-text-rep]) 24 | */ 25 | constructor(Dom_el) { 26 | this.DOM.el = Dom_el; 27 | this.layout(); 28 | this.setBoundaries(); 29 | this.createScrollTimeline(); 30 | this.createObserver(); 31 | 32 | window.addEventListener('resize', () => this.setBoundaries()); 33 | } 34 | /** 35 | * Creates the text spans inside the main element 36 | */ 37 | layout() { 38 | const halfWordsCount = Math.floor(this.totalWords/2); 39 | let innerHTML = ''; 40 | 41 | for (let i = 0; i < this.totalWords; ++i) { 42 | 43 | let ty; 44 | let delay; 45 | 46 | if ( i === this.totalWords-1 ) { 47 | ty = 0; 48 | delay = 0; 49 | } 50 | else if ( i < halfWordsCount ) { 51 | ty = halfWordsCount*this.tyIncrement-this.tyIncrement*i; 52 | delay = this.delayIncrement*(halfWordsCount-i)-this.delayIncrement 53 | 54 | } 55 | else { 56 | ty = -1*(halfWordsCount*this.tyIncrement-(i-halfWordsCount)*this.tyIncrement); 57 | delay = this.delayIncrement*(halfWordsCount- (i-halfWordsCount) )-this.delayIncrement 58 | } 59 | 60 | innerHTML += `${this.DOM.el.innerHTML}`; 61 | } 62 | 63 | this.DOM.el.innerHTML = innerHTML; 64 | this.DOM.el.classList.add('text-rep'); 65 | 66 | this.DOM.words = [...this.DOM.el.querySelectorAll('span')].slice(0, -1); 67 | } 68 | /** 69 | * sets the padding bottom and margin top given the amount that the words will translate up/down 70 | */ 71 | setBoundaries() { 72 | // Set up the margin top and padding bottom values 73 | const paddingBottomMarginTop = getHeight(this.DOM.el) * Math.floor(this.totalWords/2) * this.tyIncrement/100; 74 | gsap.set(this.DOM.el, { 75 | marginTop: paddingBottomMarginTop, 76 | paddingBottom: paddingBottomMarginTop 77 | }); 78 | } 79 | /** 80 | * gsap animation timeline 81 | * translates the text spans when the element enters the viewport 82 | */ 83 | createScrollTimeline() { 84 | this.scrollTimeline = gsap.timeline({paused: true}) 85 | 86 | .to(this.DOM.words, { 87 | duration: 1, 88 | ease: 'none', 89 | yPercent: (_,target) => target.dataset.ty, 90 | delay: (_,target) => target.dataset.delay 91 | }, 0) 92 | .to(this.DOM.words, { 93 | duration: 1, 94 | ease: 'none', 95 | yPercent: 0, 96 | delay: (_,target) => target.dataset.delay 97 | }); 98 | } 99 | /** 100 | * Intersection Observer 101 | * Updates the timeline progress when the element is in the viewport 102 | */ 103 | createObserver() { 104 | const observerOptions = { 105 | root: null, 106 | rootMargin: '0px 0px', 107 | threshold: 0 108 | }; 109 | 110 | // credits: from https://medium.com/elegant-seagulls/parallax-and-scroll-triggered-animations-with-the-intersection-observer-api-and-gsap3-53b58c80b2fa 111 | this.observer = new IntersectionObserver(entry => { 112 | if (entry[0].intersectionRatio > 0) { 113 | 114 | if ( !this.isLoaded ) { 115 | this.isLoaded = true; 116 | } 117 | gsap.ticker.add(this.progressTween); 118 | 119 | } 120 | else { 121 | 122 | if ( this.isLoaded ) { 123 | gsap.ticker.remove(this.progressTween); 124 | } 125 | else { 126 | this.isLoaded = true; 127 | // add and remove immediately 128 | gsap.ticker.add(this.progressTween, true); 129 | } 130 | 131 | } 132 | }, observerOptions); 133 | 134 | this.progressTween = () => { 135 | // Get scroll distance to bottom of viewport. 136 | const scrollPosition = (window.scrollY + window.innerHeight); 137 | // Get element's position relative to bottom of viewport. 138 | const elPosition = (scrollPosition - this.DOM.el.offsetTop); 139 | // Set desired duration. 140 | const durationDistance = (window.innerHeight + this.DOM.el.offsetHeight); 141 | // Calculate tween progresss. 142 | const currentProgress = (elPosition / durationDistance); 143 | // Set progress of gsap timeline. 144 | this.scrollTimeline.progress(currentProgress); 145 | } 146 | 147 | this.observer.observe(this.DOM.el); 148 | } 149 | } -------------------------------------------------------------------------------- /src/js/demo3/index.js: -------------------------------------------------------------------------------- 1 | import { preloadFonts } from '../utils'; 2 | import { RepeatTextScrollFx } from './repeatTextScrollFx'; 3 | 4 | // Preload images and fonts and remove loader 5 | preloadFonts('fxx5dng').then(() => { 6 | 7 | // Apply the effect on these elements 8 | document.querySelectorAll('[data-text-rep]').forEach(textEl => { 9 | new RepeatTextScrollFx(textEl); 10 | }); 11 | 12 | document.body.classList.remove('loading'); 13 | 14 | }); -------------------------------------------------------------------------------- /src/js/demo3/repeatTextScrollFx.js: -------------------------------------------------------------------------------- 1 | import { getHeight } from '../utils'; 2 | import { gsap } from 'gsap'; 3 | 4 | /** 5 | * Class representing an element with multiple text child elements that translate up/down when scrolling 6 | */ 7 | export class RepeatTextScrollFx { 8 | // DOM elements 9 | DOM = { 10 | // main element ([data-text-rep]) 11 | el: null, 12 | // all text spans except the last one (this will be the centered one and doesn't translate 13 | words: null, 14 | } 15 | totalWords = 9; 16 | tyIncrement = 14; 17 | delayIncrement = 0.08; 18 | scrollTimeline; 19 | observer; 20 | 21 | /** 22 | * Constructor. 23 | * @param {NodeList} Dom_el - main element ([data-text-rep]) 24 | */ 25 | constructor(Dom_el) { 26 | this.DOM.el = Dom_el; 27 | this.layout(); 28 | this.setBoundaries(); 29 | this.createScrollTimeline(); 30 | this.createObserver(); 31 | 32 | window.addEventListener('resize', () => this.setBoundaries()); 33 | } 34 | /** 35 | * Creates the text spans inside the main element 36 | */ 37 | layout() { 38 | const halfWordsCount = Math.floor(this.totalWords/2); 39 | let innerHTML = ''; 40 | 41 | for (let i = 0; i < this.totalWords; ++i) { 42 | 43 | let ty; 44 | let delay; 45 | 46 | if ( i === this.totalWords-1 ) { 47 | ty = 0; 48 | delay = 0; 49 | } 50 | else if ( i < halfWordsCount ) { 51 | ty = halfWordsCount*this.tyIncrement-this.tyIncrement*i; 52 | delay = this.delayIncrement*(halfWordsCount-i)-this.delayIncrement 53 | 54 | } 55 | else { 56 | ty = -1*(halfWordsCount*this.tyIncrement-(i-halfWordsCount)*this.tyIncrement); 57 | delay = this.delayIncrement*(halfWordsCount- (i-halfWordsCount) )-this.delayIncrement 58 | } 59 | 60 | innerHTML += `${this.DOM.el.innerHTML}`; 61 | } 62 | 63 | this.DOM.el.innerHTML = innerHTML; 64 | this.DOM.el.classList.add('text-rep'); 65 | 66 | this.DOM.words = [...this.DOM.el.querySelectorAll('span')].slice(0, -1); 67 | } 68 | /** 69 | * sets the padding bottom and margin top given the amount that the words will translate up/down 70 | */ 71 | setBoundaries() { 72 | // Set up the margin top and padding bottom values 73 | const paddingBottomMarginTop = getHeight(this.DOM.el) * Math.floor(this.totalWords/2) * this.tyIncrement/100; 74 | gsap.set(this.DOM.el, { 75 | marginTop: paddingBottomMarginTop, 76 | paddingBottom: paddingBottomMarginTop 77 | }); 78 | } 79 | /** 80 | * gsap animation timeline 81 | * translates the text spans when the element enters the viewport 82 | */ 83 | createScrollTimeline() { 84 | this.scrollTimeline = gsap.timeline({paused: true}) 85 | 86 | .to(this.DOM.words, { 87 | duration: 1, 88 | ease: 'none', 89 | startAt: {opacity: 0}, 90 | opacity: 1, 91 | yPercent: (_,target) => target.dataset.ty, 92 | delay: (_,target) => target.dataset.delay 93 | }, 0) 94 | .to(this.DOM.words, { 95 | duration: 1, 96 | ease: 'none', 97 | opacity: 0, 98 | yPercent: 0, 99 | delay: (_,target) => target.dataset.delay 100 | }); 101 | } 102 | /** 103 | * Intersection Observer 104 | * Updates the timeline progress when the element is in the viewport 105 | */ 106 | createObserver() { 107 | const observerOptions = { 108 | root: null, 109 | rootMargin: '0px 0px', 110 | threshold: 0 111 | }; 112 | 113 | // credits: from https://medium.com/elegant-seagulls/parallax-and-scroll-triggered-animations-with-the-intersection-observer-api-and-gsap3-53b58c80b2fa 114 | this.observer = new IntersectionObserver(entry => { 115 | if (entry[0].intersectionRatio > 0) { 116 | 117 | if ( !this.isLoaded ) { 118 | this.isLoaded = true; 119 | } 120 | gsap.ticker.add(this.progressTween); 121 | 122 | } 123 | else { 124 | 125 | if ( this.isLoaded ) { 126 | gsap.ticker.remove(this.progressTween); 127 | } 128 | else { 129 | this.isLoaded = true; 130 | // add and remove immediately 131 | gsap.ticker.add(this.progressTween, true); 132 | } 133 | 134 | } 135 | }, observerOptions); 136 | 137 | this.progressTween = () => { 138 | // Get scroll distance to bottom of viewport. 139 | const scrollPosition = (window.scrollY + window.innerHeight); 140 | // Get element's position relative to bottom of viewport. 141 | const elPosition = (scrollPosition - this.DOM.el.offsetTop); 142 | // Set desired duration. 143 | const durationDistance = (window.innerHeight + this.DOM.el.offsetHeight); 144 | // Calculate tween progresss. 145 | const currentProgress = (elPosition / durationDistance); 146 | // Set progress of gsap timeline. 147 | this.scrollTimeline.progress(currentProgress); 148 | } 149 | 150 | this.observer.observe(this.DOM.el); 151 | } 152 | } -------------------------------------------------------------------------------- /src/js/demo4/index.js: -------------------------------------------------------------------------------- 1 | import { preloadFonts } from '../utils'; 2 | import { RepeatTextScrollFx } from './repeatTextScrollFx'; 3 | 4 | // Preload images and fonts and remove loader 5 | preloadFonts('fxx5dng').then(() => { 6 | 7 | // Apply the effect on these elements 8 | document.querySelectorAll('[data-text-rep]').forEach(textEl => { 9 | new RepeatTextScrollFx(textEl); 10 | }); 11 | 12 | document.body.classList.remove('loading'); 13 | 14 | }); -------------------------------------------------------------------------------- /src/js/demo4/repeatTextScrollFx.js: -------------------------------------------------------------------------------- 1 | import { getHeight } from '../utils'; 2 | import { gsap } from 'gsap'; 3 | 4 | /** 5 | * Class representing an element with multiple text child elements that translate up/down when scrolling 6 | */ 7 | export class RepeatTextScrollFx { 8 | // DOM elements 9 | DOM = { 10 | // main element ([data-text-rep]) 11 | el: null, 12 | // all text spans except the last one (this will be the centered one and doesn't translate 13 | words: null, 14 | } 15 | totalWords = 7; 16 | tyIncrement = 40; 17 | delayIncrement = 0.05; 18 | scrollTimeline; 19 | observer; 20 | 21 | /** 22 | * Constructor. 23 | * @param {NodeList} Dom_el - main element ([data-text-rep]) 24 | */ 25 | constructor(Dom_el) { 26 | this.DOM.el = Dom_el; 27 | this.layout(); 28 | this.setBoundaries(); 29 | this.createScrollTimeline(); 30 | this.createObserver(); 31 | 32 | window.addEventListener('resize', () => this.setBoundaries()); 33 | } 34 | /** 35 | * Creates the text spans inside the main element 36 | */ 37 | layout() { 38 | const halfWordsCount = Math.floor(this.totalWords/2); 39 | let innerHTML = ''; 40 | 41 | for (let i = 0; i < this.totalWords; ++i) { 42 | 43 | let ty; 44 | let delay; 45 | 46 | if ( i === this.totalWords-1 ) { 47 | ty = 0; 48 | delay = 0; 49 | } 50 | else if ( i < halfWordsCount ) { 51 | ty = halfWordsCount*this.tyIncrement-this.tyIncrement*i; 52 | delay = this.delayIncrement*(halfWordsCount-i)-this.delayIncrement 53 | 54 | } 55 | else { 56 | ty = -1*(halfWordsCount*this.tyIncrement-(i-halfWordsCount)*this.tyIncrement); 57 | delay = this.delayIncrement*(halfWordsCount- (i-halfWordsCount) )-this.delayIncrement 58 | } 59 | 60 | innerHTML += `${this.DOM.el.innerHTML}`; 61 | } 62 | 63 | this.DOM.el.innerHTML = innerHTML; 64 | this.DOM.el.classList.add('text-rep'); 65 | 66 | this.DOM.words = [...this.DOM.el.querySelectorAll('span')].slice(0, -1); 67 | } 68 | /** 69 | * sets the padding bottom and margin top given the amount that the words will translate up/down 70 | */ 71 | setBoundaries() { 72 | // Set up the margin top and padding bottom values 73 | const paddingBottomMarginTop = getHeight(this.DOM.el) * Math.floor(this.totalWords/2) * this.tyIncrement/100; 74 | gsap.set(this.DOM.el, { 75 | marginTop: paddingBottomMarginTop, 76 | paddingBottom: paddingBottomMarginTop 77 | }); 78 | } 79 | /** 80 | * gsap animation timeline 81 | * translates the text spans when the element enters the viewport 82 | */ 83 | createScrollTimeline() { 84 | this.scrollTimeline = gsap.timeline({paused: true}) 85 | 86 | .to(this.DOM.words, { 87 | duration: 1, 88 | ease: 'sine.inOut', 89 | yPercent: (_,target) => target.dataset.ty, 90 | xPercent: (_,target) => target.dataset.ty*.1, 91 | opacity: 0, 92 | delay: (_,target) => target.dataset.delay 93 | }) 94 | } 95 | /** 96 | * Intersection Observer 97 | * Updates the timeline progress when the element is in the viewport 98 | */ 99 | createObserver() { 100 | const observerOptions = { 101 | root: null, 102 | rootMargin: '0px 0px', 103 | threshold: 0 104 | }; 105 | 106 | // credits: from https://medium.com/elegant-seagulls/parallax-and-scroll-triggered-animations-with-the-intersection-observer-api-and-gsap3-53b58c80b2fa 107 | this.observer = new IntersectionObserver(entry => { 108 | if (entry[0].intersectionRatio > 0) { 109 | 110 | if ( !this.isLoaded ) { 111 | this.isLoaded = true; 112 | } 113 | gsap.ticker.add(this.progressTween); 114 | 115 | } 116 | else { 117 | 118 | if ( this.isLoaded ) { 119 | gsap.ticker.remove(this.progressTween); 120 | } 121 | else { 122 | this.isLoaded = true; 123 | // add and remove immediately 124 | gsap.ticker.add(this.progressTween, true); 125 | } 126 | 127 | } 128 | }, observerOptions); 129 | 130 | this.progressTween = () => { 131 | // Get scroll distance to bottom of viewport. 132 | const scrollPosition = (window.scrollY + window.innerHeight); 133 | // Get element's position relative to bottom of viewport. 134 | const elPosition = (scrollPosition - this.DOM.el.offsetTop); 135 | // Set desired duration. 136 | const durationDistance = (window.innerHeight + this.DOM.el.offsetHeight); 137 | // Calculate tween progresss. 138 | const currentProgress = (elPosition / durationDistance); 139 | // Set progress of gsap timeline. 140 | this.scrollTimeline.progress(currentProgress); 141 | } 142 | 143 | this.observer.observe(this.DOM.el); 144 | } 145 | } -------------------------------------------------------------------------------- /src/js/demo5/index.js: -------------------------------------------------------------------------------- 1 | import { preloadFonts } from '../utils'; 2 | import { RepeatTextScrollFx } from './repeatTextScrollFx'; 3 | 4 | // Preload images and fonts and remove loader 5 | preloadFonts('fxx5dng').then(() => { 6 | 7 | // Apply the effect on these elements 8 | document.querySelectorAll('[data-text-rep]').forEach(textEl => { 9 | new RepeatTextScrollFx(textEl); 10 | }); 11 | 12 | document.body.classList.remove('loading'); 13 | 14 | }); -------------------------------------------------------------------------------- /src/js/demo5/repeatTextScrollFx.js: -------------------------------------------------------------------------------- 1 | import { getHeight } from '../utils'; 2 | import { gsap } from 'gsap'; 3 | 4 | /** 5 | * Class representing an element with multiple text child elements that translate up/down when scrolling 6 | */ 7 | export class RepeatTextScrollFx { 8 | // DOM elements 9 | DOM = { 10 | // main element ([data-text-rep]) 11 | el: null, 12 | // all text spans except the last one (this will be the centered one and doesn't translate 13 | words: null, 14 | } 15 | totalWords = 8; 16 | tyIncrement = 16; 17 | txIncrement = 2; 18 | opacityIncrement = 0.15; 19 | delayIncrement = 0.01; 20 | scrollTimeline; 21 | observer; 22 | 23 | /** 24 | * Constructor. 25 | * @param {NodeList} Dom_el - main element ([data-text-rep]) 26 | */ 27 | constructor(Dom_el) { 28 | this.DOM.el = Dom_el; 29 | this.layout(); 30 | this.setBoundaries(); 31 | this.createScrollTimeline(); 32 | this.createObserver(); 33 | 34 | window.addEventListener('resize', () => this.setBoundaries()); 35 | } 36 | /** 37 | * Creates the text spans inside the main element 38 | */ 39 | layout() { 40 | const halfWordsCount = Math.floor(this.totalWords/2); 41 | let innerHTML = ''; 42 | 43 | for (let i = 0; i < this.totalWords; ++i) { 44 | const tx = i === this.totalWords-1 ? 0 : -1* (this.totalWords-i)*this.txIncrement; 45 | const ty = i === this.totalWords-1 ? 0 : -1* (this.totalWords-i)*this.tyIncrement; 46 | const opacity = i === this.totalWords-1 ? 1 : Math.min(i*this.opacityIncrement,1); 47 | const delay = i === this.totalWords-1 ? 0 : (this.totalWords-i)*this.delayIncrement; 48 | 49 | innerHTML += `${this.DOM.el.innerHTML}`; 50 | } 51 | 52 | this.DOM.el.innerHTML = innerHTML; 53 | this.DOM.el.classList.add('text-rep'); 54 | 55 | this.DOM.words = [...this.DOM.el.querySelectorAll('span')].slice(0, -1); 56 | } 57 | /** 58 | * sets the padding bottom and margin top given the amount that the words will translate up/down 59 | */ 60 | setBoundaries() { 61 | // Set up the margin top and padding bottom values 62 | const paddingBottomMarginTop = getHeight(this.DOM.el) * Math.floor(this.totalWords) * this.tyIncrement/100; 63 | gsap.set(this.DOM.el, { 64 | //marginTop: paddingBottomMarginTop, 65 | paddingBottom: paddingBottomMarginTop 66 | }); 67 | } 68 | /** 69 | * gsap animation timeline 70 | * translates the text spans when the element enters the viewport 71 | */ 72 | createScrollTimeline() { 73 | this.scrollTimeline = gsap.timeline({paused: true}) 74 | 75 | .to(this.DOM.words, { 76 | duration: 1, 77 | ease: 'none', 78 | yPercent: (_,target) => -1*target.dataset.ty, 79 | xPercent: (_,target) => -1*target.dataset.tx, 80 | startAt: {opacity: 0}, 81 | opacity: (_,target) => target.dataset.opacity, 82 | delay: (_,target) => target.dataset.delay 83 | }) 84 | } 85 | /** 86 | * Intersection Observer 87 | * Updates the timeline progress when the element is in the viewport 88 | */ 89 | createObserver() { 90 | const observerOptions = { 91 | root: null, 92 | rootMargin: '0px 0px', 93 | threshold: 0 94 | }; 95 | 96 | // credits: from https://medium.com/elegant-seagulls/parallax-and-scroll-triggered-animations-with-the-intersection-observer-api-and-gsap3-53b58c80b2fa 97 | this.observer = new IntersectionObserver(entry => { 98 | if (entry[0].intersectionRatio > 0) { 99 | 100 | if ( !this.isLoaded ) { 101 | this.isLoaded = true; 102 | } 103 | gsap.ticker.add(this.progressTween); 104 | 105 | } 106 | else { 107 | 108 | if ( this.isLoaded ) { 109 | gsap.ticker.remove(this.progressTween); 110 | } 111 | else { 112 | this.isLoaded = true; 113 | // add and remove immediately 114 | gsap.ticker.add(this.progressTween, true); 115 | } 116 | 117 | } 118 | }, observerOptions); 119 | 120 | this.progressTween = () => { 121 | // Get scroll distance to bottom of viewport. 122 | const scrollPosition = (window.scrollY + window.innerHeight); 123 | // Get element's position relative to bottom of viewport. 124 | const elPosition = (scrollPosition - this.DOM.el.offsetTop); 125 | // Set desired duration. 126 | const durationDistance = (window.innerHeight + this.DOM.el.offsetHeight); 127 | // Calculate tween progresss. 128 | const currentProgress = (elPosition / durationDistance); 129 | // Set progress of gsap timeline. 130 | this.scrollTimeline.progress(currentProgress); 131 | } 132 | 133 | this.observer.observe(this.DOM.el); 134 | } 135 | } -------------------------------------------------------------------------------- /src/js/utils.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Preload fonts 3 | * @param {String} id 4 | */ 5 | const preloadFonts = id => { 6 | return new Promise((resolve) => { 7 | WebFont.load({ 8 | typekit: { 9 | id: id 10 | }, 11 | active: resolve 12 | }); 13 | }); 14 | }; 15 | 16 | /** 17 | * Gets the height of an element without counting with the padding 18 | * @param {Element} el 19 | */ 20 | const getHeight = el => { 21 | const computedStyle = getComputedStyle(el); 22 | 23 | let elementHeight = el.clientHeight; // height with padding 24 | elementHeight -= parseFloat(computedStyle.paddingTop) + parseFloat(computedStyle.paddingBottom); 25 | return elementHeight; 26 | } 27 | 28 | export { 29 | preloadFonts, 30 | getHeight 31 | }; --------------------------------------------------------------------------------