svelte-aos 0.0.2 → 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/README.md +205 -176
  2. package/dist/AOS.svelte +11 -0
  3. package/dist/AOS.svelte.d.ts +21 -0
  4. package/dist/aos.d.ts +8 -63
  5. package/dist/aos.js +102 -177
  6. package/dist/aos.ts.old +243 -0
  7. package/dist/index.d.ts +2 -1
  8. package/dist/index.js +2 -2
  9. package/dist/styles/base.css +24 -25
  10. package/dist/styles/easings.css +84 -86
  11. package/dist/styles/fade.css +38 -40
  12. package/dist/styles/flip.css +19 -21
  13. package/dist/styles/slide.css +20 -22
  14. package/dist/styles/zoom.css +39 -41
  15. package/dist/utils.d.ts +3 -0
  16. package/dist/utils.js +28 -0
  17. package/package.json +6 -3
package/dist/styles/easings.css CHANGED
@@ -6,92 +6,90 @@
6
6
 
7
7
  @media screen {
8
8
  html:not(.no-js) {
9
- :not(.aos-disabled) {
10
- /* Standard easings */
11
- [data-aos][data-aos-easing='linear'] {
12
- transition-timing-function: linear;
13
- }
14
-
15
- [data-aos][data-aos-easing='ease'] {
16
- transition-timing-function: ease;
17
- }
18
-
19
- [data-aos][data-aos-easing='ease-in'] {
20
- transition-timing-function: ease-in;
21
- }
22
-
23
- [data-aos][data-aos-easing='ease-out'] {
24
- transition-timing-function: ease-out;
25
- }
26
-
27
- [data-aos][data-aos-easing='ease-in-out'] {
28
- transition-timing-function: ease-in-out;
29
- }
30
-
31
- /* Back easings (overshoot) */
32
- [data-aos][data-aos-easing='ease-in-back'] {
33
- transition-timing-function: cubic-bezier(0.6, -0.28, 0.735, 0.045);
34
- }
35
-
36
- [data-aos][data-aos-easing='ease-out-back'] {
37
- transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
38
- }
39
-
40
- [data-aos][data-aos-easing='ease-in-out-back'] {
41
- transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
42
- }
43
-
44
- /* Sine easings (smooth) */
45
- [data-aos][data-aos-easing='ease-in-sine'] {
46
- transition-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
47
- }
48
-
49
- [data-aos][data-aos-easing='ease-out-sine'] {
50
- transition-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
51
- }
52
-
53
- [data-aos][data-aos-easing='ease-in-out-sine'] {
54
- transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
55
- }
56
-
57
- /* Quad easings (moderate acceleration) */
58
- [data-aos][data-aos-easing='ease-in-quad'] {
59
- transition-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
60
- }
61
-
62
- [data-aos][data-aos-easing='ease-out-quad'] {
63
- transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
64
- }
65
-
66
- [data-aos][data-aos-easing='ease-in-out-quad'] {
67
- transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
68
- }
69
-
70
- /* Cubic easings (stronger acceleration) */
71
- [data-aos][data-aos-easing='ease-in-cubic'] {
72
- transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
73
- }
74
-
75
- [data-aos][data-aos-easing='ease-out-cubic'] {
76
- transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
77
- }
78
-
79
- [data-aos][data-aos-easing='ease-in-out-cubic'] {
80
- transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
81
- }
82
-
83
- /* Quart easings (aggressive acceleration) */
84
- [data-aos][data-aos-easing='ease-in-quart'] {
85
- transition-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22);
86
- }
87
-
88
- [data-aos][data-aos-easing='ease-out-quart'] {
89
- transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
90
- }
91
-
92
- [data-aos][data-aos-easing='ease-in-out-quart'] {
93
- transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
94
- }
9
+ /* Standard easings */
10
+ [data-aos][data-aos-easing='linear'] {
11
+ transition-timing-function: linear;
12
+ }
13
+
14
+ [data-aos][data-aos-easing='ease'] {
15
+ transition-timing-function: ease;
16
+ }
17
+
18
+ [data-aos][data-aos-easing='ease-in'] {
19
+ transition-timing-function: ease-in;
20
+ }
21
+
22
+ [data-aos][data-aos-easing='ease-out'] {
23
+ transition-timing-function: ease-out;
24
+ }
25
+
26
+ [data-aos][data-aos-easing='ease-in-out'] {
27
+ transition-timing-function: ease-in-out;
28
+ }
29
+
30
+ /* Back easings (overshoot) */
31
+ [data-aos][data-aos-easing='ease-in-back'] {
32
+ transition-timing-function: cubic-bezier(0.6, -0.28, 0.735, 0.045);
33
+ }
34
+
35
+ [data-aos][data-aos-easing='ease-out-back'] {
36
+ transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
37
+ }
38
+
39
+ [data-aos][data-aos-easing='ease-in-out-back'] {
40
+ transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
41
+ }
42
+
43
+ /* Sine easings (smooth) */
44
+ [data-aos][data-aos-easing='ease-in-sine'] {
45
+ transition-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
46
+ }
47
+
48
+ [data-aos][data-aos-easing='ease-out-sine'] {
49
+ transition-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
50
+ }
51
+
52
+ [data-aos][data-aos-easing='ease-in-out-sine'] {
53
+ transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
54
+ }
55
+
56
+ /* Quad easings (moderate acceleration) */
57
+ [data-aos][data-aos-easing='ease-in-quad'] {
58
+ transition-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
59
+ }
60
+
61
+ [data-aos][data-aos-easing='ease-out-quad'] {
62
+ transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
63
+ }
64
+
65
+ [data-aos][data-aos-easing='ease-in-out-quad'] {
66
+ transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
67
+ }
68
+
69
+ /* Cubic easings (stronger acceleration) */
70
+ [data-aos][data-aos-easing='ease-in-cubic'] {
71
+ transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
72
+ }
73
+
74
+ [data-aos][data-aos-easing='ease-out-cubic'] {
75
+ transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
76
+ }
77
+
78
+ [data-aos][data-aos-easing='ease-in-out-cubic'] {
79
+ transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
80
+ }
81
+
82
+ /* Quart easings (aggressive acceleration) */
83
+ [data-aos][data-aos-easing='ease-in-quart'] {
84
+ transition-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22);
85
+ }
86
+
87
+ [data-aos][data-aos-easing='ease-out-quart'] {
88
+ transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
89
+ }
90
+
91
+ [data-aos][data-aos-easing='ease-in-out-quart'] {
92
+ transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
95
93
  }
96
94
  }
