@wix/design-system-illustrations 2.43.0 → 2.44.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 (75) hide show
  1. package/dist/cjs/MaxWidth.js +1 -2
  2. package/dist/cjs/animated/ElementPositionDefault.js +90 -0
  3. package/dist/cjs/animated/ElementPositionPinned.js +91 -0
  4. package/dist/cjs/animated/ElementPositionSticky.js +91 -0
  5. package/dist/cjs/animated/ResponsiveBehaviorHeaderDisappear.js +90 -0
  6. package/dist/cjs/animated/{ThumbnailFullWidthTransparent.js → StickySectionPresetsFullWidth.js} +10 -9
  7. package/dist/cjs/animated/StickySectionPresetsGridRows.js +89 -0
  8. package/dist/cjs/animated/{ThumbnailGridTransparent.js → StickySectionPresetsSideBySide.js} +10 -9
  9. package/dist/cjs/animated/StickySectionPresetsSplit.js +89 -0
  10. package/dist/cjs/animated/{ThumbnailZigzagTransparent.js → StickySectionPresetsZigzag.js} +10 -9
  11. package/dist/cjs/animated/animated.global.css +696 -477
  12. package/dist/cjs/animated/index.js +27 -30
  13. package/dist/esm/MaxWidth.js +1 -2
  14. package/dist/esm/animated/ElementPositionDefault.js +46 -0
  15. package/dist/esm/animated/ElementPositionPinned.js +47 -0
  16. package/dist/esm/animated/ElementPositionSticky.js +47 -0
  17. package/dist/esm/animated/ResponsiveBehaviorHeaderDisappear.js +46 -0
  18. package/dist/esm/animated/{ThumbnailFullWidthTransparent.js → StickySectionPresetsFullWidth.js} +6 -5
  19. package/dist/esm/animated/StickySectionPresetsGridRows.js +45 -0
  20. package/dist/esm/animated/StickySectionPresetsSideBySide.js +45 -0
  21. package/dist/esm/animated/StickySectionPresetsSplit.js +45 -0
  22. package/dist/esm/animated/{ThumbnailZigzagTransparent.js → StickySectionPresetsZigzag.js} +6 -5
  23. package/dist/esm/animated/animated.global.css +696 -477
  24. package/dist/esm/animated/index.js +18 -20
  25. package/dist/types/animated/ElementPositionDefault.d.ts +7 -0
  26. package/dist/types/animated/ElementPositionPinned.d.ts +7 -0
  27. package/dist/types/animated/ElementPositionSticky.d.ts +7 -0
  28. package/dist/types/animated/ResponsiveBehaviorHeaderDisappear.d.ts +7 -0
  29. package/dist/types/animated/StickySectionPresetsFullWidth.d.ts +7 -0
  30. package/dist/types/animated/StickySectionPresetsGridRows.d.ts +7 -0
  31. package/dist/types/animated/StickySectionPresetsSideBySide.d.ts +7 -0
  32. package/dist/types/animated/StickySectionPresetsSplit.d.ts +7 -0
  33. package/dist/types/animated/StickySectionPresetsZigzag.d.ts +7 -0
  34. package/dist/types/animated/index.d.ts +18 -20
  35. package/package.json +3 -3
  36. package/src/MaxWidth.svg +1 -1
  37. package/src/animated/ElementPositionDefault.html +223 -0
  38. package/src/animated/ElementPositionPinned.html +223 -0
  39. package/src/animated/ElementPositionSticky.html +342 -0
  40. package/src/animated/ResponsiveBehaviorHeaderDisappear.html +336 -0
  41. package/src/animated/{ThumbnailFullWidthTransparent.html → StickySectionPresetsFullWidth.html} +81 -16
  42. package/src/animated/{ThumbnailSideBySideTransparent.html → StickySectionPresetsGridRows.html} +100 -17
  43. package/src/animated/{ThumbnailGridTransparent.html → StickySectionPresetsSideBySide.html} +82 -16
  44. package/src/animated/{ThumbnailSplitTransparent.html → StickySectionPresetsSplit.html} +99 -18
  45. package/src/animated/{ThumbnailZigzagTransparent.html → StickySectionPresetsZigzag.html} +92 -21
  46. package/dist/cjs/animated/ThumbnailFullWidth.js +0 -88
  47. package/dist/cjs/animated/ThumbnailGrid.js +0 -88
  48. package/dist/cjs/animated/ThumbnailSideBySide.js +0 -88
  49. package/dist/cjs/animated/ThumbnailSideBySideTransparent.js +0 -88
  50. package/dist/cjs/animated/ThumbnailSplit.js +0 -88
  51. package/dist/cjs/animated/ThumbnailSplitTransparent.js +0 -88
  52. package/dist/cjs/animated/ThumbnailZigzag.js +0 -88
  53. package/dist/esm/animated/ThumbnailFullWidth.js +0 -44
  54. package/dist/esm/animated/ThumbnailGrid.js +0 -44
  55. package/dist/esm/animated/ThumbnailGridTransparent.js +0 -44
  56. package/dist/esm/animated/ThumbnailSideBySide.js +0 -44
  57. package/dist/esm/animated/ThumbnailSideBySideTransparent.js +0 -44
  58. package/dist/esm/animated/ThumbnailSplit.js +0 -44
  59. package/dist/esm/animated/ThumbnailSplitTransparent.js +0 -44
  60. package/dist/esm/animated/ThumbnailZigzag.js +0 -44
  61. package/dist/types/animated/ThumbnailFullWidth.d.ts +0 -7
  62. package/dist/types/animated/ThumbnailFullWidthTransparent.d.ts +0 -7
  63. package/dist/types/animated/ThumbnailGrid.d.ts +0 -7
  64. package/dist/types/animated/ThumbnailGridTransparent.d.ts +0 -7
  65. package/dist/types/animated/ThumbnailSideBySide.d.ts +0 -7
  66. package/dist/types/animated/ThumbnailSideBySideTransparent.d.ts +0 -7
  67. package/dist/types/animated/ThumbnailSplit.d.ts +0 -7
  68. package/dist/types/animated/ThumbnailSplitTransparent.d.ts +0 -7
  69. package/dist/types/animated/ThumbnailZigzag.d.ts +0 -7
  70. package/dist/types/animated/ThumbnailZigzagTransparent.d.ts +0 -7
  71. package/src/animated/ThumbnailFullWidth.html +0 -133
  72. package/src/animated/ThumbnailGrid.html +0 -134
  73. package/src/animated/ThumbnailSideBySide.html +0 -160
  74. package/src/animated/ThumbnailSplit.html +0 -139
  75. package/src/animated/ThumbnailZigzag.html +0 -162
