├── .gitattributes
├── .gitignore
├── .htmlnanorc
├── LICENSE
├── README.md
├── dist
├── 1.1770e3b3.jpg
├── 1_1.f8006efe.jpg
├── 1_2.eec1f068.jpg
├── 1_3.2f1a03d6.jpg
├── 1_4.0dd80c98.jpg
├── 2.07ca36b5.jpg
├── 2_1.70a06984.jpg
├── 2_2.4ce22ade.jpg
├── 2_3.cd8f6d6c.jpg
├── 2_4.e26f9fa2.jpg
├── 3.f6f48295.jpg
├── 3_1.d17666aa.jpg
├── 3_2.a49462e7.jpg
├── 3_3.8c33784a.jpg
├── 3_4.67959874.jpg
├── 4.516b9c03.jpg
├── 4_1.02ca7538.jpg
├── 4_2.8ca3126b.jpg
├── 4_3.12d51fb7.jpg
├── 4_4.79171d7b.jpg
├── 5.95d97ae8.jpg
├── 5_1.9aadf043.jpg
├── 5_2.923af2b3.jpg
├── 5_3.8e071ed8.jpg
├── 5_4.dcac1ccd.jpg
├── 6.56a5d53b.jpg
├── 6_1.8116402b.jpg
├── 6_2.1338f4a9.jpg
├── 6_3.3798f835.jpg
├── 6_4.88dfd119.jpg
├── 7.87dc6e8b.jpg
├── 7_1.9b664038.jpg
├── 7_2.f9c3174f.jpg
├── 7_3.bb2a281e.jpg
├── 7_4.689f7770.jpg
├── 8.0bda5054.jpg
├── 8_1.435f9a48.jpg
├── 8_2.a14bd684.jpg
├── 8_3.9bdaf09f.jpg
├── 8_4.ffcb2041.jpg
├── 9.27ccf354.jpg
├── 9_1.3f6d1bf2.jpg
├── 9_2.2d763fe9.jpg
├── 9_3.2b369e75.jpg
├── 9_4.5c85edc4.jpg
├── favicon.a64e97b2.ico
├── index.b5e7c14d.js
├── index.d73f7ad5.css
├── index.e9a2d1b4.js
└── index.html
├── package.json
└── src
├── css
└── base.css
├── favicon.ico
├── img
├── 1.jpg
├── 1_1.jpg
├── 1_2.jpg
├── 1_3.jpg
├── 1_4.jpg
├── 2.jpg
├── 2_1.jpg
├── 2_2.jpg
├── 2_3.jpg
├── 2_4.jpg
├── 3.jpg
├── 3_1.jpg
├── 3_2.jpg
├── 3_3.jpg
├── 3_4.jpg
├── 4.jpg
├── 4_1.jpg
├── 4_2.jpg
├── 4_3.jpg
├── 4_4.jpg
├── 5.jpg
├── 5_1.jpg
├── 5_2.jpg
├── 5_3.jpg
├── 5_4.jpg
├── 6.jpg
├── 6_1.jpg
├── 6_2.jpg
├── 6_3.jpg
├── 6_4.jpg
├── 7.jpg
├── 7_1.jpg
├── 7_2.jpg
├── 7_3.jpg
├── 7_4.jpg
├── 8.jpg
├── 8_1.jpg
├── 8_2.jpg
├── 8_3.jpg
├── 8_4.jpg
├── 9.jpg
├── 9_1.jpg
├── 9_2.jpg
├── 9_3.jpg
└── 9_4.jpg
├── index.html
└── js
├── content.js
├── index.js
├── preview.js
├── textLinesReveal.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
--------------------------------------------------------------------------------
/.htmlnanorc:
--------------------------------------------------------------------------------
1 | {
2 | "minifySvg": false
3 | }
--------------------------------------------------------------------------------
/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 | # Image to Content Page Transition
2 |
3 | A simple scroll effect and page transition inspired by [Vitalii Burhonskyi](https://dribbble.com/Burhonskyi)’s [Dribbble shot](https://dribbble.com/shots/17535054-Homepage-Animation-for-Melbourne-Wooden-Showroom).
4 |
5 | 
6 |
7 | [Article on Codrops](https://tympanus.net/codrops/?p=64266)
8 |
9 | [Demo](http://tympanus.net/Development/ImageToContent/)
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 | ## Credits
33 |
34 | - Images from [Unsplash](https://unsplash.com/)
35 |
36 | ## Misc
37 |
38 | 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/)
39 |
40 | ## License
41 | [MIT](LICENSE)
42 |
43 | Made with :blue_heart: by [Codrops](http://www.codrops.com)
44 |
45 |
46 |
47 |
48 |
49 |
--------------------------------------------------------------------------------
/dist/1.1770e3b3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/ImageToContent/b4bbdc7b1809e56ee129ac296c5dcf1849a00c2d/dist/1.1770e3b3.jpg
--------------------------------------------------------------------------------
/dist/1_1.f8006efe.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/ImageToContent/b4bbdc7b1809e56ee129ac296c5dcf1849a00c2d/dist/1_1.f8006efe.jpg
--------------------------------------------------------------------------------
/dist/1_2.eec1f068.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/ImageToContent/b4bbdc7b1809e56ee129ac296c5dcf1849a00c2d/dist/1_2.eec1f068.jpg
--------------------------------------------------------------------------------
/dist/1_3.2f1a03d6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/ImageToContent/b4bbdc7b1809e56ee129ac296c5dcf1849a00c2d/dist/1_3.2f1a03d6.jpg
--------------------------------------------------------------------------------
/dist/1_4.0dd80c98.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/ImageToContent/b4bbdc7b1809e56ee129ac296c5dcf1849a00c2d/dist/1_4.0dd80c98.jpg
--------------------------------------------------------------------------------
/dist/2.07ca36b5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/ImageToContent/b4bbdc7b1809e56ee129ac296c5dcf1849a00c2d/dist/2.07ca36b5.jpg
--------------------------------------------------------------------------------
/dist/2_1.70a06984.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/ImageToContent/b4bbdc7b1809e56ee129ac296c5dcf1849a00c2d/dist/2_1.70a06984.jpg
--------------------------------------------------------------------------------
/dist/2_2.4ce22ade.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/ImageToContent/b4bbdc7b1809e56ee129ac296c5dcf1849a00c2d/dist/2_2.4ce22ade.jpg
--------------------------------------------------------------------------------
/dist/2_3.cd8f6d6c.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/ImageToContent/b4bbdc7b1809e56ee129ac296c5dcf1849a00c2d/dist/2_3.cd8f6d6c.jpg
--------------------------------------------------------------------------------
/dist/2_4.e26f9fa2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/ImageToContent/b4bbdc7b1809e56ee129ac296c5dcf1849a00c2d/dist/2_4.e26f9fa2.jpg
--------------------------------------------------------------------------------
/dist/3.f6f48295.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/ImageToContent/b4bbdc7b1809e56ee129ac296c5dcf1849a00c2d/dist/3.f6f48295.jpg
--------------------------------------------------------------------------------
/dist/3_1.d17666aa.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/ImageToContent/b4bbdc7b1809e56ee129ac296c5dcf1849a00c2d/dist/3_1.d17666aa.jpg
--------------------------------------------------------------------------------
/dist/3_2.a49462e7.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/ImageToContent/b4bbdc7b1809e56ee129ac296c5dcf1849a00c2d/dist/3_2.a49462e7.jpg
--------------------------------------------------------------------------------
/dist/3_3.8c33784a.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/ImageToContent/b4bbdc7b1809e56ee129ac296c5dcf1849a00c2d/dist/3_3.8c33784a.jpg
--------------------------------------------------------------------------------
/dist/3_4.67959874.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/ImageToContent/b4bbdc7b1809e56ee129ac296c5dcf1849a00c2d/dist/3_4.67959874.jpg
--------------------------------------------------------------------------------
/dist/4.516b9c03.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/ImageToContent/b4bbdc7b1809e56ee129ac296c5dcf1849a00c2d/dist/4.516b9c03.jpg
--------------------------------------------------------------------------------
/dist/4_1.02ca7538.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/ImageToContent/b4bbdc7b1809e56ee129ac296c5dcf1849a00c2d/dist/4_1.02ca7538.jpg
--------------------------------------------------------------------------------
/dist/4_2.8ca3126b.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/ImageToContent/b4bbdc7b1809e56ee129ac296c5dcf1849a00c2d/dist/4_2.8ca3126b.jpg
--------------------------------------------------------------------------------
/dist/4_3.12d51fb7.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/ImageToContent/b4bbdc7b1809e56ee129ac296c5dcf1849a00c2d/dist/4_3.12d51fb7.jpg
--------------------------------------------------------------------------------
/dist/4_4.79171d7b.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/ImageToContent/b4bbdc7b1809e56ee129ac296c5dcf1849a00c2d/dist/4_4.79171d7b.jpg
--------------------------------------------------------------------------------
/dist/5.95d97ae8.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/ImageToContent/b4bbdc7b1809e56ee129ac296c5dcf1849a00c2d/dist/5.95d97ae8.jpg
--------------------------------------------------------------------------------
/dist/5_1.9aadf043.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/ImageToContent/b4bbdc7b1809e56ee129ac296c5dcf1849a00c2d/dist/5_1.9aadf043.jpg
--------------------------------------------------------------------------------
/dist/5_2.923af2b3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/ImageToContent/b4bbdc7b1809e56ee129ac296c5dcf1849a00c2d/dist/5_2.923af2b3.jpg
--------------------------------------------------------------------------------
/dist/5_3.8e071ed8.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/ImageToContent/b4bbdc7b1809e56ee129ac296c5dcf1849a00c2d/dist/5_3.8e071ed8.jpg
--------------------------------------------------------------------------------
/dist/5_4.dcac1ccd.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/ImageToContent/b4bbdc7b1809e56ee129ac296c5dcf1849a00c2d/dist/5_4.dcac1ccd.jpg
--------------------------------------------------------------------------------
/dist/6.56a5d53b.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/ImageToContent/b4bbdc7b1809e56ee129ac296c5dcf1849a00c2d/dist/6.56a5d53b.jpg
--------------------------------------------------------------------------------
/dist/6_1.8116402b.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/ImageToContent/b4bbdc7b1809e56ee129ac296c5dcf1849a00c2d/dist/6_1.8116402b.jpg
--------------------------------------------------------------------------------
/dist/6_2.1338f4a9.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/ImageToContent/b4bbdc7b1809e56ee129ac296c5dcf1849a00c2d/dist/6_2.1338f4a9.jpg
--------------------------------------------------------------------------------
/dist/6_3.3798f835.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/ImageToContent/b4bbdc7b1809e56ee129ac296c5dcf1849a00c2d/dist/6_3.3798f835.jpg
--------------------------------------------------------------------------------
/dist/6_4.88dfd119.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/ImageToContent/b4bbdc7b1809e56ee129ac296c5dcf1849a00c2d/dist/6_4.88dfd119.jpg
--------------------------------------------------------------------------------
/dist/7.87dc6e8b.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/ImageToContent/b4bbdc7b1809e56ee129ac296c5dcf1849a00c2d/dist/7.87dc6e8b.jpg
--------------------------------------------------------------------------------
/dist/7_1.9b664038.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/ImageToContent/b4bbdc7b1809e56ee129ac296c5dcf1849a00c2d/dist/7_1.9b664038.jpg
--------------------------------------------------------------------------------
/dist/7_2.f9c3174f.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/ImageToContent/b4bbdc7b1809e56ee129ac296c5dcf1849a00c2d/dist/7_2.f9c3174f.jpg
--------------------------------------------------------------------------------
/dist/7_3.bb2a281e.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/ImageToContent/b4bbdc7b1809e56ee129ac296c5dcf1849a00c2d/dist/7_3.bb2a281e.jpg
--------------------------------------------------------------------------------
/dist/7_4.689f7770.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/ImageToContent/b4bbdc7b1809e56ee129ac296c5dcf1849a00c2d/dist/7_4.689f7770.jpg
--------------------------------------------------------------------------------
/dist/8.0bda5054.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/ImageToContent/b4bbdc7b1809e56ee129ac296c5dcf1849a00c2d/dist/8.0bda5054.jpg
--------------------------------------------------------------------------------
/dist/8_1.435f9a48.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/ImageToContent/b4bbdc7b1809e56ee129ac296c5dcf1849a00c2d/dist/8_1.435f9a48.jpg
--------------------------------------------------------------------------------
/dist/8_2.a14bd684.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/ImageToContent/b4bbdc7b1809e56ee129ac296c5dcf1849a00c2d/dist/8_2.a14bd684.jpg
--------------------------------------------------------------------------------
/dist/8_3.9bdaf09f.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/ImageToContent/b4bbdc7b1809e56ee129ac296c5dcf1849a00c2d/dist/8_3.9bdaf09f.jpg
--------------------------------------------------------------------------------
/dist/8_4.ffcb2041.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/ImageToContent/b4bbdc7b1809e56ee129ac296c5dcf1849a00c2d/dist/8_4.ffcb2041.jpg
--------------------------------------------------------------------------------
/dist/9.27ccf354.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/ImageToContent/b4bbdc7b1809e56ee129ac296c5dcf1849a00c2d/dist/9.27ccf354.jpg
--------------------------------------------------------------------------------
/dist/9_1.3f6d1bf2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/ImageToContent/b4bbdc7b1809e56ee129ac296c5dcf1849a00c2d/dist/9_1.3f6d1bf2.jpg
--------------------------------------------------------------------------------
/dist/9_2.2d763fe9.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/ImageToContent/b4bbdc7b1809e56ee129ac296c5dcf1849a00c2d/dist/9_2.2d763fe9.jpg
--------------------------------------------------------------------------------
/dist/9_3.2b369e75.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/ImageToContent/b4bbdc7b1809e56ee129ac296c5dcf1849a00c2d/dist/9_3.2b369e75.jpg
--------------------------------------------------------------------------------
/dist/9_4.5c85edc4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/ImageToContent/b4bbdc7b1809e56ee129ac296c5dcf1849a00c2d/dist/9_4.5c85edc4.jpg
--------------------------------------------------------------------------------
/dist/favicon.a64e97b2.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/ImageToContent/b4bbdc7b1809e56ee129ac296c5dcf1849a00c2d/dist/favicon.a64e97b2.ico
--------------------------------------------------------------------------------
/dist/index.d73f7ad5.css:
--------------------------------------------------------------------------------
1 | *,:after,:before{box-sizing:border-box}:root{--color-text:#fff;--color-text-alt:#767474;--color-bg:#0b0a0a;--color-link:#aaa;--color-link-hover:#fff;font-size:18px}html{scroll-behavior:initial}html,body{width:100%;min-height:100%}body{color:var(--color-text);background-color:var(--color-bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;font-family:botanika-mono-web,monospace}.content-open{height:100vh;overflow:hidden}.oh{position:relative;overflow:hidden}.oh__inner{will-change:transform;display:inline-block}.line{transform-origin:0;white-space:nowrap;will-change:transform}.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);cursor:pointer;outline:none;text-decoration:none}a:hover{color:var(--color-link-hover);outline:none}a:focus{background:#d3d3d3;outline:none}a:focus:not(:focus-visible){background:0 0}a:focus-visible{background:0 0;outline:2px solid red}.unbutton{font:inherit;fill:currentColor;cursor:pointer;color:inherit;background:0 0;border:0;align-items:center;margin:0;padding:0;display:flex}.unbutton:focus{outline:none}.unbutton span:first-child{margin-right:1rem}.unbutton span:last-child{margin-left:1rem}main{grid-template-areas:"frame""page";display:grid;position:relative}.frame{z-index:1000;background:var(--color-bg);text-transform:uppercase;grid-row-gap:5vh;grid-template:"title""prev""sponsor"/auto auto;grid-area:frame;align-content:space-between;padding:1.5rem 2rem;display:grid}.frame__title{grid-area:title;display:flex}.frame__title-main{text-align:right;align-self:center;margin:0;font-size:1rem;font-weight:400;line-height:1}.frame__title-back{align-items:flex-end;margin-bottom:.15rem;display:flex;position:relative}.frame__title-back span{display:none}.frame__title-back svg{fill:currentColor}.frame__prev{grid-area:prev}.preview-wrap{z-index:100;grid-area:page;padding:0 2rem 3rem;position:relative}.content-open .preview-wrap{pointer-events:none}.preview{min-height:400px;will-change:transform;grid-template-rows:100%;grid-template-columns:100%;margin:0 auto;padding:3rem 0 0;display:grid}.preview__img-wrap{cursor:pointer;grid-area:1/1/-1/-1}.preview__img{width:100%;height:100%;position:relative;overflow:hidden}.preview__img-inner{width:100%;height:100%;background-position:0 0;background-repeat:no-repeat;background-size:150%}.content__meta{color:var(--color-text-alt);margin-bottom:2rem}.preview__title{text-align:center;pointer-events:none;grid-area:1/1/-1/-1;place-self:center;position:relative;transform:translateY(50%)}.preview__title-main{margin:0;font-family:scotch-display,sans-serif;font-size:max(2rem,min(10vw,8rem));font-weight:300;line-height:1.2}.preview__title-main>span{display:block}.preview__title-main>span:last-child{padding:0 1rem;font-family:scotch-display,sans-serif;font-style:italic;font-weight:500;display:block;transform:translateY(-33%)}.preview__desc{max-width:400px;text-transform:uppercase;margin:0 auto;line-height:1.2}.content-wrap{height:100vh;pointer-events:none;grid-area:page;grid-template-rows:auto 1fr;grid-template-areas:"back back""content content";padding:2rem;display:grid;position:-webkit-sticky;position:sticky;top:0;overflow:hidden}.action{visibility:hidden;pointer-events:none;opacity:0}.content-open .action{visibility:visible;pointer-events:auto}.action svg{width:2em;height:2em}.action--back{grid-area:back;justify-self:start;padding:1rem 0}.action span{text-transform:uppercase}.content{height:100%;pointer-events:none;opacity:0;grid-gap:2vw;grid-template:"img"20vh"thumbs"min-content"text"/100%;grid-area:2/content/span 2;display:grid;position:absolute;top:0;left:0}.content--current{pointer-events:auto;opacity:1;position:relative}.content__group{grid-area:text}.content__title{font-family:scotch-display,sans-serif;font-size:max(3rem,min(6.5vw,5.5rem));font-weight:400}.content__title span{display:block}.content__title>span:last-child{padding:0 0 0 .75rem;font-family:scotch-display,sans-serif;font-style:italic;font-weight:500;transform:translateY(-25%)}.content .preview__img{grid-area:img}.content__thumbs{grid-gap:2vw;grid-area:thumbs;grid-auto-columns:auto;grid-auto-flow:column;justify-content:start;display:grid}.content__thumbs-item{width:50px;aspect-ratio:1.5}.content__thumbs-item:hover{cursor:not-allowed}.hidden{opacity:0;pointer-events:none}@media screen and (min-width:53em){main{grid-template-columns:auto 1fr;grid-template-areas:"frame page"}.frame{height:100vh;opacity:.5;padding:2rem;position:-webkit-sticky;position:sticky;top:0}.frame__title,.frame__prev,#cdawrap{-webkit-writing-mode:vertical-rl;writing-mode:vertical-rl;justify-self:start;transform:rotate(180deg)}body #cdawrap{justify-self:start}.frame__prev{margin:1rem 0 0}.frame__title-back{transform:scaleY(-1)}.preview{min-height:90vh}.preview__desc{margin:-2.5rem auto 0}.content{grid-template:". ."2rem"img text"1fr"thumbs text"". ."1rem/60% 1fr}.content__thumbs-item{width:100px}.content__text{max-width:400px}}
--------------------------------------------------------------------------------
/dist/index.html:
--------------------------------------------------------------------------------
1 |
Image to Content Page Transition | Codrops Andesite aphanitic A volcanic rock of intermediate composition, between silica-poor basalt and silica-rich rhyolite.
Batholith plutonic A large mass of intrusive igneous rock made mostly of felsic or intermediate rock types.
Pumicite vesicular a volcanic rock that consists of highly vesicular rough-textured volcanic glass.
Latite aphyric An igneous, volcanic rock, with aphanitic-aphyric to aphyric-porphyritic texture.
Rhomb porphyry A volcanic rock with gray-white large porphyritic rhombus-shaped phenocrysts of feldspar.
Bytownite triclinic a calcium rich member of the plagioclase solid solution series of feldspar minerals.
Oligoclase plagioclase A rock-forming mineral belonging to the plagioclase feldspars.
Mordenite fibrous An abundant zeolite mineral that is used commercially.
Stishovite tetragonal An extremely hard, dense tetragonal form of silicon dioxide.
Andesite aphanitic
By James Maurice Rojo
Andesite (/ˈændəzaɪt/) is a volcanic rock of intermediate composition. In a general sense, it is the intermediate type between silica-poor basalt and silica-rich rhyolite.
Batholith plutonic
By Anna Walters
A batholith (from Ancient Greek bathos 'depth', and lithos 'rock') is a large mass of intrusive igneous rock (also called plutonic rock), larger than 100 km2 (40 sq mi) in area, that forms from cooled magma deep in Earth's crust.
Pumicite vesicular
By Walter Green
Pumice ( /ˈpʌmɪs/), called pumicite in its powdered or dust form, is a volcanic rock that consists of highly vesicular rough-textured volcanic glass, which may or may not contain crystals. It is typically light-colored.
Latite aphyric
By Nora Gilberts
Latite is an igneous, volcanic rock, with aphanitic-aphyric to aphyric-porphyritic texture. Its mineral assemblage is usually alkali feldspar and plagioclase in approximately equal amounts.
Rhomb porphyry
By Bobby D. May
Rhomb porphyry is a volcanic rock with gray-white large porphyritic rhombus-shaped phenocrysts of feldspar (commonly anorthoclase) embedded in a very fine-grained red-brown matrix.
Bytownite triclinic
By Maria Kilkenny
Bytownite is a calcium rich member of the plagioclase solid solution series of feldspar minerals with composition between anorthite and labradorite. Like others of the series, bytownite forms grey to white triclinic crystals.
Oligoclase plagioclase
By Lauren Kraft
Oligoclase is a rock-forming mineral belonging to the plagioclase feldspars. In chemical composition and in its crystallographic and physical characters it is intermediate between albite and anorthite.
Mordenite fibrous
By Stephen Kaiser
Mordenite is a zeolite mineral that is one of the six most abundant zeolites and is used commercially. It was first described in 1864 by Henry How.
Stishovite tetragonal
By Alexander Cook
Stishovite is an extremely hard, dense tetragonal form (polymorph) of silicon dioxide. Large natural crystals of stishovite are extremely rare and are usually found as clasts of 1 to 2 mm in length.
Go back
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "imagetocontent",
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.6.2"
25 | },
26 | "dependencies": {
27 | "@studio-freight/lenis": "^0.1.12",
28 | "gsap": "^3.10.4",
29 | "imagesloaded": "^5.0.0",
30 | "split-type": "^0.3.2"
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/src/css/base.css:
--------------------------------------------------------------------------------
1 | *,
2 | *::after,
3 | *::before {
4 | box-sizing: border-box;
5 | }
6 |
7 | :root {
8 | font-size: 18px;
9 | --color-text: #fff;
10 | --color-text-alt: #767474;
11 | --color-bg: #0b0a0a;
12 | --color-link: #aaa;
13 | --color-link-hover: #fff;
14 | }
15 |
16 | html {
17 | scroll-behavior: initial;
18 | }
19 |
20 | html, body{
21 | width: 100%;
22 | min-height: 100%;
23 | }
24 |
25 | body {
26 | margin: 0;
27 | color: var(--color-text);
28 | background-color: var(--color-bg);
29 | font-family: botanika-mono-web, monospace;
30 | -webkit-font-smoothing: antialiased;
31 | -moz-osx-font-smoothing: grayscale;
32 | }
33 |
34 | .content-open {
35 | overflow: hidden;
36 | height: 100vh;
37 | }
38 |
39 | .oh {
40 | position: relative;
41 | overflow: hidden
42 | }
43 |
44 | .oh__inner {
45 | will-change: transform;
46 | display: inline-block;
47 | }
48 |
49 | .line {
50 | transform-origin: 0;
51 | white-space: nowrap;
52 | will-change: transform;
53 | }
54 |
55 | /* Page Loader */
56 | .js .loading::before,
57 | .js .loading::after {
58 | content: '';
59 | position: fixed;
60 | z-index: 1000;
61 | }
62 |
63 | .js .loading::before {
64 | top: 0;
65 | left: 0;
66 | width: 100%;
67 | height: 100%;
68 | background: var(--color-bg);
69 | }
70 |
71 | .js .loading::after {
72 | top: 50%;
73 | left: 50%;
74 | width: 60px;
75 | height: 60px;
76 | margin: -30px 0 0 -30px;
77 | border-radius: 50%;
78 | opacity: 0.4;
79 | background: var(--color-link);
80 | animation: loaderAnim 0.7s linear infinite alternate forwards;
81 |
82 | }
83 |
84 | @keyframes loaderAnim {
85 | to {
86 | opacity: 1;
87 | transform: scale3d(0.5,0.5,1);
88 | }
89 | }
90 |
91 | a {
92 | text-decoration: none;
93 | color: var(--color-link);
94 | outline: none;
95 | cursor: pointer;
96 | }
97 |
98 | a:hover {
99 | color: var(--color-link-hover);
100 | outline: none;
101 | }
102 |
103 | /* Better focus styles from https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible */
104 | a:focus {
105 | /* Provide a fallback style for browsers
106 | that don't support :focus-visible */
107 | outline: none;
108 | background: lightgrey;
109 | }
110 |
111 | a:focus:not(:focus-visible) {
112 | /* Remove the focus indicator on mouse-focus for browsers
113 | that do support :focus-visible */
114 | background: transparent;
115 | }
116 |
117 | a:focus-visible {
118 | /* Draw a very noticeable focus style for
119 | keyboard-focus on browsers that do support
120 | :focus-visible */
121 | outline: 2px solid red;
122 | background: transparent;
123 | }
124 |
125 | .unbutton {
126 | background: none;
127 | border: 0;
128 | padding: 0;
129 | margin: 0;
130 | font: inherit;
131 | fill: currentColor;
132 | cursor: pointer;
133 | color: inherit;
134 | display: flex;
135 | align-items: center;
136 | }
137 |
138 | .unbutton:focus {
139 | outline: none;
140 | }
141 |
142 | .unbutton span:first-child {
143 | margin-right: 1rem;
144 | }
145 |
146 | .unbutton span:last-child {
147 | margin-left: 1rem;
148 | }
149 |
150 | main {
151 | position: relative;
152 | display: grid;
153 | grid-template-areas: 'frame' 'page';
154 | }
155 |
156 | .frame {
157 | grid-area: frame;
158 | padding: 1.5rem 2rem;
159 | z-index: 1000;
160 | background: var(--color-bg);
161 | display: grid;
162 | grid-template-columns: auto auto;
163 | grid-template-rows: auto;
164 | grid-template-areas: 'title' 'prev' 'sponsor';
165 | align-content: space-between;
166 | text-transform: uppercase;
167 | grid-row-gap: 5vh;
168 | }
169 |
170 | .frame__title {
171 | grid-area: title;
172 | display: flex;
173 | }
174 |
175 | .frame__title-main {
176 | font-size: 1rem;
177 | margin: 0;
178 | font-weight: normal;
179 | line-height: 1;
180 | align-self: center;
181 | text-align: right;
182 | }
183 |
184 | .frame__title-back {
185 | position: relative;
186 | display: flex;
187 | align-items: flex-end;
188 | margin-bottom: 0.15rem;
189 | }
190 |
191 | .frame__title-back span {
192 | display: none;
193 | }
194 |
195 | .frame__title-back svg {
196 | fill: currentColor;
197 | }
198 |
199 | .frame__prev {
200 | grid-area: prev;
201 | }
202 |
203 | .preview-wrap {
204 | grid-area: page;
205 | padding: 0 2rem 3rem;
206 | position: relative;
207 | z-index: 100;
208 | }
209 |
210 | .content-open .preview-wrap {
211 | pointer-events: none;
212 | }
213 |
214 | .preview {
215 | min-height: 400px;
216 | padding: 3rem 0 0;
217 | margin: 0 auto;
218 | display: grid;
219 | grid-template-columns: 100%;
220 | grid-template-rows: 100%;
221 | will-change: transform;
222 | }
223 |
224 | .preview__img-wrap {
225 | grid-area: 1 / 1 / -1 / -1;
226 | cursor: pointer;
227 | }
228 |
229 | .preview__img {
230 | width: 100%;
231 | height: 100%;
232 | overflow: hidden;
233 | position: relative;
234 | }
235 |
236 | .preview__img-inner {
237 | width: 100%;
238 | height: 100%;
239 | background-size: 150%;
240 | background-position: 0% 0%;
241 | background-repeat: no-repeat;
242 | }
243 |
244 | .content__meta {
245 | margin-bottom: 2rem;
246 | color: var(--color-text-alt);
247 | }
248 |
249 | .preview__title {
250 | text-align: center;
251 | align-self: center;
252 | justify-self: center;
253 | grid-area: 1 / 1 / -1 / -1;
254 | position: relative;
255 | transform: translate3d(0,50%,0);
256 | pointer-events: none;
257 | }
258 |
259 | .preview__title-main {
260 | line-height: 1.2;
261 | margin: 0;
262 | font-weight: normal;
263 | font-size: clamp(2rem,10vw,8rem);
264 | font-family: scotch-display, sans-serif;
265 | font-weight: 300;
266 | }
267 |
268 | .preview__title-main > span {
269 | display: block;
270 | }
271 |
272 | .preview__title-main > span:last-child {
273 | display: block;
274 | padding: 0 1rem;
275 | transform: translateY(-33%);
276 | font-family: scotch-display, sans-serif;
277 | font-weight: 500;
278 | font-style: italic;
279 | }
280 |
281 | .preview__desc {
282 | margin: 0 auto;
283 | max-width: 400px;
284 | text-transform: uppercase;
285 | line-height: 1.2;
286 | }
287 |
288 | .content-wrap {
289 | position: -webkit-sticky; /* Safari */
290 | position: sticky;
291 | top: 0;
292 | grid-area: page;
293 | height: 100vh;
294 | overflow: hidden;
295 | display: grid;
296 | grid-template-areas:
297 | 'back back'
298 | 'content content';
299 | grid-template-rows: auto 1fr;
300 | pointer-events: none;
301 | padding: 2rem;
302 | }
303 |
304 | .action {
305 | visibility: hidden;
306 | pointer-events: none;
307 | opacity: 0;
308 | }
309 |
310 | .content-open .action {
311 | visibility: visible;
312 | pointer-events: auto;
313 | }
314 |
315 | .action svg {
316 | width: 2em;
317 | height: 2em;
318 | }
319 |
320 | .action--back {
321 | justify-self: start;
322 | grid-area: back;
323 | padding: 1rem 0;
324 | }
325 |
326 | .action span {
327 | text-transform: uppercase;
328 | }
329 |
330 | .content {
331 | grid-area: content;
332 | grid-row: 2 / span 2;
333 | position: absolute;
334 | top: 0;
335 | left: 0;
336 | height: 100%;
337 | pointer-events: none;
338 | opacity: 0;
339 | display: grid;
340 | grid-gap: 2vw;
341 | grid-template-columns: 100%;
342 | grid-template-areas:
343 | 'img'
344 | 'thumbs'
345 | 'text';
346 | grid-template-rows: 20vh min-content auto;
347 | }
348 |
349 | .content--current {
350 | position: relative;
351 | pointer-events: auto;
352 | opacity: 1;
353 | }
354 |
355 | .content__group {
356 | grid-area: text;
357 | }
358 |
359 | .content__title {
360 | font-family: scotch-display, sans-serif;
361 | font-weight: 400;
362 | font-size: clamp(3rem,6.5vw,5.5rem);
363 | }
364 |
365 | .content__title span {
366 | display: block;
367 | }
368 |
369 | .content__title > span:last-child {
370 | transform: translateY(-25%);
371 | font-family: scotch-display, sans-serif;
372 | font-weight: 500;
373 | font-style: italic;
374 | padding: 0 0 0 0.75rem;
375 | }
376 |
377 | .content .preview__img {
378 | grid-area: img;
379 | }
380 |
381 | .content__thumbs {
382 | grid-area: thumbs;
383 | display: grid;
384 | grid-auto-columns: auto;
385 | grid-auto-flow: column;
386 | grid-gap: 2vw;
387 | justify-content: start;
388 | }
389 |
390 | .content__thumbs-item {
391 | width: 50px;
392 | aspect-ratio: 1.5;
393 | }
394 |
395 | .content__thumbs-item:hover {
396 | cursor: not-allowed;
397 | }
398 |
399 | .hidden {
400 | opacity: 0;
401 | pointer-events: none;
402 | }
403 |
404 | @media screen and (min-width: 53em) {
405 | main {
406 | grid-template-areas: 'frame page';
407 | grid-template-columns: auto 1fr;
408 | }
409 | .frame {
410 | position: -webkit-sticky; /* Safari */
411 | position: sticky;
412 | top: 0;
413 | height: 100vh;
414 | opacity: 0.5;
415 | padding: 2rem;
416 | }
417 |
418 | .frame__title,
419 | .frame__prev,
420 | #cdawrap {
421 | justify-self: start;
422 | -webkit-writing-mode: vertical-rl;
423 | writing-mode: vertical-rl;
424 | transform: rotate(180deg);
425 | }
426 |
427 | body #cdawrap {
428 | justify-self: start;
429 | }
430 |
431 | .frame__prev {
432 | margin: 1rem 0 0;
433 | }
434 |
435 | .frame__title-back {
436 | transform: scale3d(1,-1,1);
437 | }
438 | .preview {
439 | min-height: 90vh;
440 | }
441 | .preview__desc {
442 | margin: -2.5rem auto 0;
443 | }
444 | .content {
445 | grid-template-columns: 60% 1fr;
446 | grid-template-areas:
447 | '... ...'
448 | 'img text'
449 | 'thumbs text'
450 | '... ...';
451 | grid-template-rows: 2rem 1fr auto 1rem;
452 | }
453 | .content__thumbs-item {
454 | width: 100px;
455 | }
456 | .content__text {
457 | max-width: 400px;
458 | }
459 | }
460 |
--------------------------------------------------------------------------------
/src/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/ImageToContent/b4bbdc7b1809e56ee129ac296c5dcf1849a00c2d/src/favicon.ico
--------------------------------------------------------------------------------
/src/img/1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/ImageToContent/b4bbdc7b1809e56ee129ac296c5dcf1849a00c2d/src/img/1.jpg
--------------------------------------------------------------------------------
/src/img/1_1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/ImageToContent/b4bbdc7b1809e56ee129ac296c5dcf1849a00c2d/src/img/1_1.jpg
--------------------------------------------------------------------------------
/src/img/1_2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/ImageToContent/b4bbdc7b1809e56ee129ac296c5dcf1849a00c2d/src/img/1_2.jpg
--------------------------------------------------------------------------------
/src/img/1_3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/ImageToContent/b4bbdc7b1809e56ee129ac296c5dcf1849a00c2d/src/img/1_3.jpg
--------------------------------------------------------------------------------
/src/img/1_4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/ImageToContent/b4bbdc7b1809e56ee129ac296c5dcf1849a00c2d/src/img/1_4.jpg
--------------------------------------------------------------------------------
/src/img/2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/ImageToContent/b4bbdc7b1809e56ee129ac296c5dcf1849a00c2d/src/img/2.jpg
--------------------------------------------------------------------------------
/src/img/2_1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/ImageToContent/b4bbdc7b1809e56ee129ac296c5dcf1849a00c2d/src/img/2_1.jpg
--------------------------------------------------------------------------------
/src/img/2_2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/ImageToContent/b4bbdc7b1809e56ee129ac296c5dcf1849a00c2d/src/img/2_2.jpg
--------------------------------------------------------------------------------
/src/img/2_3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/ImageToContent/b4bbdc7b1809e56ee129ac296c5dcf1849a00c2d/src/img/2_3.jpg
--------------------------------------------------------------------------------
/src/img/2_4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/ImageToContent/b4bbdc7b1809e56ee129ac296c5dcf1849a00c2d/src/img/2_4.jpg
--------------------------------------------------------------------------------
/src/img/3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/ImageToContent/b4bbdc7b1809e56ee129ac296c5dcf1849a00c2d/src/img/3.jpg
--------------------------------------------------------------------------------
/src/img/3_1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/ImageToContent/b4bbdc7b1809e56ee129ac296c5dcf1849a00c2d/src/img/3_1.jpg
--------------------------------------------------------------------------------
/src/img/3_2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/ImageToContent/b4bbdc7b1809e56ee129ac296c5dcf1849a00c2d/src/img/3_2.jpg
--------------------------------------------------------------------------------
/src/img/3_3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/ImageToContent/b4bbdc7b1809e56ee129ac296c5dcf1849a00c2d/src/img/3_3.jpg
--------------------------------------------------------------------------------
/src/img/3_4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/ImageToContent/b4bbdc7b1809e56ee129ac296c5dcf1849a00c2d/src/img/3_4.jpg
--------------------------------------------------------------------------------
/src/img/4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/ImageToContent/b4bbdc7b1809e56ee129ac296c5dcf1849a00c2d/src/img/4.jpg
--------------------------------------------------------------------------------
/src/img/4_1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/ImageToContent/b4bbdc7b1809e56ee129ac296c5dcf1849a00c2d/src/img/4_1.jpg
--------------------------------------------------------------------------------
/src/img/4_2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/ImageToContent/b4bbdc7b1809e56ee129ac296c5dcf1849a00c2d/src/img/4_2.jpg
--------------------------------------------------------------------------------
/src/img/4_3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/ImageToContent/b4bbdc7b1809e56ee129ac296c5dcf1849a00c2d/src/img/4_3.jpg
--------------------------------------------------------------------------------
/src/img/4_4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/ImageToContent/b4bbdc7b1809e56ee129ac296c5dcf1849a00c2d/src/img/4_4.jpg
--------------------------------------------------------------------------------
/src/img/5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/ImageToContent/b4bbdc7b1809e56ee129ac296c5dcf1849a00c2d/src/img/5.jpg
--------------------------------------------------------------------------------
/src/img/5_1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/ImageToContent/b4bbdc7b1809e56ee129ac296c5dcf1849a00c2d/src/img/5_1.jpg
--------------------------------------------------------------------------------
/src/img/5_2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/ImageToContent/b4bbdc7b1809e56ee129ac296c5dcf1849a00c2d/src/img/5_2.jpg
--------------------------------------------------------------------------------
/src/img/5_3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/ImageToContent/b4bbdc7b1809e56ee129ac296c5dcf1849a00c2d/src/img/5_3.jpg
--------------------------------------------------------------------------------
/src/img/5_4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/ImageToContent/b4bbdc7b1809e56ee129ac296c5dcf1849a00c2d/src/img/5_4.jpg
--------------------------------------------------------------------------------
/src/img/6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/ImageToContent/b4bbdc7b1809e56ee129ac296c5dcf1849a00c2d/src/img/6.jpg
--------------------------------------------------------------------------------
/src/img/6_1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/ImageToContent/b4bbdc7b1809e56ee129ac296c5dcf1849a00c2d/src/img/6_1.jpg
--------------------------------------------------------------------------------
/src/img/6_2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/ImageToContent/b4bbdc7b1809e56ee129ac296c5dcf1849a00c2d/src/img/6_2.jpg
--------------------------------------------------------------------------------
/src/img/6_3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/ImageToContent/b4bbdc7b1809e56ee129ac296c5dcf1849a00c2d/src/img/6_3.jpg
--------------------------------------------------------------------------------
/src/img/6_4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/ImageToContent/b4bbdc7b1809e56ee129ac296c5dcf1849a00c2d/src/img/6_4.jpg
--------------------------------------------------------------------------------
/src/img/7.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/ImageToContent/b4bbdc7b1809e56ee129ac296c5dcf1849a00c2d/src/img/7.jpg
--------------------------------------------------------------------------------
/src/img/7_1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/ImageToContent/b4bbdc7b1809e56ee129ac296c5dcf1849a00c2d/src/img/7_1.jpg
--------------------------------------------------------------------------------
/src/img/7_2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/ImageToContent/b4bbdc7b1809e56ee129ac296c5dcf1849a00c2d/src/img/7_2.jpg
--------------------------------------------------------------------------------
/src/img/7_3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/ImageToContent/b4bbdc7b1809e56ee129ac296c5dcf1849a00c2d/src/img/7_3.jpg
--------------------------------------------------------------------------------
/src/img/7_4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/ImageToContent/b4bbdc7b1809e56ee129ac296c5dcf1849a00c2d/src/img/7_4.jpg
--------------------------------------------------------------------------------
/src/img/8.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/ImageToContent/b4bbdc7b1809e56ee129ac296c5dcf1849a00c2d/src/img/8.jpg
--------------------------------------------------------------------------------
/src/img/8_1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/ImageToContent/b4bbdc7b1809e56ee129ac296c5dcf1849a00c2d/src/img/8_1.jpg
--------------------------------------------------------------------------------
/src/img/8_2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/ImageToContent/b4bbdc7b1809e56ee129ac296c5dcf1849a00c2d/src/img/8_2.jpg
--------------------------------------------------------------------------------
/src/img/8_3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/ImageToContent/b4bbdc7b1809e56ee129ac296c5dcf1849a00c2d/src/img/8_3.jpg
--------------------------------------------------------------------------------
/src/img/8_4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/ImageToContent/b4bbdc7b1809e56ee129ac296c5dcf1849a00c2d/src/img/8_4.jpg
--------------------------------------------------------------------------------
/src/img/9.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/ImageToContent/b4bbdc7b1809e56ee129ac296c5dcf1849a00c2d/src/img/9.jpg
--------------------------------------------------------------------------------
/src/img/9_1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/ImageToContent/b4bbdc7b1809e56ee129ac296c5dcf1849a00c2d/src/img/9_1.jpg
--------------------------------------------------------------------------------
/src/img/9_2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/ImageToContent/b4bbdc7b1809e56ee129ac296c5dcf1849a00c2d/src/img/9_2.jpg
--------------------------------------------------------------------------------
/src/img/9_3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/ImageToContent/b4bbdc7b1809e56ee129ac296c5dcf1849a00c2d/src/img/9_3.jpg
--------------------------------------------------------------------------------
/src/img/9_4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/ImageToContent/b4bbdc7b1809e56ee129ac296c5dcf1849a00c2d/src/img/9_4.jpg
--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Image to Content Page Transition | Codrops
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
28 |
29 |
30 |
31 |
32 |
33 | Andesite
34 | aphanitic
35 |
36 |
A volcanic rock of intermediate composition, between silica-poor basalt and silica-rich rhyolite.
37 |
38 |
39 |
40 |
41 |
42 |
43 | Batholith
44 | plutonic
45 |
46 |
A large mass of intrusive igneous rock made mostly of felsic or intermediate rock types.
47 |
48 |
49 |
50 |
51 |
52 |
53 | Pumicite
54 | vesicular
55 |
56 |
a volcanic rock that consists of highly vesicular rough-textured volcanic glass.
57 |
58 |
59 |
60 |
61 |
62 |
63 | Latite
64 | aphyric
65 |
66 |
An igneous, volcanic rock, with aphanitic-aphyric to aphyric-porphyritic texture.
67 |
68 |
69 |
70 |
71 |
72 |
73 | Rhomb
74 | porphyry
75 |
76 |
A volcanic rock with gray-white large porphyritic rhombus-shaped phenocrysts of feldspar.
77 |
78 |
79 |
80 |
81 |
82 |
83 | Bytownite
84 | triclinic
85 |
86 |
a calcium rich member of the plagioclase solid solution series of feldspar minerals.
87 |
88 |
89 |
90 |
91 |
92 |
93 | Oligoclase
94 | plagioclase
95 |
96 |
A rock-forming mineral belonging to the plagioclase feldspars.
97 |
98 |
99 |
100 |
101 |
102 |
103 | Mordenite
104 | fibrous
105 |
106 |
An abundant zeolite mineral that is used commercially.
107 |
108 |
109 |
110 |
111 |
112 |
113 | Stishovite
114 | tetragonal
115 |
116 |
An extremely hard, dense tetragonal form of silicon dioxide.
117 |
118 |
119 |
120 |
121 |
122 |
123 |
124 | Andesite
125 | aphanitic
126 |
127 |
By James Maurice Rojo
128 |
129 | Andesite (/ˈændəzaɪt/) is a volcanic rock of intermediate composition. In a general sense, it is the intermediate type between silica-poor basalt and silica-rich rhyolite.
130 |
131 |
132 |
133 |
134 |
135 |
136 |
137 |
138 |
139 |
140 |
141 |
142 | Batholith
143 | plutonic
144 |
145 |
By Anna Walters
146 |
147 | A batholith (from Ancient Greek bathos 'depth', and lithos 'rock') is a large mass of intrusive igneous rock (also called plutonic rock), larger than 100 km2 (40 sq mi) in area, that forms from cooled magma deep in Earth's crust.
148 |
149 |
150 |
151 |
152 |
153 |
154 |
155 |
156 |
157 |
158 |
159 |
160 | Pumicite
161 | vesicular
162 |
163 |
By Walter Green
164 |
165 | Pumice ( /ˈpʌmɪs/), called pumicite in its powdered or dust form, is a volcanic rock that consists of highly vesicular rough-textured volcanic glass, which may or may not contain crystals. It is typically light-colored.
166 |
167 |
168 |
169 |
170 |
171 |
172 |
173 |
174 |
175 |
176 |
177 |
178 | Latite
179 | aphyric
180 |
181 |
By Nora Gilberts
182 |
183 | Latite is an igneous, volcanic rock, with aphanitic-aphyric to aphyric-porphyritic texture. Its mineral assemblage is usually alkali feldspar and plagioclase in approximately equal amounts.
184 |
185 |
186 |
187 |
188 |
189 |
190 |
191 |
192 |
193 |
194 |
195 |
196 | Rhomb
197 | porphyry
198 |
199 |
By Bobby D. May
200 |
201 | Rhomb porphyry is a volcanic rock with gray-white large porphyritic rhombus-shaped phenocrysts of feldspar (commonly anorthoclase) embedded in a very fine-grained red-brown matrix.
202 |
203 |
204 |
205 |
206 |
207 |
208 |
209 |
210 |
211 |
212 |
213 |
214 | Bytownite
215 | triclinic
216 |
217 |
By Maria Kilkenny
218 |
219 | Bytownite is a calcium rich member of the plagioclase solid solution series of feldspar minerals with composition between anorthite and labradorite. Like others of the series, bytownite forms grey to white triclinic crystals.
220 |
221 |
222 |
223 |
224 |
225 |
226 |
227 |
228 |
229 |
230 |
231 |
232 | Oligoclase
233 | plagioclase
234 |
235 |
By Lauren Kraft
236 |
237 | Oligoclase is a rock-forming mineral belonging to the plagioclase feldspars. In chemical composition and in its crystallographic and physical characters it is intermediate between albite and anorthite.
238 |
239 |
240 |
241 |
242 |
243 |
244 |
245 |
246 |
247 |
248 |
249 |
250 | Mordenite
251 | fibrous
252 |
253 |
By Stephen Kaiser
254 |
255 | Mordenite is a zeolite mineral that is one of the six most abundant zeolites and is used commercially. It was first described in 1864 by Henry How.
256 |
257 |
258 |
259 |
260 |
261 |
262 |
263 |
264 |
265 |
266 |
267 |
268 | Stishovite
269 | tetragonal
270 |
271 |
By Alexander Cook
272 |
273 | Stishovite is an extremely hard, dense tetragonal form (polymorph) of silicon dioxide. Large natural crystals of stishovite are extremely rare and are usually found as clasts of 1 to 2 mm in length.
274 |
275 |
276 |
277 |
278 |
279 |
280 |
281 |
282 |
283 |
284 |
285 | Go back
286 |
287 |
288 |
289 |
290 |
291 |
292 |
--------------------------------------------------------------------------------
/src/js/content.js:
--------------------------------------------------------------------------------
1 | import { TextLinesReveal } from './textLinesReveal';
2 |
3 | /**
4 | * Class representing a Content element (.content)
5 | */
6 | export class Content {
7 | // DOM elements
8 | DOM = {
9 | // main element (.content)
10 | el: null,
11 | // title element (.content__title)
12 | title: null,
13 | // inner title elements (.content__title .oh__inner)
14 | titleInner: null,
15 | // inner meta element (.content__meta .oh__inner)
16 | metaInner: null,
17 | // text element (.content__text)
18 | text: null,
19 | // thumbs (.content__thumbs-item)
20 | thumbs: null,
21 | };
22 |
23 | /**
24 | * Constructor.
25 | * @param {Element} DOM_el - main element (.content)
26 | */
27 | constructor(DOM_el) {
28 | this.DOM.el = DOM_el;
29 | this.DOM.title = this.DOM.el.querySelector('.content__title');
30 | this.DOM.titleInner = [...this.DOM.title.querySelectorAll('.oh__inner')];
31 | this.DOM.metaInner = this.DOM.el.querySelector('.content__meta > .oh__inner');
32 | this.DOM.text = this.DOM.el.querySelector('.content__text');
33 | this.multiLine = new TextLinesReveal(this.DOM.text);
34 | this.DOM.thumbs = [...this.DOM.el.querySelectorAll('.content__thumbs-item')];
35 | }
36 | }
--------------------------------------------------------------------------------
/src/js/index.js:
--------------------------------------------------------------------------------
1 | import { preloadImages, isInViewport } from './utils';
2 | import { Preview } from './preview';
3 | import Lenis from '@studio-freight/lenis';
4 | import { gsap } from 'gsap';
5 | import { ScrollTrigger } from 'gsap/ScrollTrigger';
6 | gsap.registerPlugin(ScrollTrigger);
7 | import { Flip } from 'gsap/Flip';
8 | gsap.registerPlugin(Flip);
9 |
10 | const ANIMATION_CONFIG = {duration: 1.5, ease: 'power4.inOut'};
11 |
12 | const previewElems = [...document.querySelectorAll('.preview')];
13 | const contentElems = [...document.querySelectorAll('.content')];
14 | const previewItems = [];
15 | previewElems.forEach((item, pos) => {
16 | previewItems.push(new Preview(item, contentElems[pos]))
17 | });
18 | const backCtrl = document.querySelector('.action--back');
19 |
20 | // Smooth scrolling.
21 | let lenis;
22 | // Current open item's position
23 | let currentItem = -1;
24 |
25 | let isAnimating = false;
26 |
27 | const initSmoothScrolling = () => {
28 | // Smooth scrolling initialization (using Lenis https://github.com/studio-freight/lenis)
29 | lenis = new Lenis({
30 | lerp: 0.1,
31 | smooth: true,
32 | direction: 'vertical',
33 | });
34 | const scrollFn = () => {
35 | lenis.raf();
36 | requestAnimationFrame(scrollFn);
37 | };
38 | requestAnimationFrame(scrollFn);
39 | };
40 |
41 | const animateOnScroll = () => {
42 |
43 | for (const item of previewItems) {
44 |
45 | gsap.set(item.DOM.imageInner, {transformOrigin: '50% 0%'});
46 |
47 | item.scrollTimeline = gsap.timeline({
48 | scrollTrigger: {
49 | trigger: item.DOM.el,
50 | start: 'top bottom',
51 | end: 'bottom top',
52 | scrub: true
53 | }
54 | })
55 | .addLabel('start', 0)
56 | .to(item.DOM.title, {
57 | ease: 'none',
58 | yPercent: -100
59 | }, 'start')
60 | .to(item.DOM.imageInner, {
61 | ease: 'none',
62 | scaleY: 1.8,
63 | }, 'start')
64 |
65 | }
66 |
67 | };
68 |
69 | const getAdjacentItems = item => {
70 | let arr = [];
71 | for (const [position, otherItem] of previewItems.entries()) {
72 |
73 | if ( item != otherItem && isInViewport(otherItem.DOM.el) ) {
74 | arr.push({position: position, item: otherItem});
75 | }
76 |
77 | }
78 | return arr;
79 | };
80 |
81 | const showContent = item => {
82 |
83 | // Get adjacent items. Need to hide them.
84 | const itemIndex = previewItems.indexOf(item);
85 | const adjacentItems = getAdjacentItems(item);
86 | item.adjacentItems = adjacentItems;
87 |
88 | const tl = gsap.timeline({
89 | defaults: ANIMATION_CONFIG,
90 | onStart: () => {
91 | // Stop the "animate on scroll" timeline for this item
92 | //item.scrollTimeline.pause();
93 | // Stop the Lenis instance
94 | lenis.stop();
95 |
96 | // Overflow hidden and pointer events control class
97 | document.body.classList.add('content-open');
98 | // Shows current content element
99 | item.content.DOM.el.classList.add('content--current');
100 |
101 | gsap.set([item.content.DOM.titleInner, item.content.DOM.metaInner], {
102 | yPercent: -101,
103 | opacity: 0
104 | });
105 | gsap.set(item.content.DOM.thumbs, {
106 | transformOrigin: '0% 0%',
107 | scale: 0,
108 | yPercent: 150,
109 | });
110 | gsap.set([item.content.DOM.text, backCtrl], {
111 | opacity: 0
112 | });
113 |
114 | // Save image current scaleY value
115 | const scaleY = item.DOM.imageInner.getBoundingClientRect().height / item.DOM.imageInner.offsetHeight;
116 | item.imageInnerScaleYCached = scaleY;
117 | },
118 | onComplete: () => isAnimating = false
119 | })
120 | .addLabel('start', 0);
121 | // hide adjacent preview elements
122 |
123 | for (const el of item.adjacentItems) {
124 | tl.to(el.item.DOM.el, {
125 | y: el.position < itemIndex ? -window.innerHeight : window.innerHeight
126 | }, 'start')
127 | }
128 |
129 | // gsap Flip logic: move the image element inside the content area
130 | tl.add(() => {
131 | const flipstate = Flip.getState(item.DOM.image);
132 | item.content.DOM.el.appendChild(item.DOM.image);
133 | Flip.from(flipstate, {
134 | duration: ANIMATION_CONFIG.duration,
135 | ease: ANIMATION_CONFIG.ease,
136 | absolute: true,
137 | });
138 | }, 'start')
139 | // preview title
140 | .to(item.DOM.titleInner, {
141 | yPercent: 101,
142 | opacity: 0,
143 | stagger: -0.03
144 | }, 'start')
145 | // preview description
146 | .to(item.DOM.description, {
147 | yPercent: 101,
148 | opacity: 0
149 | }, 'start')
150 | // Reset image scaleY values (changed during scroll)
151 | .to(item.DOM.imageInner, {
152 | scaleY: 1
153 | }, 'start')
154 |
155 | // Content elements come in a bit later
156 | .addLabel('content', 0.15)
157 | // Back control button
158 | .to(backCtrl, {
159 | opacity: 1
160 | }, 'content')
161 | // content title
162 | .to(item.content.DOM.titleInner, {
163 | yPercent: 0,
164 | opacity: 1,
165 | stagger: -0.05
166 | }, 'content')
167 | // content meta / author
168 | .to(item.content.DOM.metaInner, {
169 | yPercent: 0,
170 | opacity: 1,
171 | }, 'content')
172 | // content thumbs
173 | .to(item.content.DOM.thumbs, {
174 | scale: 1,
175 | yPercent: 0,
176 | stagger: -0.05
177 | }, 'content')
178 | // content text (lines)
179 | .add(() => {
180 | item.content.multiLine.in();
181 |
182 | gsap.set(item.content.DOM.text, {
183 | opacity: 1,
184 | delay: 0.01
185 | });
186 | }, 'content');
187 |
188 | };
189 |
190 | const hideContent = () => {
191 |
192 | // the current open item
193 | const item = previewItems[currentItem];
194 |
195 | gsap.timeline({
196 | defaults: ANIMATION_CONFIG,
197 | onComplete: () => {
198 | // Stop the "animate on scroll" timeline for this item
199 | //item.scrollTimeline.play();
200 |
201 | // Start the Lenis instance
202 | lenis.start();
203 |
204 | // Overflow hidden and pointer events control class
205 | document.body.classList.remove('content-open');
206 | // Hides current content element
207 | item.content.DOM.el.classList.remove('content--current');
208 |
209 | isAnimating = false;
210 | }
211 | })
212 | .addLabel('start', 0)
213 | // Back control button
214 | .to(backCtrl, {
215 | opacity: 0
216 | }, 'start')
217 | // content title
218 | .to(item.content.DOM.titleInner, {
219 | yPercent: -101,
220 | opacity: 0,
221 | stagger: 0.05
222 | }, 'start')
223 | // content meta / author
224 | .to(item.content.DOM.metaInner, {
225 | yPercent: -101,
226 | opacity: 0,
227 | }, 'start')
228 | // content thumbs
229 | .to(item.content.DOM.thumbs, {
230 | scale: 0,
231 | yPercent: 150,
232 | stagger: -0.05
233 | }, 'start')
234 | // content text (lines)
235 | .add(() => {
236 | item.content.multiLine.out();
237 | }, 'start')
238 |
239 | // Preview elements come in a bit later
240 | .addLabel('preview', 0.15)
241 | // hide adjacent preview elements
242 | .to(item.adjacentItems.map(el => el.item.DOM.el), {
243 | y: 0
244 | }, 'preview')
245 | // gsap Flip logic: move the image element inside the content area
246 | .add(() => {
247 | const flipstate = Flip.getState(item.DOM.image);
248 | item.DOM.imageWrap.appendChild(item.DOM.image);
249 | Flip.from(flipstate, {
250 | duration: ANIMATION_CONFIG.duration,
251 | ease: ANIMATION_CONFIG.ease,
252 | absolute: true,
253 | });
254 | }, 'preview')
255 | // preview title
256 | .to(item.DOM.titleInner, {
257 | yPercent: 0,
258 | opacity: 1,
259 | stagger: 0.03
260 | }, 'preview')
261 | // preview description
262 | .to(item.DOM.description, {
263 | yPercent: 0,
264 | opacity: 1
265 | }, 'preview')
266 | // Reset image scaleY values
267 | .to(item.DOM.imageInner, {
268 | scaleY: item.imageInnerScaleYCached
269 | }, 'preview')
270 |
271 | };
272 |
273 | // Initialize the events
274 | const initEvents = () => {
275 | for (const [pos,item] of previewItems.entries()) {
276 | item.DOM.imageWrap.addEventListener('click', () => {
277 | if ( isAnimating ) return;
278 | isAnimating = true;
279 | currentItem = pos;
280 | showContent(item);
281 | });
282 | }
283 |
284 | backCtrl.addEventListener('click', () => {
285 | if ( isAnimating ) return;
286 | isAnimating = true;
287 | hideContent();
288 | });
289 | };
290 |
291 | // Preload images and initialize scrolling animations
292 | preloadImages('.preview__img-inner, .content__thumbs-item').then( _ => {
293 | document.body.classList.remove('loading');
294 |
295 | initSmoothScrolling();
296 | animateOnScroll();
297 | initEvents();
298 | });
--------------------------------------------------------------------------------
/src/js/preview.js:
--------------------------------------------------------------------------------
1 | import { Content } from './content';
2 |
3 | /**
4 | * Class representing a Preview element (.preview)
5 | */
6 | export class Preview {
7 | // DOM elements
8 | DOM = {
9 | // main element (.preview)
10 | el: null,
11 | // image wrap element (.preview__img-wrap)
12 | imageWrap: null,
13 | // image element (.preview__img)
14 | image: null,
15 | // image inner element (.preview__img-inner)
16 | imageInner: null,
17 | // title element (.preview__title)
18 | title: null,
19 | // inner title elements (.oh__inner)
20 | titleInner: null,
21 | // description element (.preview__desc)
22 | description: null,
23 | };
24 |
25 | /**
26 | * Constructor.
27 | * @param {Element} DOM_el - main element (.preview)
28 | */
29 | constructor(DOM_el, content_el) {
30 | this.DOM.el = DOM_el;
31 | this.content = new Content(content_el);
32 | this.DOM.imageWrap = this.DOM.el.querySelector('.preview__img-wrap');
33 | this.DOM.image = this.DOM.imageWrap.querySelector('.preview__img');
34 | this.DOM.imageInner = this.DOM.image.querySelector('.preview__img-inner');
35 | this.DOM.title = this.DOM.el.querySelector('.preview__title');
36 | this.DOM.titleInner = [...this.DOM.title.querySelectorAll('.oh__inner')];
37 | this.DOM.description = this.DOM.el.querySelector('.preview__desc');
38 | }
39 | }
--------------------------------------------------------------------------------
/src/js/textLinesReveal.js:
--------------------------------------------------------------------------------
1 | import SplitType from 'split-type';
2 | import { wrapLines } from './utils';
3 | import { gsap } from 'gsap';
4 |
5 | /**
6 | * Class representing a text line element that reveals itself by animating its translateY value
7 | */
8 | export class TextLinesReveal {
9 | // DOM elements
10 | DOM = {
11 | // main element (a text DOM element)
12 | el: null
13 | }
14 | // Split Type instance
15 | SplitTypeInstance;
16 | // Checks if the Split Type lines are visible or not
17 | isVisible;
18 | // Animation timelines
19 | inTimeline;
20 | outTimeline;
21 |
22 | /**
23 | * Constructor.
24 | * @param {Element} DOM_el - a text DOM element
25 | */
26 | constructor(DOM_el) {
27 | this.DOM = {
28 | el: DOM_el
29 | };
30 |
31 | this.SplitTypeInstance = new SplitType(this.DOM.el, { types: 'lines' });
32 | // Wrap the lines (div with class .oh)
33 | // The inner child will be the one animating the transform
34 | wrapLines(this.SplitTypeInstance.lines, 'div', 'oh');
35 |
36 | this.initEvents();
37 | }
38 |
39 | /**
40 | * Animates the lines in.
41 | * @return {GSAP Timeline} the animation timeline
42 | * @param {Boolean} animation - with or without animation.
43 | */
44 | in(animation = true) {
45 | // Lines are visible
46 | this.isVisible = true;
47 |
48 | gsap.killTweensOf(this.SplitTypeInstance.lines);
49 | this.inTimeline = gsap.timeline({defaults: {
50 | duration: 1.5,
51 | ease: 'power4.inOut',
52 | }})
53 | .addLabel('start', 0)
54 | .set(this.SplitTypeInstance.lines, {
55 | yPercent: 105,
56 | }, 'start');
57 |
58 | if ( animation ) {
59 | this.inTimeline.to(this.SplitTypeInstance.lines, {
60 | yPercent: 0,
61 | stagger: 0.1
62 | }, 'start');
63 | }
64 | else {
65 | this.inTimeline.set(this.SplitTypeInstance.lines, {
66 | yPercent: 0
67 | }, 'start');
68 | }
69 |
70 | return this.inTimeline;
71 | }
72 |
73 | /**
74 | * Animates the lines out.
75 | * @param {Boolean} animation - with or without animation.
76 | * @return {GSAP Timeline} the animation timeline
77 | */
78 | out(animation = true) {
79 | // Lines are invisible
80 | this.isVisible = false;
81 |
82 | gsap.killTweensOf(this.SplitTypeInstance.lines);
83 |
84 | this.outTimeline = gsap.timeline({defaults: {
85 | duration: 1.5,
86 | ease: 'power4.inOut'
87 | }}).addLabel('start', 0);
88 |
89 | if ( animation ) {
90 | this.outTimeline.to(this.SplitTypeInstance.lines, {
91 | yPercent: -105,
92 | stagger: 0.02
93 | }, 'start');
94 | }
95 | else {
96 | this.outTimeline.set(this.SplitTypeInstance.lines, {
97 | yPercent: -105,
98 | }, 'start');
99 | }
100 |
101 | return this.outTimeline;
102 | }
103 |
104 | /**
105 | * Initializes some events.
106 | */
107 | initEvents() {
108 | // Re-initialize the Split Text on window resize.
109 | window.addEventListener('resize', () => {
110 | // Re-split text
111 | // https://github.com/lukePeavey/SplitType#instancesplitoptions-void
112 | this.SplitTypeInstance.split();
113 |
114 | // Need to wrap again the new lines elements (div with class .oh)
115 | wrapLines(this.SplitTypeInstance.lines, 'div', 'oh');
116 |
117 | // Hide the lines
118 | if ( !this.isVisible ) {
119 | gsap.set(this.SplitTypeInstance.lines, {yPercent: -105});
120 | }
121 | });
122 | }
123 | }
--------------------------------------------------------------------------------
/src/js/utils.js:
--------------------------------------------------------------------------------
1 | const imagesLoaded = require('imagesloaded');
2 |
3 | /**
4 | * Linear interpolation
5 | * @param {Number} a - first value to interpolate
6 | * @param {Number} b - second value to interpolate
7 | * @param {Number} n - amount to interpolate
8 | */
9 | const lerp = (a, b, n) => (1 - n) * a + n * b;
10 |
11 | /**
12 | * Gets the cursor position
13 | * @param {Event} ev - mousemove event
14 | */
15 | const getCursorPos = ev => {
16 | return {
17 | x : ev.clientX,
18 | y : ev.clientY
19 | };
20 | };
21 |
22 | /**
23 | * Preload images
24 | * @param {String} selector - Selector/scope from where images need to be preloaded. Default is 'img'
25 | */
26 | const preloadImages = (selector = 'img') => {
27 | return new Promise((resolve) => {
28 | imagesLoaded(document.querySelectorAll(selector), {background: true}, resolve);
29 | });
30 | };
31 |
32 | /**
33 | * Wraps the elements of an array.
34 | * @param {Array} arr - the array of elements to be wrapped
35 | * @param {String} wrapType - the type of the wrap element ('div', 'span' etc)
36 | * @param {String} wrapClass - the wrap class(es)
37 | */
38 | const wrapLines = (arr, wrapType, wrapClass) => {
39 | arr.forEach(el => {
40 | const wrapEl = document.createElement(wrapType);
41 | wrapEl.classList = wrapClass;
42 | el.parentNode.appendChild(wrapEl);
43 | wrapEl.appendChild(el);
44 | });
45 | }
46 |
47 | /**
48 | * Checks if an element is in the viewport
49 | * @param {Element} elem - the element to be checked
50 | */
51 | const isInViewport = elem => {
52 | var bounding = elem.getBoundingClientRect();
53 | return (
54 | (bounding.bottom >= 0 && bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) || bounding.top >= 0 && bounding.top <= (window.innerHeight || document.documentElement.clientHeight)) &&
55 | (bounding.right >= 0 && bounding.right <= (window.innerWidth || document.documentElement.clientWidth) || bounding.left >= 0 && bounding.left <= (window.innerWidth || document.documentElement.clientWidth))
56 | );
57 | };
58 |
59 | export {
60 | lerp,
61 | getCursorPos,
62 | preloadImages,
63 | wrapLines,
64 | isInViewport,
65 | };
--------------------------------------------------------------------------------