├── .babelrc
├── .editorconfig
├── .eslintrc
├── .gitignore
├── .nvmrc
├── .travis.yml
├── LICENSE
├── README.md
├── dist
├── sal.css
└── sal.js
├── index.d.ts
├── index.html
├── package.json
├── postcss.config.js
├── src
├── sal.js
└── sal.scss
├── test
├── config
│ └── browser.js
├── fixtures
│ ├── default.html
│ ├── disabled.html
│ ├── repeat-once-attr.html
│ ├── repeat.html
│ ├── reset.html
│ └── update.html
├── index.test.js
└── mocks
│ └── styleMock.js
├── webpack.config.js
├── website
├── images
│ ├── android-chrome-192x192.png
│ ├── android-chrome-512x512.png
│ ├── apple-touch-icon.png
│ ├── favicon-16x16.png
│ ├── favicon-32x32.png
│ ├── favicon.ico
│ ├── logo.svg
│ └── manifest.json
├── styles.css
└── template
│ ├── index.pug
│ └── shape.pug
└── yarn.lock
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": [
3 | [
4 | "@babel/preset-env",
5 | {
6 | "useBuiltIns": "entry",
7 | "corejs": 3
8 | }
9 | ]
10 | ],
11 | "env": {
12 | "test": {
13 | "presets": [
14 | [
15 | "@babel/preset-env",
16 | {
17 | "targets": {
18 | "node": "current"
19 | }
20 | }
21 | ]
22 | ],
23 | "plugins": [
24 | "@babel/transform-runtime"
25 | ]
26 | }
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | # Editor configuration, see http://editorconfig.org
2 | root = true
3 |
4 | [*]
5 | charset = utf-8
6 | indent_style = space
7 | indent_size = 2
8 | insert_final_newline = true
9 | trim_trailing_whitespace = true
10 |
11 | [*.md]
12 | max_line_length = off
13 | trim_trailing_whitespace = false
14 |
--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "airbnb-base",
3 | "parser": "babel-eslint",
4 | "parserOptions": {
5 | "ecmaVersion": 6
6 | },
7 | "rules": {
8 | "no-unused-vars": 2,
9 | "max-len": [2, 80, 2],
10 | "no-console": 1,
11 | "prefer-arrow-callback": 2,
12 | "func-style": [
13 | 2,
14 | "expression",
15 | {
16 | "allowArrowFunctions": true
17 | }
18 | ],
19 | "arrow-body-style": [2, "as-needed"],
20 | "array-bracket-spacing": ["error", "never"],
21 | "computed-property-spacing": ["error", "never"],
22 | "no-duplicate-imports": "error",
23 | "object-curly-spacing": ["error", "always"]
24 | },
25 | "env": {
26 | "node": true,
27 | "browser": true,
28 | "es6": true,
29 | "jest": true
30 | },
31 | "globals": {
32 | "process": "readonly",
33 | "module": "readonly"
34 | }
35 | }
36 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Numerous always-ignore extensions
2 | *.diff
3 | *.err
4 | *.log
5 | *.orig
6 | *.rej
7 | *.swo
8 | *.swp
9 | *.vi
10 | *.zip
11 | *~
12 |
13 | # OS or Editor folders
14 | ._*
15 | .cache
16 | .DS_Store
17 | .idea
18 | .project
19 | .settings
20 | .tmproj
21 | *.esproj
22 | *.sublime-project
23 | *.sublime-workspace
24 | nbproject
25 | Thumbs.db
26 |
27 | # Folders to ignore
28 | bower_components
29 | node_modules
30 |
31 | # Dev files to ignore
32 | dist/*.map
33 |
34 | # waiting for https://github.com/GoogleChromeLabs/size-plugin/issues/28
35 | size-plugin.json
36 |
--------------------------------------------------------------------------------
/.nvmrc:
--------------------------------------------------------------------------------
1 | lts/erbium
2 |
--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | node_js:
3 | - lts/erbium
4 | script:
5 | - npm run build
6 | - npm run test
7 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2017 Mirosław Ciastek
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 | # Sal [](https://www.npmjs.com/package/sal.js) [](https://github.com/mciastek/sal/blob/master/LICENSE) [](https://travis-ci.com/mciastek/sal)
2 |
3 | Performance focused, lightweight (less than **2.8 kb**) scroll animation library, written in vanilla JavaScript. No dependencies!
4 |
5 | **Sal** (_Scroll Animation Library_) was created to provide a performant and lightweight solution for animating elements on scroll. It's based on the [Intersection Observer](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API), which gives amazing performance in terms of checking the element's presence in the viewport.
6 |
7 | **Note:** Intersection Observer API is an experimental technology so be sure to consult the [browser compatibility table](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Browser_compatibility) and consider using a [polyfill](https://github.com/w3c/IntersectionObserver/tree/master/polyfill).
8 |
9 | ## Table of Contents
10 | - [Install](#install)
11 | - [Usage](#usage)
12 | - [Animations](#animations)
13 | - [Options](#options)
14 | - [API](#api)
15 | - [Events](#events)
16 | - [Misc](#misc)
17 | - [License](#license)
18 |
19 | ## Install
20 |
21 | ```sh
22 | # Usage with NPM
23 | $ npm install --save sal.js
24 |
25 | # and with Yarn
26 | $ yarn add sal.js
27 | ```
28 |
29 | Load it with your favorite module loader or use as a global variable
30 |
31 | ```js
32 | // ES6 modules
33 | import sal from 'sal.js'
34 |
35 | // CommonJS modules
36 | var sal = require('sal.js')
37 | ```
38 |
39 | And remember to add styles
40 |
41 | ```scss
42 | // Webpack
43 | @import '~sal.js/sal.css';
44 |
45 | // Other
46 | @import './node_modules/sal.js/dist/sal.css';
47 | ```
48 |
49 | ## Usage
50 |
51 | In HTML, add a `data-sal` attribute with the animation name as value, e.g.:
52 |
53 | ```html
54 |
55 | ```
56 |
57 | Then simply initialize Sal in your script file:
58 |
59 | ```js
60 | sal();
61 | ```
62 |
63 | It will look for all elements with a `data-sal` attribute and launch their animation when in viewport.
64 |
65 | ## Animations
66 | In **sal.js** you can easily change animation's options, by adding a proper `data` attribute:
67 | - `data-sal-duration` - changes duration of the animation (from 200 to 2000 ms)
68 | - `data-sal-delay` - adds delay to the animation (from 5 to 1000 ms)
69 | - `data-sal-easing` - sets easing for the animation (see [easings.net](https://easings.net/) for reference)
70 |
71 | For example:
72 | ```html
73 |
78 | ```
79 |
80 | The library supports several animations:
81 | - `fade`
82 | - `slide-up`
83 | - `slide-down`
84 | - `slide-left`
85 | - `slide-right`
86 | - `zoom-in`
87 | - `zoom-out`
88 | - `flip-up`
89 | - `flip-down`
90 | - `flip-left`
91 | - `flip-right`
92 |
93 | ### Duration and delay
94 |
95 | Additionaly, when you want to customise animation's properties - `duration`, `delay` and `easing`, you can use [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) to set any value you want. See the following example:
96 |
97 | ```html
98 |
102 | ```
103 |
104 | Supported custom properties:
105 | - `--sal-duration`
106 | - `--sal-delay`
107 | - `--sal-easing`
108 |
109 | Remember, that you can use only data attributes (e.g. `data-sal-delay`) or CSS custom properties (e.g. `--sal-delay`). Data attributes have precedence over CSS custom properties.
110 |
111 | ### Repeating animation
112 |
113 | By default every animation is played once. You can change it by setting `once` option to `false` (see [Options](#options)). What's more, it's possible to override this option for an animated element by adding one of the following attributes:
114 | - `data-sal-repeat` - forces animation replay
115 | - `data-sal-once` - plays animation once
116 |
117 | ## Options
118 |
119 | | Property | Type | Description | Default |
120 | |---------------------------|-------------|---------------|---------|
121 | | `threshold` | Number | Percentage of an element's area that needs to be visible to launch animation (see [docs](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/thresholds)) | `0.5` |
122 | | `once` | Boolean | Defines if animation needs to be launched once. Can be overridden, see [Repeating Animation](#repeating-animation). | `true` |
123 | | `disabled` | Boolean or Function | Flag (or a function returning boolean) for disabling animations | `false` |
124 |
125 | You can set options during Sal's initialization, e.g.:
126 |
127 | ```js
128 | sal({
129 | threshold: 1,
130 | once: false,
131 | });
132 | ```
133 |
134 | ### Advanced options
135 |
136 | | Property | Type | Description | Default |
137 | |---------------------------|-------------|---------------|---------|
138 | | `root` | Element or null | The element that is used as the viewport for checking visibility of the target (see [docs](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/root)) | `window` |
139 | | `selector` | String | Selector of the elements to be animated | `[data-sal]` |
140 | | `animateClassName` | String | Class name which triggers animation | `sal-animate` |
141 | | `disabledClassName` | String | Class name which defines the disabled state | `sal-disabled` |
142 | | `rootMargin` | String | Corresponds to root's bounding box margin (see [docs](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/rootMargin)) | `0% 50%` |
143 | | `enterEventName` | String | Enter event name (see [Events](#events)) | `sal:in` |
144 | | `exitEventName` | String | Exit event name (see [Events](#events)) | `sal:out` |
145 |
146 | ## API
147 |
148 | | Method name | Description |
149 | |---------------------------|-------------|
150 | | `enable` | Enables animations |
151 | | `disable` | Disables animations |
152 | | `reset` | Resets instance and allows to pass new options (see [Options](#options)) |
153 | | `update` | Updates observer with new elements to animated. Useful for dynamically injected HTML. |
154 |
155 | Public methods are available after Sal's initialization:
156 |
157 | ```js
158 | const scrollAnimations = sal();
159 |
160 | scrollAnimations.disable();
161 | ```
162 |
163 | ### Changing options after intialization
164 |
165 | If you want to change Sal's options once it's been initialized, you should use `reset` method, that allows you to pass new set of options. It can be useful, when you would like to provide different options for specific viewport sizes.
166 |
167 | ```js
168 | const scrollAnimations = sal();
169 |
170 | // Provide new options
171 | scrollAnimations.reset({
172 | selector: 'animated-element',
173 | once: true,
174 | });
175 | ```
176 |
177 | ## Events
178 |
179 | This library supports events, fired when element is entering or exiting viewport (they are named `sal:in` and `sal:out` by default). Property `detail` is [IntersectionObserverEntry](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry) object.
180 |
181 |
182 | You can attach listener to specific element.
183 |
184 | ```js
185 | // Get element with ".animated" class, which has "data-sal" attribute
186 | const element = document.querySelector('.animated');
187 |
188 | element.addEventListener('sal:in', ({ detail }) => {
189 | console.log('entering', detail.target);
190 | });
191 | ```
192 |
193 | or to the whole document
194 |
195 | ```js
196 | document.addEventListener('sal:out', ({ detail }) => {
197 | console.log('exiting', detail.target);
198 | });
199 | ```
200 |
201 | **Note:** This library uses [Custom Event](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent) to trigger events on animated elements. Check the [compatibility table](https://caniuse.com/#search=custom%20event) to know if your browser supports it and use a [polyfill](https://github.com/kumarharsh/custom-event-polyfill) if needed.
202 |
203 | ## Misc
204 |
205 | ### No-JS support
206 |
207 | If you aim to support users that don't allow sites to use JavaScript, you should consider disabling animations' styles in the first place. You can use `` element to inject required CSS. Here's an example:
208 |
209 | ```html
210 |
227 | ```
228 |
229 | ## License
230 |
231 | Created by [Mirek Ciastek](https://github.com/mciastek). Released under the [MIT License](https://github.com/mciastek/sal/blob/master/LICENSE).
232 |
--------------------------------------------------------------------------------
/dist/sal.css:
--------------------------------------------------------------------------------
1 | [data-sal]{transition-delay:0s;transition-delay:var(--sal-delay,0s);transition-duration:.2s;transition-duration:var(--sal-duration,.2s);transition-timing-function:ease;transition-timing-function:var(--sal-easing,ease)}[data-sal][data-sal-duration="200"]{transition-duration:.2s}[data-sal][data-sal-duration="250"]{transition-duration:.25s}[data-sal][data-sal-duration="300"]{transition-duration:.3s}[data-sal][data-sal-duration="350"]{transition-duration:.35s}[data-sal][data-sal-duration="400"]{transition-duration:.4s}[data-sal][data-sal-duration="450"]{transition-duration:.45s}[data-sal][data-sal-duration="500"]{transition-duration:.5s}[data-sal][data-sal-duration="550"]{transition-duration:.55s}[data-sal][data-sal-duration="600"]{transition-duration:.6s}[data-sal][data-sal-duration="650"]{transition-duration:.65s}[data-sal][data-sal-duration="700"]{transition-duration:.7s}[data-sal][data-sal-duration="750"]{transition-duration:.75s}[data-sal][data-sal-duration="800"]{transition-duration:.8s}[data-sal][data-sal-duration="850"]{transition-duration:.85s}[data-sal][data-sal-duration="900"]{transition-duration:.9s}[data-sal][data-sal-duration="950"]{transition-duration:.95s}[data-sal][data-sal-duration="1000"]{transition-duration:1s}[data-sal][data-sal-duration="1050"]{transition-duration:1.05s}[data-sal][data-sal-duration="1100"]{transition-duration:1.1s}[data-sal][data-sal-duration="1150"]{transition-duration:1.15s}[data-sal][data-sal-duration="1200"]{transition-duration:1.2s}[data-sal][data-sal-duration="1250"]{transition-duration:1.25s}[data-sal][data-sal-duration="1300"]{transition-duration:1.3s}[data-sal][data-sal-duration="1350"]{transition-duration:1.35s}[data-sal][data-sal-duration="1400"]{transition-duration:1.4s}[data-sal][data-sal-duration="1450"]{transition-duration:1.45s}[data-sal][data-sal-duration="1500"]{transition-duration:1.5s}[data-sal][data-sal-duration="1550"]{transition-duration:1.55s}[data-sal][data-sal-duration="1600"]{transition-duration:1.6s}[data-sal][data-sal-duration="1650"]{transition-duration:1.65s}[data-sal][data-sal-duration="1700"]{transition-duration:1.7s}[data-sal][data-sal-duration="1750"]{transition-duration:1.75s}[data-sal][data-sal-duration="1800"]{transition-duration:1.8s}[data-sal][data-sal-duration="1850"]{transition-duration:1.85s}[data-sal][data-sal-duration="1900"]{transition-duration:1.9s}[data-sal][data-sal-duration="1950"]{transition-duration:1.95s}[data-sal][data-sal-duration="2000"]{transition-duration:2s}[data-sal][data-sal-delay="50"]{transition-delay:.05s}[data-sal][data-sal-delay="100"]{transition-delay:.1s}[data-sal][data-sal-delay="150"]{transition-delay:.15s}[data-sal][data-sal-delay="200"]{transition-delay:.2s}[data-sal][data-sal-delay="250"]{transition-delay:.25s}[data-sal][data-sal-delay="300"]{transition-delay:.3s}[data-sal][data-sal-delay="350"]{transition-delay:.35s}[data-sal][data-sal-delay="400"]{transition-delay:.4s}[data-sal][data-sal-delay="450"]{transition-delay:.45s}[data-sal][data-sal-delay="500"]{transition-delay:.5s}[data-sal][data-sal-delay="550"]{transition-delay:.55s}[data-sal][data-sal-delay="600"]{transition-delay:.6s}[data-sal][data-sal-delay="650"]{transition-delay:.65s}[data-sal][data-sal-delay="700"]{transition-delay:.7s}[data-sal][data-sal-delay="750"]{transition-delay:.75s}[data-sal][data-sal-delay="800"]{transition-delay:.8s}[data-sal][data-sal-delay="850"]{transition-delay:.85s}[data-sal][data-sal-delay="900"]{transition-delay:.9s}[data-sal][data-sal-delay="950"]{transition-delay:.95s}[data-sal][data-sal-delay="1000"]{transition-delay:1s}[data-sal][data-sal-easing=linear]{transition-timing-function:linear}[data-sal][data-sal-easing=ease]{transition-timing-function:ease}[data-sal][data-sal-easing=ease-in]{transition-timing-function:ease-in}[data-sal][data-sal-easing=ease-out]{transition-timing-function:ease-out}[data-sal][data-sal-easing=ease-in-out]{transition-timing-function:ease-in-out}[data-sal][data-sal-easing=ease-in-cubic]{transition-timing-function:cubic-bezier(.55,.055,.675,.19)}[data-sal][data-sal-easing=ease-out-cubic]{transition-timing-function:cubic-bezier(.215,.61,.355,1)}[data-sal][data-sal-easing=ease-in-out-cubic]{transition-timing-function:cubic-bezier(.645,.045,.355,1)}[data-sal][data-sal-easing=ease-in-circ]{transition-timing-function:cubic-bezier(.6,.04,.98,.335)}[data-sal][data-sal-easing=ease-out-circ]{transition-timing-function:cubic-bezier(.075,.82,.165,1)}[data-sal][data-sal-easing=ease-in-out-circ]{transition-timing-function:cubic-bezier(.785,.135,.15,.86)}[data-sal][data-sal-easing=ease-in-expo]{transition-timing-function:cubic-bezier(.95,.05,.795,.035)}[data-sal][data-sal-easing=ease-out-expo]{transition-timing-function:cubic-bezier(.19,1,.22,1)}[data-sal][data-sal-easing=ease-in-out-expo]{transition-timing-function:cubic-bezier(1,0,0,1)}[data-sal][data-sal-easing=ease-in-quad]{transition-timing-function:cubic-bezier(.55,.085,.68,.53)}[data-sal][data-sal-easing=ease-out-quad]{transition-timing-function:cubic-bezier(.25,.46,.45,.94)}[data-sal][data-sal-easing=ease-in-out-quad]{transition-timing-function:cubic-bezier(.455,.03,.515,.955)}[data-sal][data-sal-easing=ease-in-quart]{transition-timing-function:cubic-bezier(.895,.03,.685,.22)}[data-sal][data-sal-easing=ease-out-quart]{transition-timing-function:cubic-bezier(.165,.84,.44,1)}[data-sal][data-sal-easing=ease-in-out-quart]{transition-timing-function:cubic-bezier(.77,0,.175,1)}[data-sal][data-sal-easing=ease-in-quint]{transition-timing-function:cubic-bezier(.755,.05,.855,.06)}[data-sal][data-sal-easing=ease-out-quint]{transition-timing-function:cubic-bezier(.23,1,.32,1)}[data-sal][data-sal-easing=ease-in-out-quint]{transition-timing-function:cubic-bezier(.86,0,.07,1)}[data-sal][data-sal-easing=ease-in-sine]{transition-timing-function:cubic-bezier(.47,0,.745,.715)}[data-sal][data-sal-easing=ease-out-sine]{transition-timing-function:cubic-bezier(.39,.575,.565,1)}[data-sal][data-sal-easing=ease-in-out-sine]{transition-timing-function:cubic-bezier(.445,.05,.55,.95)}[data-sal][data-sal-easing=ease-in-back]{transition-timing-function:cubic-bezier(.6,-.28,.735,.045)}[data-sal][data-sal-easing=ease-out-back]{transition-timing-function:cubic-bezier(.175,.885,.32,1.275)}[data-sal][data-sal-easing=ease-in-out-back]{transition-timing-function:cubic-bezier(.68,-.55,.265,1.55)}[data-sal|=fade]{opacity:0;transition-property:opacity}[data-sal|=fade].sal-animate,body.sal-disabled [data-sal|=fade]{opacity:1}[data-sal|=slide]{opacity:0;transition-property:opacity,transform}[data-sal=slide-up]{transform:translateY(20%)}[data-sal=slide-down]{transform:translateY(-20%)}[data-sal=slide-left]{transform:translateX(20%)}[data-sal=slide-right]{transform:translateX(-20%)}[data-sal|=slide].sal-animate,body.sal-disabled [data-sal|=slide]{opacity:1;transform:none}[data-sal|=zoom]{opacity:0;transition-property:opacity,transform}[data-sal=zoom-in]{transform:scale(.5)}[data-sal=zoom-out]{transform:scale(1.1)}[data-sal|=zoom].sal-animate,body.sal-disabled [data-sal|=zoom]{opacity:1;transform:none}[data-sal|=flip]{-webkit-backface-visibility:hidden;backface-visibility:hidden;transition-property:transform}[data-sal=flip-left]{transform:perspective(2000px) rotateY(-91deg)}[data-sal=flip-right]{transform:perspective(2000px) rotateY(91deg)}[data-sal=flip-up]{transform:perspective(2000px) rotateX(-91deg)}[data-sal=flip-down]{transform:perspective(2000px) rotateX(91deg)}[data-sal|=flip].sal-animate,body.sal-disabled [data-sal|=flip]{transform:none}
2 |
3 | /*# sourceMappingURL=sal.css.map*/
--------------------------------------------------------------------------------
/dist/sal.js:
--------------------------------------------------------------------------------
1 | !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.sal=t():e.sal=t()}(this,(function(){return(()=>{"use strict";var e={d:(t,n)=>{for(var r in n)e.o(n,r)&&!e.o(t,r)&&Object.defineProperty(t,r,{enumerable:!0,get:n[r]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t)},t={};function n(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function r(e){for(var t=1;tj});var a="Sal was not initialised! Probably it is used in SSR.",s="Your browser does not support IntersectionObserver!\nGet a polyfill from here:\nhttps://github.com/w3c/IntersectionObserver/tree/master/polyfill",i={root:null,rootMargin:"0% 50%",threshold:.5,animateClassName:"sal-animate",disabledClassName:"sal-disabled",enterEventName:"sal:in",exitEventName:"sal:out",selector:"[data-sal]",once:!0,disabled:!1},l=[],c=null,u=function(e){e&&e!==i&&(i=r(r({},i),e))},d=function(e){e.classList.remove(i.animateClassName)},f=function(e,t){var n=new CustomEvent(e,{bubbles:!0,detail:t});t.target.dispatchEvent(n)},b=function(){document.body.classList.add(i.disabledClassName)},p=function(){c.disconnect(),c=null},m=function(){return i.disabled||"function"==typeof i.disabled&&i.disabled()},v=function(e,t){e.forEach((function(e){var n=e.target,r=void 0!==n.dataset.salRepeat,o=void 0!==n.dataset.salOnce,a=r||!(o||i.once);e.intersectionRatio>=i.threshold?(function(e){e.target.classList.add(i.animateClassName),f(i.enterEventName,e)}(e),a||t.unobserve(n)):a&&function(e){d(e.target),f(i.exitEventName,e)}(e)}))},y=function(){var e=[].filter.call(document.querySelectorAll(i.selector),(function(e){return!function(e){return e.classList.contains(i.animateClassName)}(e,i.animateClassName)}));return e.forEach((function(e){return c.observe(e)})),e},O=function(){b(),p()},h=function(){document.body.classList.remove(i.disabledClassName),c=new IntersectionObserver(v,{root:i.root,rootMargin:i.rootMargin,threshold:i.threshold}),l=y()},g=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};p(),Array.from(document.querySelectorAll(i.selector)).forEach(d),u(e),h()},w=function(){var e=y();l.push(e)};const j=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:i;if(u(e),"undefined"==typeof window)return console.warn(a),{elements:l,disable:O,enable:h,reset:g,update:w};if(!window.IntersectionObserver)throw b(),Error(s);return m()?b():h(),{elements:l,disable:O,enable:h,reset:g,update:w}};return t.default})()}));
2 | //# sourceMappingURL=sal.js.map
--------------------------------------------------------------------------------
/index.d.ts:
--------------------------------------------------------------------------------
1 | declare namespace sal {
2 | interface Options {
3 | root: Element | null;
4 | rootMargin?: string;
5 | threshold?: number;
6 | animateClassName?: string;
7 | disabledClassName?: string;
8 | enterEventName?: string,
9 | exitEventName?: string,
10 | selector?: string;
11 | once?: boolean;
12 | disabled?: boolean;
13 | }
14 |
15 | interface API {
16 | /**
17 | * Collection of elements to be animated.
18 | */
19 | elements: HTMLElement[];
20 |
21 | /**
22 | * Enables instance by launching new IntersectionObserver.
23 | */
24 | enable: () => void;
25 |
26 | /**
27 | * Disables instance by removing animations and clearing observer.
28 | */
29 | disable: () => void;
30 |
31 | /**
32 | * Resets instance to provide new settings.
33 | * @param {Options} settings
34 | */
35 | reset: (settings?: Options) => void;
36 |
37 | /**
38 | * Updates observer with new elements to animated.
39 | * Useful for dynamically injected elements.
40 | */
41 | update: () => void;
42 | }
43 |
44 | type Instance = (options?: Options) => API;
45 | }
46 |
47 | declare const sal: sal.Instance;
48 |
49 | export as namespace sal;
50 | export = sal;
51 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 | Sal - Lightweight scroll animation library
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "sal.js",
3 | "version": "0.8.5",
4 | "description": "Performance focused, lightweight scroll animation library",
5 | "main": "dist/sal.js",
6 | "repository": {
7 | "type": "git",
8 | "url": "https://github.com/mciastek/sal.git"
9 | },
10 | "bugs": {
11 | "url": "https://github.com/mciastek/sal/issues"
12 | },
13 | "files": [
14 | "dist/",
15 | "src/",
16 | "index.d.ts"
17 | ],
18 | "licenses": [
19 | {
20 | "type": "MIT",
21 | "url": "https://github.com/mciastek/sal/blob/master/LICENSE"
22 | }
23 | ],
24 | "keywords": [
25 | "scroll",
26 | "on scroll",
27 | "animate",
28 | "animations",
29 | "animate on scroll",
30 | "performance",
31 | "css"
32 | ],
33 | "engines": {
34 | "node": ">=12.0.0"
35 | },
36 | "scripts": {
37 | "build": "NODE_ENV=production webpack",
38 | "pretest": "./node_modules/.bin/eslint ./src/**/*.js",
39 | "test": "NODE_ENV=test jest --verbose",
40 | "test:watch": "NODE_ENV=test jest --verbose --watchAll"
41 | },
42 | "author": "Mirek Ciastek",
43 | "license": "MIT",
44 | "devDependencies": {
45 | "@babel/plugin-transform-async-to-generator": "^7.13.0",
46 | "@babel/plugin-transform-runtime": "^7.13.15",
47 | "@babel/preset-env": "^7.14.0",
48 | "@babel/runtime": "^7.14.0",
49 | "babel-eslint": "^10.1.0",
50 | "babel-jest": "^26.6.3",
51 | "babel-loader": "^8.2.2",
52 | "core-js": "^3.11.1",
53 | "css-loader": "^5.2.4",
54 | "cssnano": "^5.0.2",
55 | "eslint": "^7.25.0",
56 | "eslint-config-airbnb-base": "^14.2.1",
57 | "eslint-plugin-import": "^2.22.1",
58 | "html-webpack-plugin": "^5.3.1",
59 | "jest": "^26.6.3",
60 | "mini-css-extract-plugin": "^1.6.0",
61 | "node-sass": "^5.0.0",
62 | "postcss": "^8.2.13",
63 | "postcss-loader": "^5.2.0",
64 | "postcss-preset-env": "^6.7.0",
65 | "pug": "^3.0.2",
66 | "pug-loader": "^2.4.0",
67 | "puppeteer": "^9.0.0",
68 | "sass-loader": "^11.0.1",
69 | "size-plugin": "^2.0.2",
70 | "style-loader": "^2.0.0",
71 | "webpack": "^5.36.2",
72 | "webpack-cli": "^4.6.0"
73 | },
74 | "jest": {
75 | "transform": {
76 | ".*": "/node_modules/babel-jest"
77 | },
78 | "moduleNameMapper": {
79 | "\\.(css|scss)$": "/test/mocks/styleMock.js"
80 | }
81 | }
82 | }
83 |
--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | plugins: {
3 | 'postcss-preset-env': {},
4 | cssnano: {},
5 | },
6 | };
7 |
--------------------------------------------------------------------------------
/src/sal.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Sal - Scroll Animation Library
3 | * Performance focused, lightweight scroll animation library
4 | */
5 |
6 | import './sal.scss';
7 |
8 | const SSR_MESSAGE = 'Sal was not initialised! Probably it is used in SSR.';
9 |
10 | const NOT_SUPPORTED_MESSAGE = ''
11 | + 'Your browser does not support IntersectionObserver!\n'
12 | + 'Get a polyfill from here:\n'
13 | + 'https://github.com/w3c/IntersectionObserver/tree/master/polyfill';
14 |
15 | /**
16 | * Default options
17 | */
18 | let options = {
19 | root: null,
20 | rootMargin: '0% 50%',
21 | threshold: 0.5,
22 | animateClassName: 'sal-animate',
23 | disabledClassName: 'sal-disabled',
24 | enterEventName: 'sal:in',
25 | exitEventName: 'sal:out',
26 | selector: '[data-sal]',
27 | once: true,
28 | disabled: false,
29 | };
30 |
31 | /**
32 | * Private
33 | */
34 | let elements = [];
35 | let intersectionObserver = null;
36 |
37 | /**
38 | * Sets options.
39 | * @param {Object} settings
40 | */
41 | const setOptions = (settings) => {
42 | if (settings && settings !== options) {
43 | options = {
44 | ...options,
45 | ...settings,
46 | };
47 | }
48 | };
49 |
50 | /**
51 | * Clears animation for given element.
52 | * @param {HTMLElement} element
53 | */
54 | const clearAnimation = (element) => {
55 | element.classList.remove(options.animateClassName);
56 | };
57 |
58 | /**
59 | * Dispatches the animate event on the intersection observer entry.
60 | * @param {IntersectionObserverEntry} detail The entry to fire event on.
61 | */
62 | const fireEvent = (name, entry) => {
63 | const event = new CustomEvent(name, {
64 | bubbles: true,
65 | detail: entry,
66 | });
67 |
68 | entry.target.dispatchEvent(event);
69 | };
70 |
71 | /**
72 | * Launches animation by adding class.
73 | * @param {IntersectionObserverEntry} entry
74 | */
75 | const animate = (entry) => {
76 | entry.target.classList.add(options.animateClassName);
77 | fireEvent(options.enterEventName, entry);
78 | };
79 |
80 | /**
81 | * Reverses animation by removing class.
82 | * @param {IntersectionObserverEntry} entry
83 | */
84 | const reverse = (entry) => {
85 | clearAnimation(entry.target);
86 | fireEvent(options.exitEventName, entry);
87 | };
88 |
89 | /**
90 | * Checks if element was animated.
91 | * @param {HTMLElement} element
92 | */
93 | const isAnimated = (element) => (
94 | element.classList.contains(options.animateClassName)
95 | );
96 |
97 | /**
98 | * Enables animations by remove class from body.
99 | */
100 | const enableAnimations = () => {
101 | document.body.classList.remove(options.disabledClassName);
102 | };
103 |
104 | /**
105 | * Disables animations by add class from body.
106 | */
107 | const disableAnimations = () => {
108 | document.body.classList.add(options.disabledClassName);
109 | };
110 |
111 | /**
112 | * Clears observer.
113 | */
114 | const clearObserver = () => {
115 | intersectionObserver.disconnect();
116 | intersectionObserver = null;
117 | };
118 |
119 | /**
120 | * Check if should be disabled.
121 | * @return {Boolean}
122 | */
123 | const isDisabled = () => (
124 | options.disabled
125 | || (
126 | (typeof options.disabled === 'function')
127 | && options.disabled()
128 | )
129 | );
130 |
131 | /**
132 | * IntersectionObserver callback.
133 | * @param {Array} entries
134 | * @param {IntersectionObserver} observer
135 | */
136 | const onIntersection = (entries, observer) => {
137 | entries.forEach((entry) => {
138 | const { target } = entry;
139 | const hasRepeatFlag = target.dataset.salRepeat !== undefined;
140 | const hasOnceFlag = target.dataset.salOnce !== undefined;
141 | const shouldRepeat = hasRepeatFlag || !(hasOnceFlag || options.once);
142 |
143 | if (entry.intersectionRatio >= options.threshold) {
144 | animate(entry);
145 |
146 | if (!shouldRepeat) {
147 | observer.unobserve(target);
148 | }
149 | } else if (shouldRepeat) {
150 | reverse(entry);
151 | }
152 | });
153 | };
154 |
155 | /**
156 | * Returns collection of elements and pushes them to observer.
157 | *
158 | * @returns {Array}
159 | */
160 | const getObservedElements = () => {
161 | const collection = [].filter.call(
162 | document.querySelectorAll(options.selector),
163 | (element) => !isAnimated(element, options.animateClassName),
164 | );
165 |
166 | collection.forEach((element) => intersectionObserver.observe(element));
167 |
168 | return collection;
169 | };
170 |
171 | /**
172 | * Disables instance by removing animations and clearing observer.
173 | */
174 | const disable = () => {
175 | disableAnimations();
176 | clearObserver();
177 | };
178 |
179 | /**
180 | * Enables instance by launching new IntersectionObserver.
181 | */
182 | const enable = () => {
183 | enableAnimations();
184 |
185 | intersectionObserver = new IntersectionObserver(onIntersection, {
186 | root: options.root,
187 | rootMargin: options.rootMargin,
188 | threshold: options.threshold,
189 | });
190 |
191 | elements = getObservedElements();
192 | };
193 |
194 | /**
195 | * Resets instance to provide new settings.
196 | * @param {Object} settings
197 | */
198 | const reset = (settings = {}) => {
199 | clearObserver();
200 |
201 | Array.from(document.querySelectorAll(options.selector))
202 | .forEach(clearAnimation);
203 |
204 | setOptions(settings);
205 | enable();
206 | };
207 |
208 | /**
209 | * Updates observer with new elements to animated.
210 | * Useful for dynamically injected elements.
211 | */
212 | const update = () => {
213 | const newElements = getObservedElements();
214 | elements.push(newElements);
215 | };
216 |
217 | /**
218 | * Init
219 | * @param {Object} settings
220 | * @return {Object} public API
221 | */
222 | const init = (settings = options) => {
223 | setOptions(settings);
224 |
225 | // Early return, when window object is not defined
226 | // e.g. during Server Side Rendering
227 | if (typeof window === 'undefined') {
228 | // eslint-disable-next-line no-console
229 | console.warn(SSR_MESSAGE);
230 |
231 | return {
232 | elements,
233 | disable,
234 | enable,
235 | reset,
236 | update,
237 | };
238 | }
239 |
240 | if (!window.IntersectionObserver) {
241 | disableAnimations();
242 |
243 | throw Error(NOT_SUPPORTED_MESSAGE);
244 | }
245 |
246 | if (!isDisabled()) {
247 | enable();
248 | } else {
249 | disableAnimations();
250 | }
251 |
252 | return {
253 | elements,
254 | disable,
255 | enable,
256 | reset,
257 | update,
258 | };
259 | };
260 |
261 | export default init;
262 |
--------------------------------------------------------------------------------
/src/sal.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Settings
3 | */
4 |
5 | $sal-animation-duration: 0.2s !default;
6 | $sal-animation-delay: 0s !default;
7 | $sal-slide-offset: 20% !default;
8 | $sal-zoom-in-scale: 0.5 !default;
9 | $sal-zoom-out-scale: 1.1 !default;
10 | $sal-flip-rotate: 91deg !default;
11 |
12 | /**
13 | * Easings
14 | */
15 |
16 | $sal-easings: (
17 | linear: linear,
18 | ease: ease,
19 | ease-in: ease-in,
20 | ease-out: ease-out,
21 | ease-in-out: ease-in-out,
22 |
23 | ease-in-cubic: cubic-bezier(.55, .055, .675, .19),
24 | ease-out-cubic: cubic-bezier(.215, .61, .355, 1),
25 | ease-in-out-cubic: cubic-bezier(.645, .045, .355, 1),
26 |
27 | ease-in-circ: cubic-bezier(.6, .04, .98, .335),
28 | ease-out-circ: cubic-bezier(.075, .82, .165, 1),
29 | ease-in-out-circ: cubic-bezier(.785, .135, .15, .86),
30 |
31 | ease-in-expo: cubic-bezier(.95, .05, .795, .035),
32 | ease-out-expo: cubic-bezier(.19, 1, .22, 1),
33 | ease-in-out-expo: cubic-bezier(1, 0, 0, 1),
34 |
35 | ease-in-quad: cubic-bezier(.55, .085, .68, .53),
36 | ease-out-quad: cubic-bezier(.25, .46, .45, .94),
37 | ease-in-out-quad: cubic-bezier(.455, .03, .515, .955),
38 |
39 | ease-in-quart: cubic-bezier(.895, .03, .685, .22),
40 | ease-out-quart: cubic-bezier(.165, .84, .44, 1),
41 | ease-in-out-quart: cubic-bezier(.77, 0, .175, 1),
42 |
43 | ease-in-quint: cubic-bezier(.755, .05, .855, .06),
44 | ease-out-quint: cubic-bezier(.23, 1, .32, 1),
45 | ease-in-out-quint: cubic-bezier(.86, 0, .07, 1),
46 |
47 | ease-in-sine: cubic-bezier(.47, 0, .745, .715),
48 | ease-out-sine: cubic-bezier(.39, .575, .565, 1),
49 | ease-in-out-sine: cubic-bezier(.445, .05, .55, .95),
50 |
51 | ease-in-back: cubic-bezier(.6, -.28, .735, .045),
52 | ease-out-back: cubic-bezier(.175, .885, .32, 1.275),
53 | ease-in-out-back: cubic-bezier(.68, -.55, .265, 1.55)
54 | );
55 |
56 | /**
57 | * Core
58 | */
59 |
60 | [data-sal] {
61 | transition-duration: $sal-animation-duration;
62 | transition-delay: $sal-animation-delay;
63 | transition-duration: var(--sal-duration, $sal-animation-duration);
64 | transition-delay: var(--sal-delay, $sal-animation-delay);
65 | transition-timing-function: var(--sal-easing, map-get($sal-easings, 'ease'));
66 | }
67 |
68 | @for $i from 4 through 40 {
69 | [data-sal][data-sal-duration='#{$i * 50}'] {
70 | transition-duration: #{$i * 0.05}s;
71 | }
72 | }
73 |
74 | @for $i from 1 through 20 {
75 | [data-sal][data-sal-delay='#{$i * 50}'] {
76 | transition-delay: #{$i * 0.05}s;
77 | }
78 | }
79 |
80 | @each $key, $value in $sal-easings {
81 | [data-sal][data-sal-easing='#{$key}'] {
82 | transition-timing-function: $value;
83 | }
84 | }
85 |
86 | /**
87 | * Animations
88 | */
89 |
90 | // Fade
91 | [data-sal|='fade'] {
92 | opacity: 0;
93 | transition-property: opacity;
94 | }
95 |
96 | [data-sal|='fade'].sal-animate,
97 | body.sal-disabled [data-sal|='fade'] {
98 | opacity: 1;
99 | }
100 |
101 | // Slide
102 | [data-sal|='slide'] {
103 | opacity: 0;
104 | transition-property: opacity, transform;
105 | }
106 |
107 | [data-sal='slide-up'] {
108 | transform: translateY($sal-slide-offset);
109 | }
110 |
111 | [data-sal='slide-down'] {
112 | transform: translateY(-$sal-slide-offset);
113 | }
114 |
115 | [data-sal='slide-left'] {
116 | transform: translateX($sal-slide-offset);
117 | }
118 |
119 | [data-sal='slide-right'] {
120 | transform: translateX(-$sal-slide-offset);
121 | }
122 |
123 | [data-sal|='slide'].sal-animate,
124 | body.sal-disabled [data-sal|='slide'] {
125 | opacity: 1;
126 | transform: none;
127 | }
128 |
129 | // Zoom
130 | [data-sal|='zoom'] {
131 | opacity: 0;
132 | transition-property: opacity, transform;
133 | }
134 |
135 | [data-sal='zoom-in'] {
136 | transform: scale($sal-zoom-in-scale);
137 | }
138 |
139 | [data-sal='zoom-out'] {
140 | transform: scale($sal-zoom-out-scale);
141 | }
142 |
143 | [data-sal|='zoom'].sal-animate,
144 | body.sal-disabled [data-sal|='zoom'] {
145 | opacity: 1;
146 | transform: none;
147 | }
148 |
149 | // Flip
150 | [data-sal|='flip'] {
151 | backface-visibility: hidden;
152 | transition-property: transform;
153 | }
154 |
155 | [data-sal='flip-left'] {
156 | transform: perspective(2000px) rotateY(-$sal-flip-rotate);
157 | }
158 |
159 | [data-sal='flip-right'] {
160 | transform: perspective(2000px) rotateY($sal-flip-rotate);
161 | }
162 |
163 | [data-sal='flip-up'] {
164 | transform: perspective(2000px) rotateX(-$sal-flip-rotate);
165 | }
166 |
167 | [data-sal='flip-down'] {
168 | transform: perspective(2000px) rotateX($sal-flip-rotate);
169 | }
170 |
171 | [data-sal|='flip'].sal-animate,
172 | body.sal-disabled [data-sal|='flip'] {
173 | transform: none;
174 | }
175 |
--------------------------------------------------------------------------------
/test/config/browser.js:
--------------------------------------------------------------------------------
1 | // eslint-disable-next-line max-len
2 | // see: https://medium.com/@ivanmontiel/using-that-headless-chrome-youve-been-hearing-about-543a8cc07af5
3 |
4 | const puppeteer = require('puppeteer');
5 | const path = require('path');
6 |
7 | const options = {
8 | rootUrl: `file://${path.resolve(__dirname, '..', 'fixtures')}`,
9 | puppeteer: {
10 | args: ['--no-sandbox'],
11 | },
12 | };
13 |
14 | /**
15 | * This is a thin wrapper so that we use a singleton of
16 | * the browser that puppeteer creates
17 | */
18 | class Browser {
19 | setUp(done) {
20 | const puppeteerOpts = options.puppeteer ? options.puppeteer : {};
21 |
22 | puppeteer.launch(puppeteerOpts).then(async (browser) => {
23 | this.setBrowser(browser);
24 | done();
25 | });
26 | }
27 |
28 | setBrowser(browser) {
29 | this.browser = browser;
30 | const oldNewPage = this.browser.newPage.bind(this.browser);
31 |
32 | this.browser.newPage = async function () {
33 | const page = await oldNewPage();
34 | this.lastPage = page;
35 | return page;
36 | };
37 | }
38 |
39 | run(promise) {
40 | return (done) => {
41 | promise(this.browser, options)
42 | .then(() => done()).catch(done);
43 | };
44 | }
45 | }
46 | /*
47 | * Create a new browser and use a proxy to pass
48 | * any puppeteer calls to the inner browser
49 | */
50 | module.exports = new Proxy(new Browser(), {
51 | get: (target, name) => (
52 | (name in target) ? target[name].bind(target) : target.browser[name]
53 | ),
54 | });
55 |
--------------------------------------------------------------------------------
/test/fixtures/default.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Sal - Default settings
5 |
6 |
7 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
44 |
45 |
46 |
--------------------------------------------------------------------------------
/test/fixtures/disabled.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Sal - Disabled
5 |
6 |
7 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
46 |
47 |
48 |
--------------------------------------------------------------------------------
/test/fixtures/repeat-once-attr.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Sal - Repeat animations
5 |
6 |
7 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
44 |
45 |
46 |
--------------------------------------------------------------------------------
/test/fixtures/repeat.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Sal - Repeat animations
5 |
6 |
7 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
46 |
47 |
48 |
--------------------------------------------------------------------------------
/test/fixtures/reset.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Sal - Reset
5 |
6 |
7 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
40 |
41 |
42 |
--------------------------------------------------------------------------------
/test/fixtures/update.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Sal - Reset
5 |
6 |
7 |
26 |
27 |
28 |
33 |
34 |
35 |
38 |
39 |
40 |
--------------------------------------------------------------------------------
/test/index.test.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable max-len */
2 |
3 | import sal from '../src/sal';
4 |
5 | const browser = require('./config/browser');
6 |
7 | describe('Sal', () => {
8 | const MockIntersectionObserver = jest.fn();
9 |
10 | Object.defineProperty(window, 'IntersectionObserver', {
11 | writable: true,
12 | value: MockIntersectionObserver,
13 | });
14 |
15 | describe('unit', () => {
16 | it('should be defined', () => {
17 | expect(sal).toBeDefined();
18 | expect(sal).toBeInstanceOf(Function);
19 | });
20 |
21 | it('returns public methods', () => {
22 | const instance = sal();
23 |
24 | expect(Object.keys(instance)).toEqual([
25 | 'elements',
26 | 'disable',
27 | 'enable',
28 | 'reset',
29 | 'update',
30 | ]);
31 | });
32 |
33 | it('passes all options to IntersectionObserver', () => {
34 | const dummyRoot = document.createElement('div');
35 | const instance = sal({
36 | root: dummyRoot,
37 | rootMargin: '50% 50%',
38 | threshold: 1,
39 | });
40 |
41 | expect(instance).toBeDefined();
42 | expect(MockIntersectionObserver).toHaveBeenCalledWith(expect.any(Function), {
43 | root: dummyRoot,
44 | rootMargin: '50% 50%',
45 | threshold: 1,
46 | });
47 | });
48 | });
49 |
50 | describe('browser', () => {
51 | const SELECTOR = '.item';
52 | const FIRST_ITEM_SELECTOR = '.item--1';
53 | const FIFTH_ITEM_SELECTOR = '.item--5';
54 |
55 | beforeEach((done) => {
56 | browser.setUp(done);
57 | });
58 |
59 | afterEach(() => {
60 | browser.close();
61 | });
62 |
63 | it('should return elements after init', browser.run(async (engine, opts) => {
64 | const page = await engine.newPage();
65 | await page.goto(`${opts.rootUrl}/default.html`);
66 |
67 | await page.waitForSelector(SELECTOR);
68 |
69 | const elementsLength = await page.$$eval(SELECTOR, (elements) => (
70 | elements.length
71 | ));
72 |
73 | const salElementsLength = await page.evaluate(() => (
74 | window.scrollAnimations.elements.length
75 | ));
76 |
77 | expect(elementsLength).toBe(salElementsLength);
78 | }));
79 |
80 | it('should animate first element', browser.run(async (engine, opts) => {
81 | const page = await engine.newPage();
82 | await page.goto(`${opts.rootUrl}/default.html`);
83 |
84 | await page.waitForSelector(SELECTOR);
85 |
86 | const firstIsAnimated = await page.$eval(FIRST_ITEM_SELECTOR, (el) => (
87 | new Promise((resolve) => {
88 | setTimeout(() => (
89 | resolve(el.classList.contains('sal-animate'))
90 | ), 100);
91 | })
92 | ));
93 |
94 | expect(firstIsAnimated).toBeTruthy();
95 | }));
96 |
97 | it('should animate 5th element', browser.run(async (engine, opts) => {
98 | const page = await engine.newPage();
99 | await page.goto(`${opts.rootUrl}/default.html`);
100 |
101 | await page.waitForSelector(SELECTOR);
102 |
103 | const fifthIsAnimated = await page.evaluate((selector) => {
104 | const fifthItem = document.querySelector(selector);
105 | const posY = fifthItem.getBoundingClientRect().top + window.scrollY;
106 | window.scrollBy(0, posY);
107 |
108 | return new Promise((resolve) => {
109 | setTimeout(() => {
110 | resolve(fifthItem.classList.contains('sal-animate'));
111 | }, 100);
112 | });
113 | }, FIFTH_ITEM_SELECTOR);
114 |
115 | expect(fifthIsAnimated).toBeTruthy();
116 | }));
117 |
118 | it('should disable animations', browser.run(async (engine, opts) => {
119 | const page = await engine.newPage();
120 | await page.goto(`${opts.rootUrl}/default.html`);
121 |
122 | await page.waitForSelector(SELECTOR);
123 |
124 | const fifthIsAnimated = await page.evaluate((selector) => {
125 | window.scrollAnimations.disable();
126 | const fifthItem = document.querySelector(selector);
127 | const posY = fifthItem.getBoundingClientRect().top + window.scrollY;
128 | window.scrollBy(0, posY);
129 |
130 | return new Promise((resolve) => {
131 | setTimeout(() => {
132 | resolve(fifthItem.classList.contains('sal-animate'));
133 | }, 100);
134 | });
135 | }, FIFTH_ITEM_SELECTOR);
136 |
137 | const bodyHasDisabledClass = await page.evaluate(() => (
138 | document.body.classList.contains('sal-disabled')
139 | ));
140 |
141 | expect(fifthIsAnimated).toBeFalsy();
142 | expect(bodyHasDisabledClass).toBeTruthy();
143 | }));
144 |
145 | it('should enable animations after disabled', browser.run(async (engine, opts) => {
146 | const page = await engine.newPage();
147 | await page.goto(`${opts.rootUrl}/default.html`);
148 |
149 | await page.waitForSelector(SELECTOR);
150 |
151 | const fifthIsAnimated = await page.evaluate((selector) => {
152 | const fifthItem = document.querySelector(selector);
153 |
154 | window.scrollAnimations.disable();
155 | window.scrollAnimations.enable();
156 |
157 | const fifthPosY = fifthItem.getBoundingClientRect().top + window.scrollY;
158 | window.scrollBy(0, fifthPosY);
159 |
160 | return new Promise((resolve) => {
161 | setTimeout(() => {
162 | resolve(fifthItem.classList.contains('sal-animate'));
163 | }, 100);
164 | });
165 | }, FIFTH_ITEM_SELECTOR);
166 |
167 | const bodyHasDisabledClass = await page.evaluate(() => (
168 | document.body.classList.contains('sal-disabled')
169 | ));
170 |
171 | expect(fifthIsAnimated).toBeTruthy();
172 | expect(bodyHasDisabledClass).toBeFalsy();
173 | }));
174 |
175 | it('should reverse animation on leave', browser.run(async (engine, opts) => {
176 | const page = await engine.newPage();
177 | await page.goto(`${opts.rootUrl}/repeat.html`);
178 |
179 | await page.waitForSelector(SELECTOR);
180 |
181 | const firstIsAnimated = await page.evaluate((selector) => {
182 | const firstItem = document.querySelector(selector);
183 |
184 | window.scrollBy(0, window.innerHeight);
185 |
186 | return new Promise((resolve) => {
187 | setTimeout(() => {
188 | resolve(firstItem.classList.contains('sal-animate'));
189 | }, 100);
190 | });
191 | }, FIRST_ITEM_SELECTOR);
192 |
193 | expect(firstIsAnimated).toBeFalsy();
194 | }));
195 |
196 | describe('[data-sal-repeat]', () => {
197 | it('should reverse animation on leave', browser.run(async (engine, opts) => {
198 | const page = await engine.newPage();
199 | await page.goto(`${opts.rootUrl}/repeat-once-attr.html`);
200 |
201 | await page.waitForSelector(SELECTOR);
202 |
203 | const firstIsAnimated = await page.evaluate((selector) => {
204 | const firstItem = document.querySelector(selector);
205 |
206 | window.scrollBy(0, window.innerHeight);
207 |
208 | return new Promise((resolve) => {
209 | setTimeout(() => {
210 | resolve(firstItem.classList.contains('sal-animate'));
211 | }, 100);
212 | });
213 | }, FIRST_ITEM_SELECTOR);
214 |
215 | expect(firstIsAnimated).toBeFalsy();
216 | }));
217 | });
218 |
219 | describe('[data-sal-once]', () => {
220 | it('should not reverse animation on leave', browser.run(async (engine, opts) => {
221 | const page = await engine.newPage();
222 | await page.goto(`${opts.rootUrl}/repeat-once-attr.html`);
223 |
224 | await page.waitForSelector(SELECTOR);
225 |
226 | await page.evaluate(() => {
227 | window.scrollAnimations.reset({
228 | once: false,
229 | });
230 | });
231 |
232 | await page.evaluate((selector) => {
233 | const fifthItem = document.querySelector(selector);
234 |
235 | const posY = fifthItem.getBoundingClientRect().top + window.scrollY;
236 | window.scrollBy(0, posY);
237 | }, FIFTH_ITEM_SELECTOR);
238 |
239 | await page.waitForTimeout(100);
240 |
241 | const [firstIsAnimated, fifthIsAnimated] = await page.evaluate((firstSelector, fifthSelector) => {
242 | const firstItem = document.querySelector(firstSelector);
243 | const fifthItem = document.querySelector(fifthSelector);
244 |
245 | window.scrollBy(0, window.innerHeight);
246 |
247 | return new Promise((resolve) => {
248 | setTimeout(() => {
249 | resolve([
250 | firstItem.classList.contains('sal-animate'),
251 | fifthItem.classList.contains('sal-animate'),
252 | ]);
253 | }, 100);
254 | });
255 | }, FIRST_ITEM_SELECTOR, FIFTH_ITEM_SELECTOR);
256 |
257 | expect(firstIsAnimated).toBeFalsy();
258 | expect(fifthIsAnimated).toBeTruthy();
259 | }));
260 | });
261 |
262 | it('should not launch animation when disabled', browser.run(async (engine, opts) => {
263 | const page = await engine.newPage();
264 | await page.goto(`${opts.rootUrl}/disabled.html`);
265 |
266 | await page.waitForSelector(SELECTOR);
267 |
268 | const firstIsAnimated = await page.$eval(SELECTOR, (el) => (
269 | el.classList.contains('sal-animate')
270 | ));
271 |
272 | const bodyHasDisabledClass = await page.evaluate(() => (
273 | document.body.classList.contains('sal-disabled')
274 | ));
275 |
276 | expect(firstIsAnimated).toBeFalsy();
277 | expect(bodyHasDisabledClass).toBeTruthy();
278 | }));
279 |
280 | describe('events', () => {
281 | it('should fire enter event', browser.run(async (engine, opts) => {
282 | const page = await engine.newPage();
283 | await page.goto(`${opts.rootUrl}/default.html`);
284 |
285 | await page.waitForSelector(SELECTOR);
286 |
287 | const eventFiredOnFifth = await page.evaluate((selector) => {
288 | const fifthItem = document.querySelector(selector);
289 | const promise = new Promise((resolve) => {
290 | fifthItem.addEventListener('sal:in', () => {
291 | resolve(true);
292 | });
293 | });
294 |
295 | const posY = fifthItem.getBoundingClientRect().top + window.scrollY;
296 | window.scrollBy(0, posY);
297 |
298 | return promise;
299 | }, FIFTH_ITEM_SELECTOR);
300 |
301 | expect(eventFiredOnFifth).toBeTruthy();
302 | }));
303 |
304 | it('should fire exit event', browser.run(async (engine, opts) => {
305 | const page = await engine.newPage();
306 | await page.goto(`${opts.rootUrl}/repeat.html`);
307 |
308 | await page.waitForSelector(SELECTOR);
309 |
310 | const eventFiredAtLeastOnce = await page.evaluate(() => {
311 | const promise = new Promise((resolve) => {
312 | document.addEventListener('sal:out', () => {
313 | resolve(true);
314 | });
315 | });
316 |
317 | window.scrollBy(0, document.body.scrollHeight);
318 |
319 | return promise;
320 | });
321 |
322 | expect(eventFiredAtLeastOnce).toBeTruthy();
323 | }));
324 | });
325 |
326 | describe('reset', () => {
327 | it('should animate only selected elements', browser.run(async (engine, opts) => {
328 | const page = await engine.newPage();
329 | await page.goto(`${opts.rootUrl}/reset.html`);
330 |
331 | await page.waitForSelector(SELECTOR);
332 |
333 | await page.waitForTimeout(100);
334 |
335 | await page.evaluate(async () => {
336 | const animated = Array.from(document.querySelectorAll('.item:not(.after-reset)'));
337 | window.scrollTo(0, animated[1].offsetTop);
338 | });
339 |
340 | await page.waitForTimeout(100);
341 |
342 | await page.evaluate(() => {
343 | const animated = Array.from(document.querySelectorAll('.item:not(.after-reset)'));
344 | window.scrollTo(0, animated[2].offsetTop);
345 | });
346 |
347 | await page.waitForTimeout(100);
348 |
349 | const animatedNumber = await page.$$eval('.sal-animate:not(.after-reset)', (items) => (
350 | items.length
351 | ));
352 |
353 | expect(animatedNumber).toBe(3);
354 | }));
355 |
356 | describe('when settings are changed', () => {
357 | it('should apply new settings', browser.run(async (engine, opts) => {
358 | const page = await engine.newPage();
359 | await page.goto(`${opts.rootUrl}/reset.html`);
360 |
361 | await page.waitForSelector(SELECTOR);
362 |
363 | await page.evaluate(() => {
364 | window.scrollAnimations.reset({
365 | selector: '[data-sal].after-reset',
366 | });
367 | });
368 |
369 | await page.evaluate(() => {
370 | const animated = Array.from(document.querySelectorAll('.item.after-reset'));
371 | window.scrollTo(0, animated[0].offsetTop);
372 | });
373 |
374 | await page.waitForTimeout(100);
375 |
376 | await page.evaluate(() => {
377 | const animated = Array.from(document.querySelectorAll('.item.after-reset'));
378 | window.scrollTo(0, animated[1].offsetTop);
379 | });
380 |
381 | await page.waitForTimeout(100);
382 |
383 | const animatedNumber = await page.$$eval('.after-reset.sal-animate', (items) => (
384 | items.length
385 | ));
386 |
387 | expect(animatedNumber).toBe(2);
388 | }));
389 | });
390 | });
391 |
392 | describe('update', () => {
393 | it('should animated dynamically added elements', browser.run(async (engine, opts) => {
394 | const page = await engine.newPage();
395 | await page.goto(`${opts.rootUrl}/update.html`);
396 |
397 | await page.waitForSelector(SELECTOR);
398 |
399 | await page.evaluate(() => {
400 | const container = document.getElementById('container');
401 | container.innerHTML += `
402 |
403 |
404 | `;
405 |
406 | window.scrollAnimations.update();
407 | });
408 |
409 | const fifthIsAnimated = await page.evaluate((selector) => {
410 | const fifthItem = document.querySelector(selector);
411 | const posY = fifthItem.getBoundingClientRect().top + window.scrollY;
412 | window.scrollBy(0, posY);
413 |
414 | return new Promise((resolve) => {
415 | setTimeout(() => {
416 | resolve(fifthItem.classList.contains('sal-animate'));
417 | }, 100);
418 | });
419 | }, FIFTH_ITEM_SELECTOR);
420 |
421 | expect(fifthIsAnimated).toBeTruthy();
422 | }));
423 | });
424 | });
425 | });
426 |
427 | /* eslint-enable */
428 |
--------------------------------------------------------------------------------
/test/mocks/styleMock.js:
--------------------------------------------------------------------------------
1 | module.exports = {};
2 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 | const MiniCssExtractPlugin = require('mini-css-extract-plugin');
3 | const HtmlWebpackPlugin = require('html-webpack-plugin');
4 | const SizePlugin = require('size-plugin');
5 |
6 | module.exports = {
7 | mode: 'production',
8 | entry: './src/sal.js',
9 | devtool: 'source-map',
10 | output: {
11 | path: path.join(__dirname, 'dist'),
12 | publicPath: 'dist/',
13 | filename: 'sal.js',
14 | library: 'sal',
15 | libraryTarget: 'umd',
16 | libraryExport: 'default',
17 | sourceMapFilename: '[file].map',
18 | globalObject: 'this',
19 | },
20 | module: {
21 | rules: [
22 | {
23 | test: /\.js$/,
24 | exclude: /node_modules/,
25 | use: 'babel-loader',
26 | }, {
27 | test: /\.scss$/,
28 | use: [
29 | MiniCssExtractPlugin.loader,
30 | 'css-loader?sourceMap',
31 | 'postcss-loader',
32 | 'sass-loader',
33 | ],
34 | },
35 | {
36 | test: /\.pug$/,
37 | use: 'pug-loader',
38 | },
39 | ],
40 | },
41 | plugins: [
42 | new MiniCssExtractPlugin({
43 | filename: 'sal.css',
44 | }),
45 | new HtmlWebpackPlugin({
46 | template: './website/template/index.pug',
47 | filename: path.resolve(__dirname, './index.html'),
48 | inject: false,
49 | }),
50 | new SizePlugin({
51 | writeFile: false,
52 | }),
53 | ],
54 | };
55 |
--------------------------------------------------------------------------------
/website/images/android-chrome-192x192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mciastek/sal/789ac41161cffee81365c94142c1a955c5118cc4/website/images/android-chrome-192x192.png
--------------------------------------------------------------------------------
/website/images/android-chrome-512x512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mciastek/sal/789ac41161cffee81365c94142c1a955c5118cc4/website/images/android-chrome-512x512.png
--------------------------------------------------------------------------------
/website/images/apple-touch-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mciastek/sal/789ac41161cffee81365c94142c1a955c5118cc4/website/images/apple-touch-icon.png
--------------------------------------------------------------------------------
/website/images/favicon-16x16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mciastek/sal/789ac41161cffee81365c94142c1a955c5118cc4/website/images/favicon-16x16.png
--------------------------------------------------------------------------------
/website/images/favicon-32x32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mciastek/sal/789ac41161cffee81365c94142c1a955c5118cc4/website/images/favicon-32x32.png
--------------------------------------------------------------------------------
/website/images/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mciastek/sal/789ac41161cffee81365c94142c1a955c5118cc4/website/images/favicon.ico
--------------------------------------------------------------------------------
/website/images/logo.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/website/images/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "Sal",
3 | "short_name": "Sal",
4 | "icons": [
5 | {
6 | "src": "/android-chrome-192x192.png",
7 | "sizes": "192x192",
8 | "type": "image/png"
9 | },
10 | {
11 | "src": "/android-chrome-512x512.png",
12 | "sizes": "512x512",
13 | "type": "image/png"
14 | }
15 | ],
16 | "theme_color": "#ffffff",
17 | "background_color": "#ffffff",
18 | "display": "standalone"
19 | }
20 |
--------------------------------------------------------------------------------
/website/styles.css:
--------------------------------------------------------------------------------
1 | :root {
2 | --primary: #fff;
3 | --secondary: #f7f7f7;
4 | --accent: #ec45fe;
5 | --text: #34083a;
6 | --text-secondary: #756c75;
7 |
8 | --blue: #7ff2ff;
9 | --green: #6dffaf;
10 | --red: #fb163e;
11 | --violet: #c88eff;
12 | --yellow: #ffe16b;
13 | --pink: #ff7f9f;
14 | }
15 |
16 | body {
17 | background-color: var(--primary);
18 | color: var(--text);
19 | font-family: 'Josefin Sans', sans-serif;
20 | height: 1500px;
21 | }
22 |
23 | *,
24 | *::before,
25 | *::after {
26 | box-sizing: border-box;
27 | }
28 |
29 | main {
30 | overflow: hidden;
31 | background-color: var(--secondary);
32 | padding-left: 16px;
33 | padding-right: 16px;
34 | }
35 |
36 | .header {
37 | position: fixed;
38 | top: 0;
39 | right: 0;
40 | left: 0;
41 | z-index: 2;
42 | display: flex;
43 | align-items: center;
44 | height: 80px;
45 | padding: 0 16px;
46 | background-color: var(--secondary);
47 | }
48 |
49 | .header__logo {
50 | width: 87px;
51 | height: 49px;
52 | }
53 |
54 | .header__logo + .header__title {
55 | margin-left: 8px;
56 | }
57 |
58 | .header__title {
59 | font-size: 30px;
60 | margin: 0;
61 | margin-bottom: -6px;
62 | }
63 |
64 | .header__subtitle {
65 | display: none;
66 | color: var(--text-secondary);
67 | }
68 |
69 | .header__subtitle+ .header__button {
70 | margin-left: auto;
71 | }
72 |
73 | .header__button {
74 | display: inline-block;
75 | height: 32px;
76 | padding: 0 16px;
77 | line-height: 34px;
78 | border-radius: 16px;
79 | color: #fff;
80 | background-color: var(--violet);
81 | text-decoration: none;
82 | transition: background-color 0.2s;
83 | }
84 |
85 | .header__button:hover {
86 | background-color: var(--accent);
87 | }
88 |
89 | .content {
90 | padding-top: 112px;
91 | padding-bottom: 32px;
92 | background-color: #fff;
93 | }
94 |
95 | .footer {
96 | display: flex;
97 | align-items: center;
98 | justify-content: center;
99 | height: 80px;
100 | padding: 0 16px;
101 | background-color: var(--secondary);
102 | color: var(--text-secondary);
103 | }
104 |
105 | .footer__link {
106 | color: var(--violet);
107 | text-decoration: none;
108 | transition: color 0.2s;
109 | }
110 |
111 | .footer__link:hover {
112 | color: var(--accent);
113 | }
114 |
115 | .row {
116 | display: flex;
117 | flex-wrap: wrap;
118 | justify-content: space-between;
119 | padding: 0 32px;
120 | }
121 |
122 | .row + .row {
123 | margin-top: 96px;
124 | }
125 |
126 | .column {
127 | display: flex;
128 | justify-content: space-between;
129 | align-items: center;
130 | flex: 0 0 100%;
131 | max-width: 100%;
132 | }
133 |
134 | .column + .column {
135 | margin-top: 16px;
136 | }
137 |
138 | .row:nth-child(2n) .column {
139 | justify-content: space-around;
140 | }
141 |
142 | .shape.cross.pink {
143 | stroke: var(--pink);
144 | }
145 |
146 | .shape.cross.blue {
147 | stroke: var(--blue);
148 | }
149 |
150 | .shape.cross.green {
151 | stroke: var(--green);
152 | }
153 |
154 | .shape.cross.red {
155 | stroke: var(--red);
156 | }
157 |
158 | .shape.cross.violet {
159 | stroke: var(--violet);
160 | }
161 |
162 | .shape.cross.yellow {
163 | stroke: var(--yellow);
164 | }
165 |
166 | .shape.pink {
167 | fill: var(--pink);
168 | }
169 |
170 | .shape.blue {
171 | fill: var(--blue);
172 | }
173 |
174 | .shape.green {
175 | fill: var(--green);
176 | }
177 |
178 | .shape.red {
179 | fill: var(--red);
180 | }
181 |
182 | .shape.violet {
183 | fill: var(--violet);
184 | }
185 |
186 | .shape.yellow {
187 | fill: var(--yellow);
188 | }
189 |
190 | @media only screen and (min-width: 768px) {
191 | main {
192 | background-color: initial;
193 | padding: 0;
194 | }
195 |
196 | .header {
197 | top: 50%;
198 | right: auto;
199 | left: 50%;
200 | display: block;
201 | height: auto;
202 | transform: translate(-50%, -50%);
203 | text-align: center;
204 | background-color: transparent;
205 | }
206 |
207 | .header__logo {
208 | width: 124px;
209 | height: 70px;
210 | }
211 |
212 | .header__logo + .header__title {
213 | margin-top: 16px;
214 | margin-left: 0;
215 | }
216 |
217 | .header__title {
218 | margin: 0;
219 | }
220 |
221 | .header__title + .header__subtitle {
222 | margin: 8px 0 0;
223 | }
224 |
225 | .header__subtitle {
226 | display: block;
227 | }
228 |
229 | .header__subtitle + .header__button {
230 | margin-top: 32px;
231 | }
232 |
233 | .content {
234 | padding-top: 32px;
235 | }
236 |
237 | .column {
238 | flex: 0 0 50%;
239 | max-width: 50%;
240 | }
241 |
242 | .column:first-of-type {
243 | padding-right: 144px;
244 | }
245 |
246 | .column + .column {
247 | margin-top: 0;
248 | padding-left: 144px;
249 | }
250 | }
251 |
--------------------------------------------------------------------------------
/website/template/index.pug:
--------------------------------------------------------------------------------
1 | include shape.pug
2 |
3 | -
4 | var shapes = [
5 | 'cross',
6 | 'triangle',
7 | 'circle',
8 | 'hexagon',
9 | 'pentagon',
10 | 'diamond',
11 | 'star',
12 | 'star-2',
13 | 'rect'
14 | ]
15 | var animations = ['slide-up', 'zoom-in', 'fade-in']
16 | var colors = [
17 | 'blue',
18 | 'green',
19 | 'violet',
20 | 'yellow',
21 | 'pink'
22 | ]
23 | var delay = 300
24 | var columnsInRow = 2
25 | var minShapesInColumn = 1
26 | var maxShapesInColumn = 2
27 | var shapesNum = 100
28 |
29 | var getRandomProp = function(props) {
30 | return props[~~(Math.random() * props.length)]
31 | }
32 |
33 | var generateShapes = function() {
34 | var collection = []
35 |
36 | for (var i = 0; i < shapesNum; i++) {
37 | collection.push({
38 | shape: getRandomProp(shapes),
39 | animation: getRandomProp(animations),
40 | color: getRandomProp(colors),
41 | delay: Math.round(((Math.random() * delay)) / 50) * 50
42 | })
43 | }
44 |
45 | return collection
46 | }
47 |
48 | var generatedShapes = generateShapes()
49 |
50 | var generateColumns = function() {
51 | var shapes = generateShapes()
52 | var collection = []
53 |
54 | while (shapes.length) {
55 | var removeNum = ~~(Math.random() * maxShapesInColumn) + minShapesInColumn
56 | var column = []
57 |
58 | for (var i = 0; i < removeNum; i++) {
59 | var shape = shapes.pop()
60 |
61 | if (shape) {
62 | column.push(shape)
63 | }
64 | }
65 |
66 | if (column.length) {
67 | collection.push(column)
68 | }
69 | }
70 |
71 | return collection
72 | }
73 |
74 | var generateRows = function() {
75 | var columns = generateColumns()
76 | var rowsNum = columns.length / columnsInRow
77 | var collection = []
78 |
79 | for (var i = 0; i < rowsNum; i++) {
80 | var row = []
81 |
82 | for (var j = 0; j < columnsInRow; j++) {
83 | row.push(columns[i + j])
84 | }
85 |
86 | if (row.length) {
87 | collection.push(row)
88 | }
89 | }
90 |
91 | return collection
92 | }
93 |
94 | -
95 | var keywords = [
96 | 'scroll',
97 | 'scrolling',
98 | 'animate',
99 | 'animation',
100 | 'css',
101 | 'javascript',
102 | 'performant',
103 | 'performance',
104 | 'intersection observer',
105 | 'cutting edge',
106 | 'sal',
107 | ].join(', ')
108 |
109 | head
110 | meta(charset='UTF-8')
111 | title Sal - Lightweight scroll animation library
112 | meta(name='viewport', content='width=device-width, initial-scale=1')
113 | meta(
114 | name='keywords',
115 | content=keywords
116 | )
117 | meta(name='description', content='Performance focused, lightweight JavaScript scroll animation library')
118 | link(rel='apple-touch-icon', sizes='180x180', href='website/images/apple-touch-icon.png')
119 | link(rel='icon', type='image/png', sizes='32x32', href='website/images/favicon-32x32.png')
120 | link(rel='icon', type='image/png', sizes='16x16', href='website/images/favicon-16x16.png')
121 | link(rel='manifest', href='website/images/manifest.json')
122 | meta(name='theme-color', content='#ffffff')
123 | link(href='https://fonts.googleapis.com/css?family=Josefin+Sans:400,700', rel='stylesheet')
124 | link(rel='stylesheet', href='https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css')
125 | link(rel='stylesheet', href='dist/sal.css')
126 | link(rel='stylesheet', href='website/styles.css')
127 | main
128 | header.header
129 | img.header__logo(src='website/images/logo.svg' alt='')
130 | h1.header__title Sal.js
131 | p.header__subtitle
132 | | Lightweight scroll animation library
133 | a.header__button(href='https://github.com/mciastek/sal') Github / Docs
134 | section.content
135 | - var rows = generateRows()
136 | each row in rows
137 | .row
138 | each column in row
139 | .column
140 | each shape in column
141 | +shape(shape.shape, shape.animation, shape.color, shape.delay)
142 |
143 | footer.footer
144 | small
145 | ='Created with ❤️by '
146 | a.footer__link(href='https://github.com/mciastek' target='_blank' rel='noopener')
147 | | Mirek Ciastek
148 | script(src='dist/sal.js')
149 | script.
150 | sal({
151 | once: false
152 | });
153 |
--------------------------------------------------------------------------------
/website/template/shape.pug:
--------------------------------------------------------------------------------
1 | mixin shape(name, animation, color = 'blue', delay = 0)
2 | case name
3 | when 'cross'
4 | svg.shape(class=color, data-sal=animation, data-sal-delay=delay, xmlns='http://www.w3.org/2000/svg', width='70', height='70', viewbox='0 0 70 70')
5 | rect(x='28', width='14', height='70', rx='7', ry='7')
6 | rect(x='28', width='14', height='70', rx='7', ry='7', transform='translate(0 70) rotate(-90)')
7 |
8 | when 'triangle'
9 | svg.shape(class=color, data-sal=animation, data-sal-delay=delay, xmlns='http://www.w3.org/2000/svg', width='72.74', height='64.06', viewbox='0 0 72.74 64.06')
10 | path(d='M32.91,2a4,4,0,0,1,6.93,0L54,26.56l4,6.93L72.2,58.06a4,4,0,0,1-3.46,6H4a4,4,0,0,1-3.46-6L14.72,33.49l4-6.93Z')
11 |
12 | when 'circle'
13 | svg.shape(class=color, data-sal=animation, data-sal-delay=delay, xmlns='http://www.w3.org/2000/svg', width='60', height='60', viewbox='0 0 60 60')
14 | circle(cx='30', cy='30', r='30')
15 |
16 | when 'hexagon'
17 | svg.shape(class=color, data-sal=animation, data-sal-delay=delay, xmlns='http://www.w3.org/2000/svg', width='67.65', height='60.62', viewbox='0 0 67.65 60.62')
18 | path(d='M53.33,3.46a7.69,7.69,0,0,0-6-3.46h-27a7.69,7.69,0,0,0-6,3.46L.83,26.85a7.69,7.69,0,0,0,0,6.93l13.5,23.38a7.69,7.69,0,0,0,6,3.46h27a7.69,7.69,0,0,0,6-3.46l13.5-23.38a7.69,7.69,0,0,0,0-6.93Z')
19 |
20 | when 'pentagon'
21 | svg.shape(class=color, data-sal=animation, data-sal-delay=delay, xmlns='http://www.w3.org/2000/svg', width='68.57', height='65.75', viewbox='0 0 68.57 65.75')
22 | path(d='M37.52,1A5.88,5.88,0,0,0,31,1L2.23,21.91a5.88,5.88,0,0,0-2,6.16l11,33.88a5.88,5.88,0,0,0,5.24,3.8H52.1a5.88,5.88,0,0,0,5.24-3.8l11-33.88a5.88,5.88,0,0,0-2-6.16Z')
23 |
24 | when 'diamond'
25 | svg.shape(class=color, data-sal=animation, data-sal-delay=delay, xmlns='http://www.w3.org/2000/svg', width='69.11', height='69.11', viewbox='0 0 69.11 69.11')
26 | rect(x='8.94', y='8.94', width='51.22', height='51.22', rx='4', ry='4', transform='translate(-14.31 34.55) rotate(-45)')
27 |
28 | when 'star'
29 | svg.shape(class=color, data-sal=animation, data-sal-delay=delay, xmlns='http://www.w3.org/2000/svg', width='70', height='70', viewbox='0 0 70 70')
30 | path(d='M38.94,2.34l9.52,17.41a4.49,4.49,0,0,0,1.79,1.79l17.41,9.52a4.49,4.49,0,0,1,0,7.89L50.25,48.47a4.49,4.49,0,0,0-1.79,1.79L38.94,67.66a4.49,4.49,0,0,1-7.89,0L21.53,50.25a4.49,4.49,0,0,0-1.79-1.79L2.34,38.94a4.49,4.49,0,0,1,0-7.89l17.41-9.52a4.49,4.49,0,0,0,1.79-1.79L31.06,2.34A4.49,4.49,0,0,1,38.94,2.34Z')
31 |
32 | when 'star-2'
33 | svg.shape(class=color, data-sal=animation, data-sal-delay=delay, xmlns='http://www.w3.org/2000/svg', width='70', height='67.18', viewbox='0 0 70 67.18')
34 | path(d='M40.55,3.45l6,12.21A6.18,6.18,0,0,0,51.23,19L64.7,21a6.18,6.18,0,0,1,3.43,10.55L58.38,41a6.18,6.18,0,0,0-1.78,5.47l2.3,13.42a6.18,6.18,0,0,1-9,6.52L37.88,60.12a6.18,6.18,0,0,0-5.76,0L20.07,66.46a6.18,6.18,0,0,1-9-6.52l2.3-13.42A6.18,6.18,0,0,0,11.62,41l-9.75-9.5A6.18,6.18,0,0,1,5.3,21l13.47-2a6.18,6.18,0,0,0,4.66-3.38l6-12.21A6.18,6.18,0,0,1,40.55,3.45Z')
35 |
36 | when 'rect'
37 | default
38 | svg.shape(class=color, data-sal=animation, data-sal-delay=delay, xmlns='http://www.w3.org/2000/svg', width='60', height='60', viewbox='0 0 60 60')
39 | rect(width='60', height='60', rx='4', ry='4')
40 |
41 |
42 |
43 |
--------------------------------------------------------------------------------