package/src/animated/ResponsiveBehaviorHeaderDisappear.html ADDED
@@ -0,0 +1,336 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <title>Animation</title>
6
+ <style>
7
+ svg {
8
+ max-width: 100%;
9
+ height: auto;
10
+ }
11
+
12
+ :root {
13
+ --color-1: #002294;
14
+ --color-2: #B8C4FF;
15
+ --color-3: #F8F6F6;
16
+ --color-4: #D9D9D9;
17
+ --color-5: #303030;
18
+ }
19
+
20
+ .Group-2147222209 {
21
+ animation: Group-2147222209-opacity 3360ms linear infinite both;
22
+ }
23
+
24
+ @keyframes Group-2147222209-opacity {
25
+ 0% {
26
+ opacity: 1;
27
+ animation-timing-function: steps(1, jump-end);
28
+ }
29
+ 19.84127% {
30
+ opacity: 0;
31
+ animation-timing-function: steps(1, jump-end);
32
+ }
33
+ 84.325397% {
34
+ opacity: 0;
35
+ animation-timing-function: steps(1, jump-end);
36
+ }
37
+ 95.238095% {
38
+ opacity: 1;
39
+ }
40
+ 95.486111% {
41
+ opacity: 1;
42
+ animation-timing-function: steps(1, jump-end);
43
+ }
44
+ 100% {
45
+ opacity: 1;
46
+ }
47
+ }
48
+
49
+ .Rectangle-4723343 {
50
+ animation: shared-opacity-1 3360ms linear infinite both;
51
+ }
52
+
53
+ @keyframes shared-opacity-1 {
54
+ 0% {
55
+ opacity: 1;
56
+ animation-timing-function: steps(1, jump-end);
57
+ }
58
+ 19.84127% {
59
+ opacity: 0;
60
+ animation-timing-function: steps(1, jump-end);
61
+ }
62
+ 84.325397% {
63
+ opacity: 0;
64
+ animation-timing-function: steps(1, jump-end);
65
+ }
66
+ 95.486111% {
67
+ opacity: 1;
68
+ animation-timing-function: steps(1, jump-end);
69
+ }
70
+ 100% {
71
+ opacity: 1;
72
+ }
73
+ }
74
+
75
+ .Rectangle-4723344 {
76
+ animation: shared-opacity-1 3360ms linear infinite both;
77
+ }
78
+
79
+ .Rectangle-4723345_2 {
80
+ animation: shared-opacity-1 3360ms linear infinite both;
81
+ }
82
+
83
+ .import-msvsnwyw-7 {
84
+ transform-origin: 169.18417px 59.362999px;
85
+ animation: import-msvsnwyw-7-transform 3360ms linear infinite both;
86
+ }
87
+
88
+ @keyframes import-msvsnwyw-7-transform {
89
+ 0% {
90
+ transform: translate(41px, 23px);
91
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
92
+ }
93
+ 49.613095% {
94
+ transform: translate(41px, -106.4px);
95
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
96
+ }
97
+ 95.238095% {
98
+ transform: translate(41px, 23px);
99
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
100
+ }
101
+ 100% {
102
+ transform: translate(41px, 23px);
103
+ }
104
+ }
105
+
106
+ .node-2-3 {
107
+ transform-origin: 2px 12.97321px;
108
+ animation: node-2-3-transform 3360ms linear infinite both;
109
+ }
110
+
111
+ @keyframes node-2-3-transform {
112
+ 0% {
113
+ transform: translate(0px, 0px);
114
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
115
+ }
116
+ 49.613095% {
117
+ transform: translate(0px, 31.965px);
118
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
119
+ }
120
+ 95.238095% {
121
+ transform: translate(0px, 0px);
122
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
123
+ }
124
+ 100% {
125
+ transform: translate(0px, 0px);
126
+ }
127
+ }
128
+ </style>
129
+ </head>
130
+ <body>
131
+ <svg xmlns="http://www.w3.org/2000/svg" width="236" height="127" viewBox="0 0 236 127">
132
+ <defs>
133
+ <linearGradient id="paint0_linear_4371_16309" x1="178.227" y1="-83.0937" x2="-110.087" y2="145.731" gradientUnits="userSpaceOnUse"><stop offset="0.176006" stop-color="#EAEFFF" /><stop offset="0.576923" stop-color="#B8C4FF" /><stop offset="0.85" stop-color="#002294" /></linearGradient>
134
+ <linearGradient id="paint1_linear_4371_16309" x1="95.39" y1="44.9158" x2="123.428" y2="69.4849" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#EAEFFF" /><stop offset="0.325264" stop-color="#B8C4FF" /><stop offset="1" stop-color="#002294" /></linearGradient>
135
+ <linearGradient id="paint2_linear_4371_16309" x1="75.4543" y1="17.3794" x2="129.908" y2="76.2359" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#EAEFFF" /><stop offset="0.5" stop-color="#B8C4FF" /><stop offset="0.95" stop-color="#002294" /></linearGradient>
136
+ <linearGradient id="paint3_linear_4371_16309" x1="100.35" y1="24.3133" x2="83.4414" y2="45.8896" gradientUnits="userSpaceOnUse"><stop offset="0.176006" stop-color="#EAEFFF" /><stop offset="0.576923" stop-color="#B8C4FF" /><stop offset="0.85" stop-color="#002294" /></linearGradient>
137
+ <linearGradient id="paint4_linear_4371_16309" x1="138.978" y1="-27.1478" x2="-8.29128" y2="171.419" gradientUnits="userSpaceOnUse"><stop offset="0.176006" stop-color="#EAEFFF" /><stop offset="0.576923" stop-color="#B8C4FF" /><stop offset="0.85" stop-color="#002294" /></linearGradient>
138
+ <linearGradient id="paint5_linear_4371_16309" x1="162.389" y1="1.90174" x2="39.2589" y2="153.375" gradientUnits="userSpaceOnUse"><stop offset="0.176006" stop-color="#EAEFFF" /><stop offset="0.576923" stop-color="#B8C4FF" /><stop offset="0.85" stop-color="#002294" /></linearGradient>
139
+ <linearGradient id="paint6_linear_4371_16309" x1="212.458" y1="17.0772" x2="103.741" y2="151.031" gradientUnits="userSpaceOnUse"><stop offset="0.176006" stop-color="#EAEFFF" /><stop offset="0.576923" stop-color="#B8C4FF" /><stop offset="0.85" stop-color="#002294" /></linearGradient>
140
+ <linearGradient id="paint7_linear_4371_16309" x1="307.169" y1="-61.1983" x2="66.9405" y2="309.011" gradientUnits="userSpaceOnUse"><stop offset="0.176006" stop-color="#EAEFFF" /><stop offset="0.576923" stop-color="#B8C4FF" /><stop offset="0.85" stop-color="#002294" /></linearGradient>
141
+ <linearGradient id="paint8_linear_4371_16309" x1="141.161" y1="135.036" x2="91.0452" y2="223.425" gradientUnits="userSpaceOnUse"><stop offset="0.176006" stop-color="#EAEFFF" /><stop offset="0.576923" stop-color="#B8C4FF" /><stop offset="0.85" stop-color="#002294" /></linearGradient>
142
+ <filter xmlns="http://www.w3.org/2000/svg" id="filter0_f_4371_16309" color-interpolation-filters="sRGB" filterUnits="objectBoundingBox" x="-1" y="-1" width="3" height="3">
143
+ <feFlood flood-opacity="0" result="BackgroundImageFix"/>
144
+ <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
145
+ <feGaussianBlur stdDeviation="13.7813" result="effect1_foregroundBlur_4371_16309"/>
146
+ </filter>
147
+ <filter xmlns="http://www.w3.org/2000/svg" id="filter1_f_4371_16309" color-interpolation-filters="sRGB" filterUnits="objectBoundingBox" x="-1" y="-1" width="3" height="3">
148
+ <feFlood flood-opacity="0" result="BackgroundImageFix"/>
149
+ <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
150
+ <feGaussianBlur stdDeviation="1.71335" result="effect1_foregroundBlur_4371_16309"/>
151
+ </filter>
152
+ <filter xmlns="http://www.w3.org/2000/svg" id="filter2_f_4371_16309" color-interpolation-filters="sRGB" filterUnits="objectBoundingBox" x="-1" y="-1" width="3" height="3">
153
+ <feFlood flood-opacity="0" result="BackgroundImageFix"/>
154
+ <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
155
+ <feGaussianBlur stdDeviation="11.2456" result="effect1_foregroundBlur_4371_16309"/>
156
+ </filter>
157
+ <filter xmlns="http://www.w3.org/2000/svg" id="filter3_f_4371_16309" color-interpolation-filters="sRGB" filterUnits="objectBoundingBox" x="-1" y="-1" width="3" height="3">
158
+ <feFlood flood-opacity="0" result="BackgroundImageFix"/>
159
+ <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
160
+ <feGaussianBlur stdDeviation="11.2456" result="effect1_foregroundBlur_4371_16309"/>
161
+ </filter>
162
+ <filter xmlns="http://www.w3.org/2000/svg" id="filter4_f_4371_16309" color-interpolation-filters="sRGB" filterUnits="objectBoundingBox" x="-1" y="-1" width="3" height="3">
163
+ <feFlood flood-opacity="0" result="BackgroundImageFix"/>
164
+ <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
165
+ <feGaussianBlur stdDeviation="11.2456" result="effect1_foregroundBlur_4371_16309"/>
166
+ </filter>
167
+ <filter xmlns="http://www.w3.org/2000/svg" id="filter5_f_4371_16309" color-interpolation-filters="sRGB" filterUnits="objectBoundingBox" x="-1" y="-1" width="3" height="3">
168
+ <feFlood flood-opacity="0" result="BackgroundImageFix"/>
169
+ <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
170
+ <feGaussianBlur stdDeviation="13.7813" result="effect1_foregroundBlur_4371_16309"/>
171
+ </filter>
172
+ <filter xmlns="http://www.w3.org/2000/svg" id="filter6_f_4371_16309" color-interpolation-filters="sRGB" filterUnits="objectBoundingBox" x="-1" y="-1" width="3" height="3">
173
+ <feFlood flood-opacity="0" result="BackgroundImageFix"/>
174
+ <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
175
+ <feGaussianBlur stdDeviation="4.07281" result="effect1_foregroundBlur_4371_16309"/>
176
+ </filter>
177
+ <clipPath xmlns="http://www.w3.org/2000/svg" id="clip0_4371_16309">
178
+ <rect width="147" height="210.525" fill="white"/>
179
+ </clipPath>
180
+ <clipPath xmlns="http://www.w3.org/2000/svg" id="clip1_4371_16309">
181
+ <rect width="147" height="231.984" fill="white"/>
182
+ </clipPath>
183
+ <clipPath xmlns="http://www.w3.org/2000/svg" id="clip2_4371_16309">
184
+ <rect x="76.7969" y="24.7422" width="52.7113" height="46.1224" rx="6.58892" fill="white"/>
185
+ </clipPath>
186
+ <clipPath xmlns="http://www.w3.org/2000/svg" id="clip3_4371_16309">
187
+ <rect width="175.704" height="76.8707" fill="white" transform="translate(52.6367 11.5625)"/>
188
+ </clipPath>
189
+ <clipPath xmlns="http://www.w3.org/2000/svg" id="clip4_4371_16309">
190
+ <rect x="83.3867" y="31.3281" width="10.9815" height="10.9815" rx="5.49077" fill="white"/>
191
+ </clipPath>
192
+ <clipPath xmlns="http://www.w3.org/2000/svg" id="clip5_4371_16309">
193
+ <rect x="-19.8438" y="85.8984" width="59.3003" height="46.1224" rx="4.39261" fill="white"/>
194
+ </clipPath>
195
+ <clipPath xmlns="http://www.w3.org/2000/svg" id="clip6_4371_16309">
196
+ <rect x="43.8477" y="85.8984" width="59.3003" height="46.1224" rx="4.39261" fill="white"/>
197
+ </clipPath>
198
+ <clipPath xmlns="http://www.w3.org/2000/svg" id="clip7_4371_16309">
199
+ <rect x="107.543" y="85.8984" width="59.3003" height="46.1224" rx="4.39261" fill="white"/>
200
+ </clipPath>
201
+ <clipPath xmlns="http://www.w3.org/2000/svg" id="clip8_4371_16309">
202
+ <rect width="146.703" height="57.4219" fill="white" transform="translate(0.167969 153.172)"/>
203
+ </clipPath>
204
+ <clipPath xmlns="http://www.w3.org/2000/svg" id="clip9_4371_16309">
205
+ <rect x="63.1367" y="187.57" width="20.7258" height="7.65129" rx="3.82565" fill="white"/>
206
+ </clipPath>
207
+ <mask xmlns="http://www.w3.org/2000/svg" id="mask0_3075_31420" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="-1" y="0" width="149" height="20">
208
+ <rect x="147.257" y="19.4897" width="147.514" height="19.4897" transform="rotate(-180 147.257 19.4897)" fill="url(#paint0_linear_3075_31420)"/>
209
+ </mask>
210
+ <mask id="am-node-1-2-2" maskUnits="userSpaceOnUse" mask-type="alpha" x="0" y="0" width="236" height="127"><rect style="transform-box: fill-box; transform-origin: 50% 50%; transform: translate(82.5px, 41.6px) scale(1, 1)" x="-41.5" y="-18.5" width="147" height="81" rx="6" ry="6" fill="var(--color-4)" opacity="1" /></mask>
211
+ <mask id="am-node-1-2-2-2" maskUnits="userSpaceOnUse" mask-type="alpha" x="0" y="0" width="236" height="127"><rect style="transform-box: fill-box; transform-origin: 50% 50%; transform: translate(82.5px, 41.5px) scale(1, 1)" x="-41.5" y="-18.5" width="147" height="81" rx="6" ry="6" fill="var(--color-4)" opacity="1" /></mask>
212
+ </defs>
213
+ <path display="none" d="M0 8C0 3.58172 3.58172 0 8 0H228C232.418 0 236 3.58172 236 8V119C236 123.418 232.418 127 228 127H8C3.58172 127 0 123.418 0 119V8Z" fill="var(--color-5)" />
214
+ <g mask="url(#am-node-1-2-2)">
215
+ <g class="import-msvsnwyw-7">
216
+ <g fill="none" clip-path="url(#clip0_4371_16309)">
217
+ <g fill="none">
218
+ <rect x="-0.21875" y="0.101562" width="147" height="211.591" rx="0" ry="0" fill="var(--color-3)" />
219
+ </g>
220
+ <g fill="none" opacity="0.5" clip-path="url(#clip1_4371_16309)">
221
+ <rect x="0" y="0" width="147" height="231.984" fill="var(--color-1)" />
222
+ <g fill="none" filter="url(#filter0_f_4371_16309)">
223
+ <rect x="-1.14453" y="-113.258" width="209.016" height="336.055" fill="url(#paint0_linear_4371_16309)" />
224
+ </g>
225
+ </g>
226
+ <g fill="none">
227
+ <g fill="none">
228
+ <g fill="none" clip-path="url(#clip2_4371_16309)">
229
+ <g fill="none" clip-path="url(#clip3_4371_16309)">
230
+ <rect x="52.6367" y="11.5625" width="175.704" height="76.8707" fill="var(--color-1)" />
231
+ </g>
232
+ <g fill="none">
233
+ <path d="M106.633 34.6094L85.7109 64.9634L123.026 59.9707L106.633 34.6094Z" fill="url(#paint1_linear_4371_16309)" />
234
+ <path d="M162.428 52.6287C162.428 52.6287 115.546 34.9055 114.147 34.3712C112.748 33.837 104.067 31.3653 106.633 38.4918C109.184 45.5736 110.581 48.297 111.137 49.5063C111.692 50.7156 113.955 55.6428 108.262 57.461C101.809 59.5209 67.0078 69.3029 67.0078 69.3029V74.9207H162.428V52.6287Z" fill="url(#paint2_linear_4371_16309)" />
235
+ </g>
236
+ <g fill="none">
237
+ <g fill="none" clip-path="url(#clip4_4371_16309)">
238
+ <rect x="83.3867" y="31.3281" width="10.9815" height="10.9815" rx="5.49077" fill="var(--color-1)" />
239
+ <g fill="none" filter="url(#filter1_f_4371_16309)">
240
+ <path d="M91.474 22.724C90.9464 22.8289 90.4255 22.9744 89.9181 23.1605C87.8346 23.932 85.9879 25.4005 84.7702 27.4679C81.9866 32.188 83.5357 38.2345 88.2304 40.9718C92.925 43.7092 98.9862 42.0986 101.77 37.3784C104.553 32.6549 103.004 26.6084 98.3131 23.8745C96.1687 22.6225 93.7436 22.2808 91.474 22.724Z" fill="url(#paint3_linear_4371_16309)" />
241
+ </g>
242
+ </g>
243
+ </g>
244
+ </g>
245
+ </g>
246
+ <g fill="none">
247
+ <rect x="17.4961" y="37.9219" width="50.515" height="2.19631" rx="1.09815" fill="var(--color-1)" />
248
+ <rect x="17.4961" y="46.7031" width="50.515" height="2.19631" rx="1.09815" fill="var(--color-1)" />
249
+ <rect x="17.4961" y="55.4922" width="26.3557" height="2.19631" rx="1.09815" fill="var(--color-1)" />
250
+ </g>
251
+ </g>
252
+ <g fill="none">
253
+ <g fill="none">
254
+ <g fill="none">
255
+ <g fill="none" clip-path="url(#clip5_4371_16309)">
256
+ <rect x="-19.8438" y="85.8984" width="59.3003" height="46.1224" rx="4.39261" fill="var(--color-1)" />
257
+ <g fill="none" filter="url(#filter2_f_4371_16309)">
258
+ <rect x="-19.4297" y="-42.8281" width="184.587" height="174.692" fill="url(#paint4_linear_4371_16309)" />
259
+ </g>
260
+ </g>
261
+ </g>
262
+ </g>
263
+ <g fill="none">
264
+ <g fill="none">
265
+ <g fill="none" clip-path="url(#clip6_4371_16309)">
266
+ <rect x="43.8477" y="85.8984" width="59.3003" height="46.1224" rx="4.39261" fill="var(--color-1)" />
267
+ <g fill="none" filter="url(#filter3_f_4371_16309)">
268
+ <rect x="44.2617" y="-10.9141" width="137.649" height="142.779" fill="url(#paint5_linear_4371_16309)" />
269
+ </g>
270
+ </g>
271
+ </g>
272
+ </g>
273
+ <g fill="none">
274
+ <g fill="none">
275
+ <g fill="none" clip-path="url(#clip7_4371_16309)">
276
+ <rect x="107.543" y="85.8984" width="59.3003" height="46.1224" rx="4.39261" fill="var(--color-1)" />
277
+ <g fill="none" filter="url(#filter4_f_4371_16309)">
278
+ <rect x="107.961" y="5.75781" width="121.767" height="126.107" fill="url(#paint6_linear_4371_16309)" />
279
+ </g>
280
+ </g>
281
+ </g>
282
+ </g>
283
+ </g>
284
+ <g style="transform-box: fill-box; transform-origin: 50% 50%; transform: translate(-0.1px, 0px)" fill="none" opacity="0.5" clip-path="url(#clip8_4371_16309)">
285
+ <rect x="0.019469" y="153.172" width="147" height="57.4219" fill="var(--color-1)" />
286
+ <g fill="none" filter="url(#filter5_f_4371_16309)">
287
+ <rect x="-2.29688" y="-88" width="360.609" height="298.594" fill="url(#paint7_linear_4371_16309)" />
288
+ </g>
289
+ </g>
290
+ <g fill="none">
291
+ <g fill="none">
292
+ <rect x="41.3281" y="168.547" width="64.3447" height="2.18608" rx="1.09304" fill="var(--color-1)" />
293
+ <rect x="55.9531" y="177.469" width="35.0971" height="2.18608" rx="1.09304" fill="var(--color-1)" />
294
+ </g>
295
+ <g fill="none">
296
+ <g fill="none" clip-path="url(#clip9_4371_16309)">
297
+ <rect x="63.1367" y="187.57" width="20.7258" height="7.65129" rx="3.82565" fill="var(--color-1)" />
298
+ <g fill="none" filter="url(#filter6_f_4371_16309)">
299
+ <path d="M62.5273 129.086H154.156V195.38H62.5273V129.086Z" fill="url(#paint8_linear_4371_16309)" />
300
+ </g>
301
+ </g>
302
+ </g>
303
+ </g>
304
+ </g>
305
+ </g>
306
+ </g>
307
+ <g style="transform-box: fill-box; transform-origin: 50% 50%; transform: translate(190.8px, 33.5px)">
308
+ <path d="M4 58.125C4 59.1605 3.10468 60 2.00025 60C0.895815 60 0.000495434 59.1605 0.000495434 58.125L0.000495434 1.875C0.000495434 0.839466 0.895815 0 2.00025 0C3.10468 0 4 0.839466 4 1.875L4 58.125Z" fill="var(--color-2)" />
309
+ <g class="node-2-3">
310
+ <line x1="2" y1="8.48682" x2="2" y2="17.4596" fill="none" stroke="var(--color-1)" stroke-width="4" stroke-linecap="round" />
311
+ </g>
312
+ </g>
313
+ <g mask="url(#am-node-1-2-2-2)">
314
+ <g>
315
+ <g style="transform-box: fill-box; transform-origin: 50% 50%; transform: translate(41.25659px, 22.978997px)">
316
+ <g fill="none" mask="url(#mask0_3075_31420)">
317
+ <rect style="transform-box: fill-box; transform-origin: 50% 50%; transform: translate(-0.337539px, 0.122562px)" display="none" x="-0.256592" y="0" width="147.514" height="19.4897" fill="var(--color-1)" />
318
+ </g>
319
+ </g>
320
+ <g class="Group-2147222209" style="transform-origin: 114.708199px 30.9618px; transform: translate(-0.2px, 0px)" fill="none">
321
+ <rect x="41.0132" y="22.979" width="147.39" height="15.9656" fill="var(--color-1)" />
322
+ </g>
323
+ <g class="Rectangle-4723343" style="transform-origin: 167.6769px 30.96348px; transform: translate(-0.2px, 0px)">
324
+ <rect x="160.768" y="29.812" width="13.8178" height="2.30296" rx="1.15148" fill="var(--color-2)" />
325
+ </g>
326
+ <g class="Rectangle-4723344" style="transform-origin: 146.9499px 30.96348px; transform: translate(-0.2px, 0px)">
327
+ <rect x="140.041" y="29.812" width="13.8178" height="2.30296" rx="1.15148" fill="var(--color-2)" />
328
+ </g>
329
+ <g class="Rectangle-4723345_2" style="transform-origin: 126.2229px 30.96348px; transform: translate(-0.2px, 0px)">
330
+ <rect x="119.314" y="29.812" width="13.8178" height="2.30296" rx="1.15148" fill="var(--color-2)" />
331
+ </g>
332
+ </g>
333
+ </g>
334
+ </svg>
335
+ </body>
336
+ </html>
package/src/animated/{ThumbnailFullWidthTransparent.html → StickySectionPresetsFullWidth.html} RENAMED
@@ -9,6 +9,8 @@ svg {
9
9
  height: auto;
10
10
  }