97
95
  }
package/dist/styles/fade.css CHANGED
@@ -6,56 +6,54 @@
6
6
 
7
7
  @media screen {
8
8
  html:not(.no-js) {
9
- :not(.aos-disabled) {
10
- /* Base for all fade animations */
11
- [data-aos^='fade'][data-aos^='fade'] {
12
- opacity: 0;
13
- transition-property: opacity, transform;
14
-
15
- &.aos-animate {
16
- opacity: 1;
17
- transform: none;
18
- }
19
- }
9
+ /* Base for all fade animations */
10
+ [data-aos^='fade'][data-aos^='fade'] {
11
+ opacity: 0;
12
+ transition-property: opacity, transform;
20
13
 
21
- /* Simple fade (no movement) */
22
- [data-aos='fade'] {
23
- transform: translate3d(0, 0, 0);
14
+ &.aos-animate {
15
+ opacity: 1;
16
+ transform: none;
24
17
  }
18
+ }
25
19
 
26
- /* Directional fades */
27
- [data-aos='fade-up'] {
28
- transform: translate3d(0, var(--aos-distance), 0);
29
- }
20
+ /* Simple fade (no movement) */
21
+ [data-aos='fade'] {
22
+ transform: translate3d(0, 0, 0);
23
+ }
30
24
 
31
- [data-aos='fade-down'] {
32
- transform: translate3d(0, calc(-1 * var(--aos-distance)), 0);
33
- }
25
+ /* Directional fades */
26
+ [data-aos='fade-up'] {
27
+ transform: translate3d(0, var(--aos-distance), 0);
28
+ }
34
29
 
35
- [data-aos='fade-left'] {
36
- transform: translate3d(var(--aos-distance), 0, 0);
37
- }
30
+ [data-aos='fade-down'] {
31
+ transform: translate3d(0, calc(-1 * var(--aos-distance)), 0);
32
+ }
38
33
 
39
- [data-aos='fade-right'] {
40
- transform: translate3d(calc(-1 * var(--aos-distance)), 0, 0);
41
- }
34
+ [data-aos='fade-left'] {
35
+ transform: translate3d(var(--aos-distance), 0, 0);
36
+ }
42
37
 
43
- /* Diagonal fades */
44
- [data-aos='fade-up-left'] {
45
- transform: translate3d(var(--aos-distance), var(--aos-distance), 0);
46
- }
38
+ [data-aos='fade-right'] {
39
+ transform: translate3d(calc(-1 * var(--aos-distance)), 0, 0);
40
+ }
47
41
 
48
- [data-aos='fade-up-right'] {
49
- transform: translate3d(calc(-1 * var(--aos-distance)), var(--aos-distance), 0);
50
- }
42
+ /* Diagonal fades */
43
+ [data-aos='fade-up-left'] {
44
+ transform: translate3d(var(--aos-distance), var(--aos-distance), 0);
45
+ }
51
46
 
52
- [data-aos='fade-down-left'] {
53
- transform: translate3d(var(--aos-distance), calc(-1 * var(--aos-distance)), 0);
54
- }
47
+ [data-aos='fade-up-right'] {
48
+ transform: translate3d(calc(-1 * var(--aos-distance)), var(--aos-distance), 0);
49
+ }
55
50
 
56
- [data-aos='fade-down-right'] {
57
- transform: translate3d(calc(-1 * var(--aos-distance)), calc(-1 * var(--aos-distance)), 0);
58
- }
51
+ [data-aos='fade-down-left'] {
52
+ transform: translate3d(var(--aos-distance), calc(-1 * var(--aos-distance)), 0);
53
+ }
54
+
55
+ [data-aos='fade-down-right'] {
56
+ transform: translate3d(calc(-1 * var(--aos-distance)), calc(-1 * var(--aos-distance)), 0);
59
57
  }
60
58
  }
61
59
  }
package/dist/styles/flip.css CHANGED
@@ -6,33 +6,31 @@
6
6
 
7
7
  @media screen {
8
8
  html:not(.no-js) {
9
- :not(.aos-disabled) {
10
- /* Base for all flip animations */
11
- [data-aos^='flip'][data-aos^='flip'] {
12
- backface-visibility: hidden;
13
- transition-property: transform;
9
+ /* Base for all flip animations */
10
+ [data-aos^='flip'][data-aos^='flip'] {
11
+ backface-visibility: hidden;
12
+ transition-property: transform;
14
13
 
15
- &.aos-animate {
16
- transform: perspective(2500px) rotateX(0) rotateY(0);
17
- }
14
+ &.aos-animate {
15
+ transform: perspective(2500px) rotateX(0) rotateY(0);
18
16
  }
17
+ }
19
18
 
20
- /* Flip directions */
21
- [data-aos='flip-up'] {
22
- transform: perspective(2500px) rotateX(-100deg);
23
- }
19
+ /* Flip directions */
20
+ [data-aos='flip-up'] {
21
+ transform: perspective(2500px) rotateX(-100deg);
22
+ }
24
23
 
25
- [data-aos='flip-down'] {
26
- transform: perspective(2500px) rotateX(100deg);
27
- }
24
+ [data-aos='flip-down'] {
25
+ transform: perspective(2500px) rotateX(100deg);
26
+ }
28
27
 
29
- [data-aos='flip-left'] {
30
- transform: perspective(2500px) rotateY(-100deg);
31
- }
28
+ [data-aos='flip-left'] {
29
+ transform: perspective(2500px) rotateY(-100deg);
30
+ }
32
31
 
33
- [data-aos='flip-right'] {
34
- transform: perspective(2500px) rotateY(100deg);
35
- }
32
+ [data-aos='flip-right'] {
33
+ transform: perspective(2500px) rotateY(100deg);
36
34
  }
37
35
  }
38
36
  }
package/dist/styles/slide.css CHANGED
@@ -6,34 +6,32 @@
6
6
 
7
7
  @media screen {
8
8
  html:not(.no-js) {
9
- :not(.aos-disabled) {
10
- /* Base for all slide animations */
11
- [data-aos^='slide'][data-aos^='slide'] {
12
- transition-property: transform;
13
- visibility: hidden;
9
+ /* Base for all slide animations */
10
+ [data-aos^='slide'][data-aos^='slide'] {
11
+ transition-property: transform;
12
+ visibility: hidden;
14
13
 
15
- &.aos-animate {
16
- visibility: visible;
17
- transform: translate3d(0, 0, 0);
18
- }
14
+ &.aos-animate {
15
+ visibility: visible;
16
+ transform: translate3d(0, 0, 0);
19
17
  }
18
+ }
20
19
 
21
- /* Slide directions */
22
- [data-aos='slide-up'] {
23
- transform: translate3d(0, 100%, 0);
24
- }
20
+ /* Slide directions */
21
+ [data-aos='slide-up'] {
22
+ transform: translate3d(0, 100%, 0);
23
+ }
25
24
 
26
- [data-aos='slide-down'] {
27
- transform: translate3d(0, -100%, 0);
28
- }
25
+ [data-aos='slide-down'] {
26
+ transform: translate3d(0, -100%, 0);
27
+ }
29
28
 
30
- [data-aos='slide-left'] {
31
- transform: translate3d(100%, 0, 0);
32
- }
29
+ [data-aos='slide-left'] {
30
+ transform: translate3d(100%, 0, 0);
31
+ }
33
32
 
34
- [data-aos='slide-right'] {
35
- transform: translate3d(-100%, 0, 0);
36
- }
33
+ [data-aos='slide-right'] {
34
+ transform: translate3d(-100%, 0, 0);
37
35
  }
38
36
  }
39
37
  }
package/dist/styles/zoom.css CHANGED
@@ -6,59 +6,57 @@
6
6
 
7
7
  @media screen {
8
8
  html:not(.no-js) {
9
- :not(.aos-disabled) {
10
- /* Base for all zoom animations */
11
- [data-aos^='zoom'][data-aos^='zoom'] {
12
- opacity: 0;
13
- transition-property: opacity, transform;
9
+ /* Base for all zoom animations */
10
+ [data-aos^='zoom'][data-aos^='zoom'] {
11
+ opacity: 0;
12
+ transition-property: opacity, transform;
14
13
 
15
- &.aos-animate {
16
- opacity: 1;
17
- transform: translate3d(0, 0, 0) scale(1);
18
- }
14
+ &.aos-animate {
15
+ opacity: 1;
16
+ transform: translate3d(0, 0, 0) scale(1);
19
17
  }
18
+ }
20
19
 
21
- /* Zoom In */
22
- [data-aos='zoom-in'] {
23
- transform: scale(0.6);
24
- }
20
+ /* Zoom In */
21
+ [data-aos='zoom-in'] {
22
+ transform: scale(0.6);
23
+ }
25
24
 
26
- [data-aos='zoom-in-up'] {
27
- transform: translate3d(0, var(--aos-distance), 0) scale(0.6);
28
- }
25
+ [data-aos='zoom-in-up'] {
26
+ transform: translate3d(0, var(--aos-distance), 0) scale(0.6);
27
+ }
29
28
 
30
- [data-aos='zoom-in-down'] {
31
- transform: translate3d(0, calc(-1 * var(--aos-distance)), 0) scale(0.6);
32
- }
29
+ [data-aos='zoom-in-down'] {
30
+ transform: translate3d(0, calc(-1 * var(--aos-distance)), 0) scale(0.6);
31
+ }
33
32
 
34
- [data-aos='zoom-in-left'] {
35
- transform: translate3d(var(--aos-distance), 0, 0) scale(0.6);
36
- }
33
+ [data-aos='zoom-in-left'] {
34
+ transform: translate3d(var(--aos-distance), 0, 0) scale(0.6);
35
+ }
37
36
 
38
- [data-aos='zoom-in-right'] {
39
- transform: translate3d(calc(-1 * var(--aos-distance)), 0, 0) scale(0.6);
40
- }
37
+ [data-aos='zoom-in-right'] {
38
+ transform: translate3d(calc(-1 * var(--aos-distance)), 0, 0) scale(0.6);
39
+ }
41
40
 
42
- /* Zoom Out */
43
- [data-aos='zoom-out'] {
44
- transform: scale(1.2);
45
- }
41
+ /* Zoom Out */
42
+ [data-aos='zoom-out'] {
43
+ transform: scale(1.2);
44
+ }
46
45
 
47
- [data-aos='zoom-out-up'] {
48
- transform: translate3d(0, var(--aos-distance), 0) scale(1.2);
49
- }
46
+ [data-aos='zoom-out-up'] {
47
+ transform: translate3d(0, var(--aos-distance), 0) scale(1.2);
48
+ }
50
49
 
51
- [data-aos='zoom-out-down'] {
52
- transform: translate3d(0, calc(-1 * var(--aos-distance)), 0) scale(1.2);
53
- }
50
+ [data-aos='zoom-out-down'] {
51
+ transform: translate3d(0, calc(-1 * var(--aos-distance)), 0) scale(1.2);
52
+ }
54
53
 
55
- [data-aos='zoom-out-left'] {
56
- transform: translate3d(var(--aos-distance), 0, 0) scale(1.2);
57
- }
54
+ [data-aos='zoom-out-left'] {
55
+ transform: translate3d(var(--aos-distance), 0, 0) scale(1.2);
56
+ }
58
57
 
59
- [data-aos='zoom-out-right'] {
60
- transform: translate3d(calc(-1 * var(--aos-distance)), 0, 0) scale(1.2);
61
- }
58
+ [data-aos='zoom-out-right'] {
59
+ transform: translate3d(calc(-1 * var(--aos-distance)), 0, 0) scale(1.2);
62
60
  }
63
61
  }
64
62
  }
package/dist/utils.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ import type { AnchorPlacement } from './types.ts';
2
+ export declare function detectDeviceType(): 'mobile' | 'tablet' | 'desktop';
3
+ export declare const computeRootMargin: (anchorPlacement: AnchorPlacement, offset?: number) => string;
package/dist/utils.js ADDED
@@ -0,0 +1,28 @@
1
+ // TODO: Improve this device detection logic
2
+ export function detectDeviceType() {
3
+ if (typeof navigator === 'undefined')
4
+ return 'desktop';
5
+ const ua = navigator.userAgent;
6
+ if (/Mobi|Android/i.test(ua)) {
7
+ return 'mobile';
8
+ }
9
+ else if (/Tablet|iPad/i.test(ua)) {
10
+ return 'tablet';
11
+ }
12
+ else {
13
+ return 'desktop';
14
+ }
15
+ }
16
+ export const computeRootMargin = (anchorPlacement, offset = 0) => {
17
+ // simple handling for common placements; expand if needed
18
+ if (anchorPlacement === 'top-bottom') {
19
+ return `0px 0px -${offset}px 0px`; // trigger when element top hits viewport bottom - offset
20
+ }
21
+ if (anchorPlacement === 'bottom-top') {
22
+ return `-${offset}px 0px 0px 0px`;
23
+ }
24
+ if (anchorPlacement === 'center-center') {
25
+ return `-50% 0px -50% 0px`;
26
+ }
27
+ return `0px 0px 0px 0px`;
28
+ };
package/package.json CHANGED
@@ -1,15 +1,15 @@
1
1
  {
2
2
  "name": "svelte-aos",
3
- "version": "0.0.2",
3
+ "version": "0.1.0",
4
4
  "license": "MIT",
5
- "description": "Animate On Scroll (AOS) library for Svelte applications. Easily add scroll-based animations to your Svelte components with customizable options.",
5
+ "description": "Svelte Animate On Scroll (AOS) library for Svelte applications. Easily add scroll-based animations to your Svelte components with customizable options.",
6
6
  "author": {
7
7
  "email": "rachid@dailycode.dev",
8
8
  "name": "Rachid Boudjelida"
9
9
  },
10
10
  "repository": {
11
11
  "type": "git",
12
- "url": "https://github.com/humanshield-sidepack/svelte-aos"
12
+ "url": "git+https://github.com/humanshield-sidepack/svelte-aos.git"
13
13
  },
14
14
  "bugs": {
15
15
  "url": "https://github.com/humanshield-sidepack/svelte-aos/issues"
@@ -90,6 +90,9 @@
90
90
  "lint-staged": {
91
91
  "*.{js,ts,svelte,css,md,json}": "prettier --write"
92
92
  },
93
+ "dependencies": {
94
+ "shiki": "^3.20.0"
95
+ },
93
96
  "scripts": {
94
97
  "dev": "vite dev",
95
98
  "build": "vite build && npm run prepack",