@castlenine/svelte-aoe 1.1.1 → 1.3.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 (3) hide show
  1. package/README.md +30 -0
  2. package/dist/animations.css +232 -28
  3. package/package.json +2 -2
package/README.md CHANGED
@@ -93,6 +93,36 @@ File: `src/routes/+layout.svelte`
93
93
  - `fade-left-slow`
94
94
  - `fade-down-slow`
95
95
 
96
+ ### Normal speed partial fade
97
+
98
+ Start wih `0.25` opacity
99
+
100
+ - `partial-fade`
101
+ - `partial-fade-up`
102
+ - `partial-fade-right`
103
+ - `partial-fade-left`
104
+ - `partial-fade-down`
105
+
106
+ ### Fast speed partial fade
107
+
108
+ Start wih `0.25` opacity
109
+
110
+ - `partial-fade-fast`
111
+ - `partial-fade-up-fast`
112
+ - `partial-fade-right-fast`
113
+ - `partial-fade-left-fast`
114
+ - `partial-fade-down-fast`
115
+
116
+ ### Slow speed partial fade
117
+
118
+ Start wih `0.25` opacity
119
+
120
+ - `partial-fade-slow`
121
+ - `partial-fade-up-slow`
122
+ - `partial-fade-right-slow`
123
+ - `partial-fade-left-slow`
124
+ - `partial-fade-down-slow`
125
+
96
126
  You can add your own animations by following the same pattern in your CSS.
97
127
 