11
11
 
12
+ *, *::before, *::after { animation-delay: -1700ms !important; }
13
+
12
14
  :root {
13
15
  --color-1: #F8F6F6;
14
16
  --color-2: #002294;
@@ -16,17 +18,18 @@ svg {
16
18
  }
17
19
 
18
20
  .Frame-1707483277 {
19
- transform-box: fill-box;
20
- transform-origin: 50% 50%;
21
- animation: Frame-1707483277-transform 2375ms linear infinite both;
21
+ transform-origin: 44.431254px 42.9419px;
22
+ animation:
23
+ Frame-1707483277-transform 2417ms linear infinite both,
24
+ shared-opacity-1 2417ms linear infinite both;
22
25
  }
23
26
 
24
27
  @keyframes Frame-1707483277-transform {
25
28
  0% {
26
- transform: translate(0px, 57.591696px);
29
+ transform: translate(0px, 58.340508px);
27
30
  animation-timing-function: cubic-bezier(0.801, 0, 0.199, 1);
28
31
  }
29
- 40.336842% {
32
+ 41.373604% {
30
33
  transform: translate(0px, 0px);
31
34
  animation-timing-function: cubic-bezier(0.801, 0, 0.199, 1);
32
35
  }
@@ -35,18 +38,34 @@ svg {
35
38
  }
36
39
  }
37
40
 
41
+ @keyframes shared-opacity-1 {
42
+ 0% {
43
+ opacity: 0;
44
+ }
45
+ 1.736691% {
46
+ opacity: 0;
47
+ }
48
+ 1.737691% {
49
+ opacity: 1;
50
+ }
51
+ 100% {
52
+ opacity: 1;
53
+ }
54
+ }
55
+
38
56
  .Frame-1707483278 {
39
- transform-box: fill-box;
40
- transform-origin: 50% 50%;
41
- animation: Frame-1707483278-transform 2375ms linear infinite both;
57
+ transform-origin: 34px 34px;
58
+ animation:
59
+ Frame-1707483278-transform 2417ms linear infinite both,
60
+ shared-opacity-1 2417ms linear infinite both;
42
61
  }
43
62
 
44
63
  @keyframes Frame-1707483278-transform {
45
64
  0% {
46
- transform: translate(0px, 51.778772px);
65
+ transform: translate(0px, 53.865117px);
47
66
  animation-timing-function: cubic-bezier(0.801, 0, 0.199, 1);
48
67
  }
49
- 33.347368% {
68
+ 34.505585% {
50
69
  transform: translate(0px, 0px);
51
70
  animation-timing-function: cubic-bezier(0.801, 0, 0.199, 1);
52
71
  }
@@ -56,17 +75,18 @@ svg {
56
75
  }
57
76
 
58
77
  .Frame-1707483281 {
59
- transform-box: fill-box;
60
- transform-origin: 50% 50%;
61
- animation: Frame-1707483281-transform 2375ms linear infinite both;
78
+ transform-origin: 34px 24px;
79
+ animation:
80
+ Frame-1707483281-transform 2417ms linear infinite both,
81
+ shared-opacity-1 2417ms linear infinite both;
62
82
  }
63
83
 
64
84
  @keyframes Frame-1707483281-transform {
65
85
  0% {
66
- transform: translate(0px, 30px);
86
+ transform: translate(0px, 39.094881px);
67
87
  animation-timing-function: cubic-bezier(0.801, 0, 0.199, 1);
68
88
  }
69
- 26.315789% {
89
+ 27.596194% {
70
90
  transform: translate(0px, 0px);
71
91
  animation-timing-function: cubic-bezier(0.801, 0, 0.199, 1);
72
92
  }
@@ -74,6 +94,25 @@ svg {
74
94
  transform: translate(0px, 0px);
75
95
  }
76
96
  }
97
+
98
+ .fullwidth_new-2 {
99
+ animation: fullwidth_new-2-opacity 2417ms linear infinite both;
100
+ }
101
+
102
+ @keyframes fullwidth_new-2-opacity {
103
+ 0% {
104
+ opacity: 1;
105
+ }
106
+ 1.737691% {
107
+ opacity: 1;
108
+ }
109
+ 1.738691% {
110
+ opacity: 0;
111
+ }
112
+ 100% {
113
+ opacity: 0;
114
+ }
115
+ }
77
116
  </style>
78
117
  </head>
79
118
  <body>
@@ -108,7 +147,33 @@ svg {
108
147
  <g class="Frame-1707483277" fill="none">
109
148
  <g fill="none" clip-path="url(#clip1_4428_19355)">
110
149
  <path d="M 55 34.88889 L 55 53.11111 A 1.88889 1.88889 45 0 1 53.11111 55 L 14.88889 55 A 1.88889 1.88889 45 0 1 13 53.11111 L 13 34.88889 A 1.88889 1.88889 45 0 1 14.88889 33 L 53.11111 33 A 1.88889 1.88889 45 0 1 55 34.88889 Z" fill="var(--color-2)" />
111
- <g fill="none" filter="url(#filter1_f_4428_19355)">
150
+ <g fill="none">
151
+ <path d="M84.1484 62.3047L84.1484 23.5791L4.71411 23.5791L4.71411 62.3047L84.1484 62.3047Z" fill="url(#paint0_linear_4428_19355)" />
152
+ </g>
153
+ </g>
154
+ </g>
155
+ </g>
156
+ </g>
157
+ </g>
158
+ </g>
159
+ </g>
160
+ <g class="fullwidth_new-2" fill="none">
161
+ <g fill="none">
162
+ <g fill="none" clip-path="url(#clip0_4428_19355)">
163
+ <path display="none" d="M0 7.55556C0 3.38274 3.38274 0 7.55556 0H60.4444C64.6173 0 68 3.38274 68 7.55556V60.4444C68 64.6173 64.6173 68 60.4444 68H7.55556C3.38274 68 0 64.6173 0 60.4444V7.55556Z" fill="var(--color-1)" opacity="0.57" />
164
+ <g fill="none">
165
+ <rect display="none" x="0" y="0" width="68" height="68" fill="var(--color-1)" opacity="0.57" />
166
+ <g fill="none">
167
+ <g fill="none">
168
+ <path d="M 55 14.88889 L 55 33.11111 A 1.88889 1.88889 45 0 1 53.11111 35 L 14.88889 35 A 1.88889 1.88889 45 0 1 13 33.11111 L 13 14.88889 A 1.88889 1.88889 45 0 1 14.88889 13 L 53.11111 13 A 1.88889 1.88889 45 0 1 55 14.88889 Z" fill="var(--color-2)" />
169
+ </g>
170
+ <g fill="none">
171
+ <path d="M 55 24.88889 L 55 43.11111 A 1.88889 1.88889 45 0 1 53.11111 45 L 14.88889 45 A 1.88889 1.88889 45 0 1 13 43.11111 L 13 24.88889 A 1.88889 1.88889 45 0 1 14.88889 23 L 53.11111 23 A 1.88889 1.88889 45 0 1 55 24.88889 Z" fill="var(--color-3)" />
172
+ </g>
173
+ <g fill="none">
174
+ <g fill="none" clip-path="url(#clip1_4428_19355)">
175
+ <path d="M 55 34.88889 L 55 53.11111 A 1.88889 1.88889 45 0 1 53.11111 55 L 14.88889 55 A 1.88889 1.88889 45 0 1 13 53.11111 L 13 34.88889 A 1.88889 1.88889 45 0 1 14.88889 33 L 53.11111 33 A 1.88889 1.88889 45 0 1 55 34.88889 Z" fill="var(--color-2)" />
176
+ <g fill="none">
112
177
  <path d="M84.1484 62.3047L84.1484 23.5791L4.71411 23.5791L4.71411 62.3047L84.1484 62.3047Z" fill="url(#paint0_linear_4428_19355)" />
113
178
  </g>
114
179
  </g>