<div class="box box1"></div>
<div class="box box2">
<div class="box box2-1">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="640.000000pt" height="320.000000pt" viewBox="0 0 1280.000000 640.000000"
preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,640.000000) scale(0.100000,-0.100000)"
fill="#fff" stroke="none">
<path d="M10290 5793 c-101 -136 -200 -331 -236 -468 -23 -85 -27 -121 -27
-240 -1 -99 4 -160 16 -208 9 -38 17 -71 17 -74 0 -10 -2276 5 -2550 17 -251
11 -280 14 -327 35 -148 66 -218 202 -243 470 -17 177 -27 221 -57 245 -31 24
-54 25 -93 5 -67 -34 -215 -186 -409 -418 -68 -81 -124 -147 -126 -147 -2 0
-93 18 -202 40 -333 68 -616 144 -1288 345 -334 100 -552 145 -865 177 -160
16 -617 16 -780 0 -906 -92 -1666 -400 -2319 -941 -164 -136 -420 -393 -503
-504 -239 -322 -336 -681 -282 -1044 60 -408 296 -780 608 -957 l75 -43 -53
-16 c-67 -22 -132 -77 -147 -125 -22 -76 22 -162 168 -321 94 -101 167 -154
278 -200 363 -152 1085 -173 1993 -61 428 54 1038 173 1454 284 l126 34 7 -49
c47 -339 769 -905 1380 -1081 317 -91 534 -46 624 131 l20 38 -50 38 c-73 56
-215 210 -292 316 -58 81 -207 355 -207 381 0 4 17 1 38 -8 359 -157 846 -143
945 26 23 38 24 117 3 157 -13 27 -19 29 -118 41 -328 39 -463 151 -503 417
-8 55 -15 136 -15 180 l0 80 283 89 c1231 388 1912 644 2532 951 471 233 788
431 1199 747 20 16 25 13 146 -79 375 -284 763 -508 1215 -701 197 -84 1019
-412 1032 -412 9 0 37 40 31 44 -2 2 -49 41 -105 89 -96 81 -256 206 -743 582
-499 385 -794 664 -1006 951 -30 40 -62 75 -72 78 -33 11 -122 107 -158 172
-53 94 -98 238 -149 477 -58 267 -78 348 -118 470 -24 75 -35 97 -49 97 -11 0
-48 -40 -98 -107z"/>
</g>
</svg>
</div>
<div class="box box2-2">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="640.000000pt" height="320.000000pt" viewBox="0 0 1280.000000 640.000000"
preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,640.000000) scale(0.100000,-0.100000)"
fill="#fff" stroke="none">
<path d="M10290 5793 c-101 -136 -200 -331 -236 -468 -23 -85 -27 -121 -27
-240 -1 -99 4 -160 16 -208 9 -38 17 -71 17 -74 0 -10 -2276 5 -2550 17 -251
11 -280 14 -327 35 -148 66 -218 202 -243 470 -17 177 -27 221 -57 245 -31 24
-54 25 -93 5 -67 -34 -215 -186 -409 -418 -68 -81 -124 -147 -126 -147 -2 0
-93 18 -202 40 -333 68 -616 144 -1288 345 -334 100 -552 145 -865 177 -160
16 -617 16 -780 0 -906 -92 -1666 -400 -2319 -941 -164 -136 -420 -393 -503
-504 -239 -322 -336 -681 -282 -1044 60 -408 296 -780 608 -957 l75 -43 -53
-16 c-67 -22 -132 -77 -147 -125 -22 -76 22 -162 168 -321 94 -101 167 -154
278 -200 363 -152 1085 -173 1993 -61 428 54 1038 173 1454 284 l126 34 7 -49
c47 -339 769 -905 1380 -1081 317 -91 534 -46 624 131 l20 38 -50 38 c-73 56
-215 210 -292 316 -58 81 -207 355 -207 381 0 4 17 1 38 -8 359 -157 846 -143
945 26 23 38 24 117 3 157 -13 27 -19 29 -118 41 -328 39 -463 151 -503 417
-8 55 -15 136 -15 180 l0 80 283 89 c1231 388 1912 644 2532 951 471 233 788
431 1199 747 20 16 25 13 146 -79 375 -284 763 -508 1215 -701 197 -84 1019
-412 1032 -412 9 0 37 40 31 44 -2 2 -49 41 -105 89 -96 81 -256 206 -743 582
-499 385 -794 664 -1006 951 -30 40 -62 75 -72 78 -33 11 -122 107 -158 172
-53 94 -98 238 -149 477 -58 267 -78 348 -118 470 -24 75 -35 97 -49 97 -11 0
-48 -40 -98 -107z"/>
</g>
</svg>
</div>
</div>
<div class="box3"></div>body { background: skyblue; }
.box { width: 300px; }
.box1, .box3 { height: 2000px; }
.box2 { background: blue; position: relative; }
.box2-1 svg { width: 300px; height: auto; transform: rotateY(180deg); position: absolute; }
.box2-2 svg { width: 300px; height: auto; transform: rotateY(180deg); position: absolute; }
.box2-2 g { fill: #ccc; }gsap.registerPlugin(ScrollTrigger);
gsap.to(".box2-1", {
scrollTrigger: {
trigger: ".box2",
markers: true,
start: "top center",
scrub: true,
pin: true,
},
x: 200, duration: 4,
});
gsap.to(".box2-2", {
scrollTrigger: {
trigger: ".box2",
markers: true,
start: "top center",
scrub: 3,
pin: true,
},
x: 200, duration: 4,
});
External CSS
This Pen doesn't use any external CSS resources.