98
128
  ```css
package/dist/animations.css CHANGED
@@ -6,7 +6,7 @@
6
6
  transform: translateY(45px);
7
7
  transition:
8
8
  transform 600ms,
9
- opacity 900ms;
9
+ opacity ease-in 900ms;
10
10
 
11
11
  &.aoe {
12
12
  transform: translateY(0);
@@ -18,7 +18,7 @@
18
18
  transform: translateX(-45px);
19
19
  transition:
20
20
  transform 600ms,
21
- opacity 900ms;
21
+ opacity ease-in 900ms;
22
22
 
23
23
  &.aoe {
24
24
  transform: translateX(0);
@@ -30,7 +30,7 @@
30
30
  transform: translateY(-45px);
31
31
  transition:
32
32
  transform 600ms,
33
- opacity 900ms;
33
+ opacity ease-in 900ms;
34
34
 
35
35
  &.aoe {
36
36
  transform: translateY(0);
@@ -42,7 +42,7 @@
42
42
  transform: translateX(45px);
43
43
  transition:
44
44
  transform 600ms,
45
- opacity 900ms;
45
+ opacity ease-in 900ms;
46
46
 
47
47
  &.aoe {
48
48
  opacity: 1;
@@ -56,7 +56,7 @@
56
56
  transform: translateY(45px);
57
57
  transition:
58
58
  transform 370ms,
59
- opacity 555ms;
59
+ opacity ease-in 555ms;
60
60
 
61
61
  &.aoe {
62
62
  transform: translateY(0);
@@ -68,7 +68,7 @@
68
68
  transform: translateX(-45px);
69
69
  transition:
70
70
  transform 370ms,
71
- opacity 555ms;
71
+ opacity ease-in 555ms;
72
72
 
73
73
  &.aoe {
74
74
  transform: translateX(0);
@@ -80,7 +80,7 @@
80
80
  transform: translateY(-45px);
81
81
  transition:
82
82
  transform 370ms,
83
- opacity 555ms;
83
+ opacity ease-in 555ms;
84
84
 
85
85
  &.aoe {
86
86
  transform: translateY(0);
@@ -92,7 +92,7 @@
92
92
  transform: translateX(45px);
93
93
  transition:
94
94
  transform 370ms,
95
- opacity 555ms;
95
+ opacity ease-in 555ms;
96
96
 
97
97
  &.aoe {
98
98
  opacity: 1;
@@ -106,7 +106,7 @@
106
106
  transform: translateY(45px);
107
107
  transition:
108
108
  transform 975ms,
109
- opacity 1500ms;
109
+ opacity ease-in 1500ms;
110
110
 
111
111
  &.aoe {
112
112
  transform: translateY(0);
@@ -118,7 +118,7 @@
118
118
  transform: translateX(-45px);
119
119
  transition:
120
120
  transform 975ms,
121
- opacity 1500ms;
121
+ opacity ease-in 1500ms;
122
122
 
123
123
  &.aoe {
124
124
  transform: translateX(0);
@@ -130,7 +130,7 @@
130
130
  transform: translateY(-45px);
131
131
  transition:
132
132
  transform 975ms,
133
- opacity 1500ms;
133
+ opacity ease-in 1500ms;
134
134
 
135
135
  &.aoe {
136
136
  transform: translateY(0);
@@ -142,7 +142,7 @@
142
142
  transform: translateX(45px);
143
143
  transition:
144
144
  transform 975ms,
145
- opacity 1500ms;
145
+ opacity ease-in 1500ms;
146
146
 
147
147
  &.aoe {
148
148
  opacity: 1;
@@ -157,7 +157,7 @@
157
157
  /* normal speed */
158
158
  [data-aoe='fade'] {
159
159
  opacity: 0;
160
- transition: opacity 900ms;
160
+ transition: opacity ease-in 900ms;
161
161
 
162
162
  &.aoe {
163
163
  opacity: 1;
@@ -170,7 +170,7 @@
170
170
  transform: translateY(45px);
171
171
  transition:
172
172
  transform 600ms,
173
- opacity 900ms;
173
+ opacity ease-in 900ms;
174
174
 
175
175
  &.aoe {
176
176
  opacity: 1;
@@ -184,7 +184,7 @@
184
184
  transform: translateX(-45px);
185
185
  transition:
186
186
  transform 600ms,
187
- opacity 900ms;
187
+ opacity ease-in 900ms;
188
188
 
189
189
  &.aoe {
190
190
  opacity: 1;
@@ -198,7 +198,7 @@
198
198
  transform: translateY(-45px);
199
199
  transition:
200
200
  transform 600ms,
201
- opacity 900ms;
201
+ opacity ease-in 900ms;
202
202
 
203
203
  &.aoe {
204
204
  opacity: 1;
@@ -212,7 +212,7 @@
212
212
  transform: translateX(45px);
213
213
  transition:
214
214
  transform 600ms,
215
- opacity 900ms;
215
+ opacity ease-in 900ms;
216
216
 
217
217
  &.aoe {
218
218
  opacity: 1;
@@ -224,7 +224,7 @@
224
224
  /* fast speed */
225
225
  [data-aoe='fade-fast'] {
226
226
  opacity: 0;
227
- transition: opacity 555ms;
227
+ transition: opacity ease-in 555ms;
228
228
 
229
229
  &.aoe {
230
230
  opacity: 1;
@@ -237,7 +237,7 @@
237
237
  transform: translateY(45px);
238
238
  transition:
239
239
  transform 370ms,
240
- opacity 555ms;
240
+ opacity ease-in 555ms;
241
241
 
242
242
  &.aoe {
243
243
  opacity: 1;
@@ -251,7 +251,7 @@
251
251
  transform: translateX(-45px);
252
252
  transition:
253
253
  transform 370ms,
254
- opacity 555ms;
254
+ opacity ease-in 555ms;
255
255
 
256
256
  &.aoe {
257
257
  opacity: 1;
@@ -265,7 +265,7 @@
265
265
  transform: translateY(-45px);
266
266
  transition:
267
267
  transform 370ms,
268
- opacity 555ms;
268
+ opacity ease-in 555ms;
269
269
 
270
270
  &.aoe {
271
271
  opacity: 1;
@@ -279,7 +279,7 @@
279
279
  transform: translateX(45px);
280
280
  transition:
281
281
  transform 370ms,
282
- opacity 555ms;
282
+ opacity ease-in 555ms;
283
283
 
284
284
  &.aoe {
285
285
  opacity: 1;
@@ -291,7 +291,7 @@
291
291
  /* slow speed */
292
292
  [data-aoe='fade-slow'] {
293
293
  opacity: 0;
294
- transition: opacity 1500ms;
294
+ transition: opacity ease-in 1500ms;
295
295
 
296
296
  &.aoe {
297
297
  opacity: 1;
@@ -304,7 +304,7 @@
304
304
  transform: translateY(45px);
305
305
  transition:
306
306
  transform 975ms,
307
- opacity 1500ms;
307
+ opacity ease-in 1500ms;
308
308
 
309
309
  &.aoe {
310
310
  opacity: 1;
@@ -318,7 +318,7 @@
318
318
  transform: translateX(-45px);
319
319
  transition:
320
320
  transform 975ms,
321
- opacity 1500ms;
321
+ opacity ease-in 1500ms;
322
322
 
323
323
  &.aoe {
324
324
  opacity: 1;
@@ -332,7 +332,7 @@
332
332
  transform: translateY(-45px);
333
333
  transition:
334
334
  transform 975ms,
335
- opacity 1500ms;
335
+ opacity ease-in 1500ms;
336
336
 
337
337
  &.aoe {
338
338
  opacity: 1;
@@ -346,7 +346,211 @@
346
346
  transform: translateX(45px);
347
347
  transition:
348
348
  transform 975ms,
349
- opacity 1500ms;
349
+ opacity ease-in 1500ms;
350
+
351
+ &.aoe {
352
+ opacity: 1;
353
+ transform: translateX(0);
354
+ transition-delay: 0s;
355
+ }
356
+ }
357
+
358
+ /* **************************************************** */
359
+ /* partial-fade-[direction] */
360
+
361
+ /* normal speed */
362
+ [data-aoe='partial-fade'] {
363
+ opacity: 0.25;
364
+ transition: opacity ease-in 900ms;
365
+
366
+ &.aoe {
367
+ opacity: 1;
368
+ transition-delay: 0s;
369
+ }
370
+ }
371
+
372
+ [data-aoe='partial-fade-up'] {
373
+ opacity: 0.25;
374
+ transform: translateY(45px);
375
+ transition:
376
+ transform 600ms,
377
+ opacity ease-in 900ms;
378
+
379
+ &.aoe {
380
+ opacity: 1;
381
+ transform: translateY(0);
382
+ transition-delay: 0s;
383
+ }
384
+ }
385
+
386
+ [data-aoe='partial-fade-right'] {
387
+ opacity: 0.25;
388
+ transform: translateX(-45px);
389
+ transition:
390
+ transform 600ms,
391
+ opacity ease-in 900ms;
392
+
393
+ &.aoe {
394
+ opacity: 1;
395
+ transform: translateX(0);
396
+ transition-delay: 0s;
397
+ }
398
+ }
399
+
400
+ [data-aoe='partial-fade-down'] {
401
+ opacity: 0.25;
402
+ transform: translateY(-45px);
403
+ transition:
404
+ transform 600ms,
405
+ opacity ease-in 900ms;
406
+
407
+ &.aoe {
408
+ opacity: 1;
409
+ transform: translateY(0);
410
+ transition-delay: 0s;
411
+ }
412
+ }
413
+
414
+ [data-aoe='partial-fade-left'] {
415
+ opacity: 0.25;
416
+ transform: translateX(45px);
417
+ transition:
418
+ transform 600ms,
419
+ opacity ease-in 900ms;
420
+
421
+ &.aoe {
422
+ opacity: 1;
423
+ transform: translateX(0);
424
+ transition-delay: 0s;
425
+ }
426
+ }
427
+
428
+ /* fast speed */
429
+ [data-aoe='partial-fade-fast'] {
430
+ opacity: 0.25;
431
+ transition: opacity ease-in 555ms;
432
+
433
+ &.aoe {
434
+ opacity: 1;
435
+ transition-delay: 0s;
436
+ }
437
+ }
438
+
439
+ [data-aoe='partial-fade-up-fast'] {
440
+ opacity: 0.25;
441
+ transform: translateY(45px);
442
+ transition:
443
+ transform 370ms,
444
+ opacity ease-in 555ms;
445
+
446
+ &.aoe {
447
+ opacity: 1;
448
+ transform: translateY(0);
449
+ transition-delay: 0s;
450
+ }
451
+ }
452
+
453
+ [data-aoe='partial-fade-right-fast'] {
454
+ opacity: 0.25;
455
+ transform: translateX(-45px);
456
+ transition:
457
+ transform 370ms,
458
+ opacity ease-in 555ms;
459
+
460
+ &.aoe {
461
+ opacity: 1;
462
+ transform: translateX(0);
463
+ transition-delay: 0s;
464
+ }
465
+ }
466
+
467
+ [data-aoe='partial-fade-down-fast'] {
468
+ opacity: 0.25;
469
+ transform: translateY(-45px);
470
+ transition:
471
+ transform 370ms,
472
+ opacity ease-in 555ms;
473
+
474
+ &.aoe {
475
+ opacity: 1;
476
+ transform: translateY(0);
477
+ transition-delay: 0s;
478
+ }
479
+ }
480
+
481
+ [data-aoe='partial-fade-left-fast'] {
482
+ opacity: 0.25;
483
+ transform: translateX(45px);
484
+ transition:
485
+ transform 370ms,
486
+ opacity ease-in 555ms;
487
+
488
+ &.aoe {
489
+ opacity: 1;
490
+ transform: translateX(0);
491
+ transition-delay: 0s;
492
+ }
493
+ }
494
+
495
+ /* slow speed */
496
+ [data-aoe='partial-fade-slow'] {
497
+ opacity: 0.25;
498
+ transition: opacity ease-in 1500ms;
499
+
500
+ &.aoe {
501
+ opacity: 1;
502
+ transition-delay: 0s;
503
+ }
504
+ }
505
+
506
+ [data-aoe='partial-fade-up-slow'] {
507
+ opacity: 0.25;
508
+ transform: translateY(45px);
509
+ transition:
510
+ transform 975ms,
511
+ opacity ease-in 1500ms;
512
+
513
+ &.aoe {
514
+ opacity: 1;
515
+ transform: translateY(0);
516
+ transition-delay: 0s;
517
+ }
518
+ }
519
+
520
+ [data-aoe='partial-fade-right-slow'] {
521
+ opacity: 0.25;
522
+ transform: translateX(-45px);
523
+ transition:
524
+ transform 975ms,
525
+ opacity ease-in 1500ms;
526
+
527
+ &.aoe {
528
+ opacity: 1;
529
+ transform: translateX(0);
530
+ transition-delay: 0s;
531
+ }
532
+ }
533
+
534
+ [data-aoe='partial-fade-down-slow'] {
535
+ opacity: 0.25;
536
+ transform: translateY(-45px);
537
+ transition:
538
+ transform 975ms,
539
+ opacity ease-in 1500ms;
540
+
541
+ &.aoe {
542
+ opacity: 1;
543
+ transform: translateY(0);
544
+ transition-delay: 0s;
545
+ }
546
+ }
547
+
548
+ [data-aoe='partial-fade-left-slow'] {
549
+ opacity: 0.25;
550
+ transform: translateX(45px);
551
+ transition:
552
+ transform 975ms,
553
+ opacity ease-in 1500ms;
350
554
 
351
555
  &.aoe {
352
556
  opacity: 1;
@@ -355,7 +559,7 @@
355
559
  }
356
560
  }
357
561
 
358
- /** You can add your own animations by following the same pattern
562
+ /** You can add your own animations by following the same in your own css file
359
563
  [data-aoe='your-animation'] {
360
564
  transform: translateX(-45px);
361
565
  transition:
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@castlenine/svelte-aoe",
3
- "version": "1.1.1",
3
+ "version": "1.3.0",
4
4
  "description": "A Svelte component to animate elements, without dependencies.",
5
5
  "license": "MIT",
6
6
  "keywords": [
@@ -41,7 +41,7 @@
41
41
  ],
42
42
  "scripts": {
43
43
  "dev": "vite dev",
44
- "build": "vite build",
44
+ "build": "npm run check && vite build",
45
45
  "preview": "vite preview",
46
46
  "package": "npm run remove-dist-folder && svelte-kit sync && svelte-package && publint",
47
47
  "prepublishOnly": "npm run package",