morphing-scroll 1.5.17 → 1.5.19
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.
- package/README.md +96 -162
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -59,8 +59,6 @@ npm install morphing-scroll
|
|
|
59
59
|
</ul>
|
|
60
60
|
</details>
|
|
61
61
|
|
|
62
|
-
<h2></h2>
|
|
63
|
-
|
|
64
62
|
<details>
|
|
65
63
|
<summary><strong><code>children</code></strong> : <em>Custom user content.</em></summary><br />
|
|
66
64
|
<ul>
|
|
@@ -84,8 +82,6 @@ npm install morphing-scroll
|
|
|
84
82
|
</ul>
|
|
85
83
|
</details>
|
|
86
84
|
|
|
87
|
-
<h2></h2>
|
|
88
|
-
|
|
89
85
|
#### SCROLL SETTINGS:
|
|
90
86
|
|
|
91
87
|
<details>
|
|
@@ -114,8 +110,6 @@ npm install morphing-scroll
|
|
|
114
110
|
</ul>
|
|
115
111
|
</details>
|
|
116
112
|
|
|
117
|
-
<h2></h2>
|
|
118
|
-
|
|
119
113
|
<details>
|
|
120
114
|
<summary><strong><code>direction</code></strong> : <em>Scrolling direction.</em></summary><br />
|
|
121
115
|
<ul>
|
|
@@ -141,8 +135,6 @@ npm install morphing-scroll
|
|
|
141
135
|
</ul>
|
|
142
136
|
</details>
|
|
143
137
|
|
|
144
|
-
<h2></h2>
|
|
145
|
-
|
|
146
138
|
<details>
|
|
147
139
|
<summary><strong><code>scrollTop</code></strong> : <em>Scroll position and animation duration.</em></summary><br />
|
|
148
140
|
<ul>
|
|
@@ -179,8 +171,6 @@ npm install morphing-scroll
|
|
|
179
171
|
</ul>
|
|
180
172
|
</details>
|
|
181
173
|
|
|
182
|
-
<h2></h2>
|
|
183
|
-
|
|
184
174
|
<details>
|
|
185
175
|
<summary><strong><code>stopLoadOnScroll</code></strong> : <em>Stop loading when scrolling.</em></summary><br />
|
|
186
176
|
<ul>
|
|
@@ -205,8 +195,6 @@ npm install morphing-scroll
|
|
|
205
195
|
</ul>
|
|
206
196
|
</details>
|
|
207
197
|
|
|
208
|
-
<h2></h2>
|
|
209
|
-
|
|
210
198
|
<details>
|
|
211
199
|
<summary><strong><code>onScrollValue</code></strong> : <em>Callback for scroll value.</em></summary><br />
|
|
212
200
|
<ul>
|
|
@@ -234,8 +222,6 @@ npm install morphing-scroll
|
|
|
234
222
|
</ul>
|
|
235
223
|
</details>
|
|
236
224
|
|
|
237
|
-
<h2></h2>
|
|
238
|
-
|
|
239
225
|
<details>
|
|
240
226
|
<summary><strong><code>isScrolling</code></strong> : <em>Callback function for scroll status.</em></summary><br />
|
|
241
227
|
<ul>
|
|
@@ -260,8 +246,6 @@ npm install morphing-scroll
|
|
|
260
246
|
</ul>
|
|
261
247
|
</details>
|
|
262
248
|
|
|
263
|
-
<h2></h2>
|
|
264
|
-
|
|
265
249
|
#### VISUAL SETTINGS:
|
|
266
250
|
|
|
267
251
|
<details>
|
|
@@ -294,8 +278,6 @@ npm install morphing-scroll
|
|
|
294
278
|
</ul>
|
|
295
279
|
</details>
|
|
296
280
|
|
|
297
|
-
<h2></h2>
|
|
298
|
-
|
|
299
281
|
<details>
|
|
300
282
|
<summary><strong><code>objectsSize</code> (required)</strong> : <em>Required: Size of cells for each object.</em></summary><br />
|
|
301
283
|
<ul>
|
|
@@ -327,8 +309,6 @@ npm install morphing-scroll
|
|
|
327
309
|
</ul>
|
|
328
310
|
</details>
|
|
329
311
|
|
|
330
|
-
<h2></h2>
|
|
331
|
-
|
|
332
312
|
<details>
|
|
333
313
|
<summary><strong><code>gap</code></strong> : <em>Gap between cells.</em></summary><br />
|
|
334
314
|
<ul>
|
|
@@ -355,8 +335,6 @@ npm install morphing-scroll
|
|
|
355
335
|
</ul>
|
|
356
336
|
</details>
|
|
357
337
|
|
|
358
|
-
<h2></h2>
|
|
359
|
-
|
|
360
338
|
<details>
|
|
361
339
|
<summary><strong><code>padding</code></strong> : <em>Padding for the <code>objectsWrapper</code>.</em></summary><br />
|
|
362
340
|
<ul>
|
|
@@ -394,8 +372,6 @@ npm install morphing-scroll
|
|
|
394
372
|
</ul>
|
|
395
373
|
</details>
|
|
396
374
|
|
|
397
|
-
<h2></h2>
|
|
398
|
-
|
|
399
375
|
<details>
|
|
400
376
|
<summary><strong><code>contentAlign</code></strong> : <em>Aligns the content when it is smaller than the MorphScroll <code>size</code>.</em></summary><br />
|
|
401
377
|
<ul>
|
|
@@ -428,8 +404,6 @@ npm install morphing-scroll
|
|
|
428
404
|
</ul>
|
|
429
405
|
</details>
|
|
430
406
|
|
|
431
|
-
<h2></h2>
|
|
432
|
-
|
|
433
407
|
<details>
|
|
434
408
|
<summary><strong><code>elementsAlign</code></strong> : <em>Aligns the objects within the <code>objectsWrapper</code>.</em></summary><br />
|
|
435
409
|
<ul>
|
|
@@ -449,8 +423,6 @@ npm install morphing-scroll
|
|
|
449
423
|
</ul>
|
|
450
424
|
</details>
|
|
451
425
|
|
|
452
|
-
<h2></h2>
|
|
453
|
-
|
|
454
426
|
<details>
|
|
455
427
|
<summary><strong><code>edgeGradient</code></strong> : <em>Gradient when scrolling overflows.</em></summary><br />
|
|
456
428
|
<ul>
|
|
@@ -482,8 +454,6 @@ npm install morphing-scroll
|
|
|
482
454
|
</ul>
|
|
483
455
|
</details>
|
|
484
456
|
|
|
485
|
-
<h2></h2>
|
|
486
|
-
|
|
487
457
|
<details>
|
|
488
458
|
<summary><strong><code>progressReverse</code></strong> : <em>Reverse the progress bar position.</em></summary><br />
|
|
489
459
|
<ul>
|
|
@@ -512,8 +482,6 @@ npm install morphing-scroll
|
|
|
512
482
|
</ul>
|
|
513
483
|
</details>
|
|
514
484
|
|
|
515
|
-
<h2></h2>
|
|
516
|
-
|
|
517
485
|
<details>
|
|
518
486
|
<summary><strong><code>progressVisibility</code></strong> : <em>Visibility of the progress bar.</em></summary><br />
|
|
519
487
|
<ul>
|
|
@@ -538,8 +506,6 @@ npm install morphing-scroll
|
|
|
538
506
|
</ul>
|
|
539
507
|
</details>
|
|
540
508
|
|
|
541
|
-
<h2></h2>
|
|
542
|
-
|
|
543
509
|
<details>
|
|
544
510
|
<summary><strong><code>objectsWrapFullMinSize</code></strong> : <em>Sets the <code>min-height</code> CSS property of the <code>objectsWrapper</code> to match the height of the MorphScroll.</em></summary><br />
|
|
545
511
|
<ul>
|
|
@@ -562,8 +528,6 @@ npm install morphing-scroll
|
|
|
562
528
|
</ul>
|
|
563
529
|
</details>
|
|
564
530
|
|
|
565
|
-
<h2></h2>
|
|
566
|
-
|
|
567
531
|
#### PROGRESS AND RENDERING:
|
|
568
532
|
|
|
569
533
|
<details>
|
|
@@ -605,8 +569,6 @@ npm install morphing-scroll
|
|
|
605
569
|
</ul>
|
|
606
570
|
</details>
|
|
607
571
|
|
|
608
|
-
<h2></h2>
|
|
609
|
-
|
|
610
572
|
<details>
|
|
611
573
|
<summary><strong><code>render</code></strong> : <em>Types of rendering for optimization.</em></summary><br />
|
|
612
574
|
<ul>
|
|
@@ -658,8 +620,6 @@ npm install morphing-scroll
|
|
|
658
620
|
</ul>
|
|
659
621
|
</details>
|
|
660
622
|
|
|
661
|
-
<h2></h2>
|
|
662
|
-
|
|
663
623
|
<details>
|
|
664
624
|
<summary><strong><code>emptyElements</code></strong> : <em>Handling of empty scroll elements.</em></summary><br />
|
|
665
625
|
<ul>
|
|
@@ -710,8 +670,6 @@ npm install morphing-scroll
|
|
|
710
670
|
</ul>
|
|
711
671
|
</details>
|
|
712
672
|
|
|
713
|
-
<h2></h2>
|
|
714
|
-
|
|
715
673
|
<details>
|
|
716
674
|
<summary><strong><code>suspending</code></strong> : <em>Adds React Suspense.</em></summary><br />
|
|
717
675
|
<ul>
|
|
@@ -724,20 +682,18 @@ npm install morphing-scroll
|
|
|
724
682
|
<br />
|
|
725
683
|
<strong>Example:</strong>
|
|
726
684
|
|
|
727
|
-
|
|
728
|
-
|
|
729
|
-
|
|
730
|
-
|
|
731
|
-
|
|
732
|
-
|
|
733
|
-
|
|
734
|
-
|
|
685
|
+
```tsx
|
|
686
|
+
<MorphScroll
|
|
687
|
+
suspending
|
|
688
|
+
// another props
|
|
689
|
+
>
|
|
690
|
+
{children}
|
|
691
|
+
</MorphScroll>
|
|
692
|
+
```
|
|
735
693
|
|
|
736
694
|
</ul>
|
|
737
695
|
</details>
|
|
738
696
|
|
|
739
|
-
<h2></h2>
|
|
740
|
-
|
|
741
697
|
<details>
|
|
742
698
|
<summary><strong><code>fallback</code></strong> : <em>Fallback element.</em></summary><br />
|
|
743
699
|
<ul>
|
|
@@ -748,14 +704,14 @@ npm install morphing-scroll
|
|
|
748
704
|
<br />
|
|
749
705
|
<strong>Example:</strong>
|
|
750
706
|
|
|
751
|
-
|
|
752
|
-
|
|
753
|
-
|
|
754
|
-
|
|
755
|
-
|
|
756
|
-
|
|
757
|
-
|
|
758
|
-
|
|
707
|
+
```tsx
|
|
708
|
+
<MorphScroll
|
|
709
|
+
fallback={<div>Loading...</div>}
|
|
710
|
+
// another props
|
|
711
|
+
>
|
|
712
|
+
{children}
|
|
713
|
+
</MorphScroll>
|
|
714
|
+
```
|
|
759
715
|
|
|
760
716
|
</ul>
|
|
761
717
|
</details>
|
|
@@ -792,24 +748,22 @@ npm install morphing-scroll
|
|
|
792
748
|
<br />
|
|
793
749
|
<strong>Example:</strong>
|
|
794
750
|
|
|
795
|
-
|
|
796
|
-
|
|
797
|
-
|
|
798
|
-
|
|
799
|
-
|
|
800
|
-
|
|
801
|
-
|
|
802
|
-
|
|
803
|
-
|
|
804
|
-
|
|
805
|
-
|
|
751
|
+
```tsx
|
|
752
|
+
<ResizeTracker
|
|
753
|
+
// another props
|
|
754
|
+
>
|
|
755
|
+
{(rect) => (
|
|
756
|
+
<p>
|
|
757
|
+
Width: {rect.width}, Height: {rect.height}
|
|
758
|
+
</p>
|
|
759
|
+
)}
|
|
760
|
+
</ResizeTracker>
|
|
761
|
+
```
|
|
806
762
|
|
|
807
763
|
</ul>
|
|
808
764
|
|
|
809
765
|
</details>
|
|
810
766
|
|
|
811
|
-
<h2></h2>
|
|
812
|
-
|
|
813
767
|
<details>
|
|
814
768
|
<summary><strong><code>style</code></strong> : <em>Applies inline styles to the container.</em></summary><br />
|
|
815
769
|
<ul>
|
|
@@ -817,20 +771,18 @@ npm install morphing-scroll
|
|
|
817
771
|
<br />
|
|
818
772
|
<strong>Example:</strong>
|
|
819
773
|
|
|
820
|
-
|
|
821
|
-
|
|
822
|
-
|
|
823
|
-
|
|
824
|
-
|
|
825
|
-
|
|
826
|
-
|
|
774
|
+
```tsx
|
|
775
|
+
<ResizeTracker style={{ backgroundColor: "blue" }}>
|
|
776
|
+
{(rect) => (
|
|
777
|
+
// content
|
|
778
|
+
)}
|
|
779
|
+
</ResizeTracker>
|
|
780
|
+
```
|
|
827
781
|
|
|
828
782
|
</ul>
|
|
829
783
|
|
|
830
784
|
</details>
|
|
831
785
|
|
|
832
|
-
<h2></h2>
|
|
833
|
-
|
|
834
786
|
<details>
|
|
835
787
|
<summary><strong><code>measure</code></strong> : <em>Defines the measurement strategy.</em></summary><br />
|
|
836
788
|
<ul>
|
|
@@ -849,20 +801,18 @@ npm install morphing-scroll
|
|
|
849
801
|
<br />
|
|
850
802
|
<strong>Example:</strong>
|
|
851
803
|
|
|
852
|
-
|
|
853
|
-
|
|
854
|
-
|
|
855
|
-
|
|
856
|
-
|
|
857
|
-
|
|
858
|
-
|
|
804
|
+
```tsx
|
|
805
|
+
<ResizeTracker measure="all">
|
|
806
|
+
{(rect) => (
|
|
807
|
+
// content
|
|
808
|
+
)}
|
|
809
|
+
</ResizeTracker>
|
|
810
|
+
```
|
|
859
811
|
|
|
860
812
|
</ul>
|
|
861
813
|
|
|
862
814
|
</details>
|
|
863
815
|
|
|
864
|
-
<h2></h2>
|
|
865
|
-
|
|
866
816
|
<details>
|
|
867
817
|
<summary><strong><code>onResize</code></strong> : <em>Callback triggered on size changes.</em></summary><br />
|
|
868
818
|
<ul>
|
|
@@ -874,24 +824,22 @@ npm install morphing-scroll
|
|
|
874
824
|
<br />
|
|
875
825
|
<strong>Example:</strong>
|
|
876
826
|
|
|
877
|
-
|
|
878
|
-
|
|
879
|
-
|
|
880
|
-
|
|
881
|
-
|
|
882
|
-
|
|
883
|
-
|
|
884
|
-
|
|
885
|
-
|
|
886
|
-
|
|
887
|
-
|
|
827
|
+
```tsx
|
|
828
|
+
<ResizeTracker
|
|
829
|
+
onResize={(rect) => {
|
|
830
|
+
console.log("New size:", rect);
|
|
831
|
+
}}
|
|
832
|
+
>
|
|
833
|
+
{(rect) => (
|
|
834
|
+
// content
|
|
835
|
+
)}
|
|
836
|
+
</ResizeTracker>
|
|
837
|
+
```
|
|
888
838
|
|
|
889
839
|
</ul>
|
|
890
840
|
|
|
891
841
|
</details>
|
|
892
842
|
|
|
893
|
-
<h2></h2>
|
|
894
|
-
|
|
895
843
|
- ### Link:
|
|
896
844
|
|
|
897
845
|
[IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver)
|
|
@@ -911,16 +859,14 @@ npm install morphing-scroll
|
|
|
911
859
|
<br />
|
|
912
860
|
<strong>Example:</strong>
|
|
913
861
|
|
|
914
|
-
|
|
915
|
-
|
|
916
|
-
|
|
862
|
+
```tsx
|
|
863
|
+
<IntersectionTracker>{children}</IntersectionTracker>
|
|
864
|
+
```
|
|
917
865
|
|
|
918
866
|
</ul>
|
|
919
867
|
|
|
920
868
|
</details>
|
|
921
869
|
|
|
922
|
-
<h2></h2>
|
|
923
|
-
|
|
924
870
|
<details>
|
|
925
871
|
<summary><strong><code>style</code></strong> : <em>Applies inline styles to the container.</em></summary><br />
|
|
926
872
|
<ul>
|
|
@@ -928,18 +874,16 @@ npm install morphing-scroll
|
|
|
928
874
|
<br />
|
|
929
875
|
<strong>Example:</strong>
|
|
930
876
|
|
|
931
|
-
|
|
932
|
-
|
|
933
|
-
|
|
934
|
-
|
|
935
|
-
|
|
877
|
+
```tsx
|
|
878
|
+
<IntersectionTracker style={{ backgroundColor: "blue" }}>
|
|
879
|
+
{children}
|
|
880
|
+
</IntersectionTracker>
|
|
881
|
+
```
|
|
936
882
|
|
|
937
883
|
</ul>
|
|
938
884
|
|
|
939
885
|
</details>
|
|
940
886
|
|
|
941
|
-
<h2></h2>
|
|
942
|
-
|
|
943
887
|
<details>
|
|
944
888
|
<summary><strong><code>root</code></strong> : <em>Defines the observation area.</em></summary><br />
|
|
945
889
|
<ul>
|
|
@@ -955,18 +899,16 @@ npm install morphing-scroll
|
|
|
955
899
|
<br />
|
|
956
900
|
<strong>Example:</strong>
|
|
957
901
|
|
|
958
|
-
|
|
959
|
-
|
|
960
|
-
|
|
961
|
-
|
|
962
|
-
|
|
902
|
+
```tsx
|
|
903
|
+
<IntersectionTracker root={document.getElementById("root")}>
|
|
904
|
+
{children}
|
|
905
|
+
</IntersectionTracker>
|
|
906
|
+
```
|
|
963
907
|
|
|
964
908
|
</ul>
|
|
965
909
|
|
|
966
910
|
</details>
|
|
967
911
|
|
|
968
|
-
<h2></h2>
|
|
969
|
-
|
|
970
912
|
<details>
|
|
971
913
|
<summary><strong><code>rootMargin</code></strong> : <em>Sets the margin around the root element.</em></summary><br />
|
|
972
914
|
<ul>
|
|
@@ -986,22 +928,20 @@ npm install morphing-scroll
|
|
|
986
928
|
<br />
|
|
987
929
|
<strong>Example:</strong>
|
|
988
930
|
|
|
989
|
-
|
|
990
|
-
|
|
991
|
-
|
|
992
|
-
|
|
993
|
-
|
|
994
|
-
|
|
995
|
-
|
|
996
|
-
|
|
997
|
-
|
|
931
|
+
```tsx
|
|
932
|
+
<IntersectionTracker
|
|
933
|
+
rootMargin={10}
|
|
934
|
+
// rootMargin={[10, 20]}
|
|
935
|
+
// rootMargin={[10, 20, 10, 20]}
|
|
936
|
+
>
|
|
937
|
+
{children}
|
|
938
|
+
</IntersectionTracker>
|
|
939
|
+
```
|
|
998
940
|
|
|
999
941
|
</ul>
|
|
1000
942
|
|
|
1001
943
|
</details>
|
|
1002
944
|
|
|
1003
|
-
<h2></h2>
|
|
1004
|
-
|
|
1005
945
|
<details>
|
|
1006
946
|
<summary><strong><code>threshold</code></strong> : <em>Defines when the callback is triggered.</em></summary><br />
|
|
1007
947
|
<ul>
|
|
@@ -1019,21 +959,19 @@ npm install morphing-scroll
|
|
|
1019
959
|
<br />
|
|
1020
960
|
<strong>Example:</strong>
|
|
1021
961
|
|
|
1022
|
-
|
|
1023
|
-
|
|
1024
|
-
|
|
1025
|
-
|
|
1026
|
-
|
|
1027
|
-
|
|
1028
|
-
|
|
1029
|
-
|
|
962
|
+
```tsx
|
|
963
|
+
<IntersectionTracker
|
|
964
|
+
threshold={0.5}
|
|
965
|
+
// threshold={[0, 0.5, 1]}
|
|
966
|
+
>
|
|
967
|
+
{children}
|
|
968
|
+
</IntersectionTracker>
|
|
969
|
+
```
|
|
1030
970
|
|
|
1031
971
|
</ul>
|
|
1032
972
|
|
|
1033
973
|
</details>
|
|
1034
974
|
|
|
1035
|
-
<h2></h2>
|
|
1036
|
-
|
|
1037
975
|
<details>
|
|
1038
976
|
<summary><strong><code>visibleContent</code></strong> : <em>Makes all elements always visible.</em></summary><br />
|
|
1039
977
|
<ul>
|
|
@@ -1048,16 +986,14 @@ npm install morphing-scroll
|
|
|
1048
986
|
<br />
|
|
1049
987
|
<strong>Example:</strong>
|
|
1050
988
|
|
|
1051
|
-
|
|
1052
|
-
|
|
1053
|
-
|
|
989
|
+
```tsx
|
|
990
|
+
<IntersectionTracker visibleContent>{children}</IntersectionTracker>
|
|
991
|
+
```
|
|
1054
992
|
|
|
1055
993
|
</ul>
|
|
1056
994
|
|
|
1057
995
|
</details>
|
|
1058
996
|
|
|
1059
|
-
<h2></h2>
|
|
1060
|
-
|
|
1061
997
|
<details>
|
|
1062
998
|
<summary><strong><code>onVisible</code></strong> : <em>Callback function triggered when the element becomes visible.</em></summary><br />
|
|
1063
999
|
<ul>
|
|
@@ -1074,24 +1010,22 @@ npm install morphing-scroll
|
|
|
1074
1010
|
<br />
|
|
1075
1011
|
<strong>Example:</strong>
|
|
1076
1012
|
|
|
1077
|
-
|
|
1078
|
-
|
|
1079
|
-
|
|
1080
|
-
|
|
1081
|
-
|
|
1082
|
-
|
|
1083
|
-
|
|
1084
|
-
|
|
1085
|
-
|
|
1086
|
-
|
|
1087
|
-
|
|
1013
|
+
```tsx
|
|
1014
|
+
<IntersectionTracker
|
|
1015
|
+
onVisible={(key) => {
|
|
1016
|
+
if (key.includes("elementId")) {
|
|
1017
|
+
// do something
|
|
1018
|
+
}
|
|
1019
|
+
}}
|
|
1020
|
+
>
|
|
1021
|
+
{children}
|
|
1022
|
+
</IntersectionTracker>
|
|
1023
|
+
```
|
|
1088
1024
|
|
|
1089
1025
|
</ul>
|
|
1090
1026
|
|
|
1091
1027
|
</details>
|
|
1092
1028
|
|
|
1093
|
-
<h2></h2>
|
|
1094
|
-
|
|
1095
1029
|
- ### Link:
|
|
1096
1030
|
|
|
1097
1031
|
[IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)
|