Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

HTML

            
              <section>
	<div id="portrait-container">
		<div id="hand-back"></div>
		<div id="portrait" class="svg-holder">
			<div>
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="670" height="520" viewBox="0 0 670 520">
					<defs>
						<clipPath id="scenery-clip-path">
							<path id="scenery-bounds" fill="none" d="M250 130h350v320H250z"/>
						</clipPath>
						<linearGradient id="linear-gradient" x1="1716.92" x2="1716.92" y1="400.6" y2="273.67" gradientUnits="userSpaceOnUse">
							<stop offset="0" stop-color="#2db3b5"/>
							<stop offset="1" stop-color="#46cdcf"/>
						</linearGradient>
						<linearGradient id="linear-gradient-2" x1="1810.46" x2="1810.46" y1="391.65" y2="280.41" gradientUnits="userSpaceOnUse">
							<stop offset=".01" stop-color="#317394"/>
							<stop offset="1" stop-color="#3d84a7"/>
						</linearGradient>
						<linearGradient id="linear-gradient-3" x1="1551.45" x2="1551.45" y1="411.53" y2="300.29" gradientTransform="matrix(-1 0 0 1 2645.7 0)" xlink:href="#linear-gradient-2"/>
						<linearGradient id="linear-gradient-4" x1="1487.53" x2="1487.53" y1="451" y2="297.41" gradientTransform="matrix(-1 0 0 1 2645.7 0)" gradientUnits="userSpaceOnUse">
							<stop offset=".01" stop-color="#90d9c2"/>
							<stop offset="1" stop-color="#abedd8"/>
						</linearGradient>
						<linearGradient id="linear-gradient-5" x1="436.51" x2="436.51" y1="402.27" y2="289.69" xlink:href="#linear-gradient"/>
					</defs>
					<path id="frame" fill="#d6773c" d="M200 80h450v420H200z"/>
					<g clip-path="url(#scenery-clip-path)">
						<path fill="#e8f1f5" d="M40-20h570v310H40z"/>
						<path fill="#bbd4e0" d="M40 290h570v120H40z"/>
						<path fill="#d1e2ea" d="M40 393h570v20H40z"/>
						<path fill="#a4c5d6" d="M40 398h570v55H40z"/>
						<g id="scenery">
							<path fill="#c6dbe5" d="M1627 95h410v200h-410z"/>
							<path fill="#c6dbe5" d="M1570 305h180v88h-180z"/>
							<path fill="#d1e2ea" d="M1815 218h50v77h-50z"/>
							<path fill="#d1e2ea" d="M1840 182.24a25 25 0 0 1 25 25v5h-50v-5a25 25 0 0 1 25-25z"/>
							<path fill="#c6dbe5" d="M1815 295h50v98h-50z"/>
							<path fill="#d1e2ea" d="M1560 145h200v160h-200z"/>
							<path fill="#d1e2ea" d="M1720 202h60v50h-60z"/>
							<path fill="#bbd4e0" d="M1720 248h60v4h-60z"/>
							<path fill="#d1e2ea" d="M1968 115h50v50h-50z"/>
							<path fill="#bbd4e0" d="M1968 161h50v4h-50z"/>
							<path fill="#d1e2ea" d="M1888 115h50v50h-50z"/>
							<path fill="#bbd4e0" d="M1888 161h50v4h-50z"/>
							<path fill="#d1e2ea" d="M1728 115h50v50h-50z"/>
							<path fill="#bbd4e0" d="M1728 161h50v4h-50z"/>
							<path fill="#d1e2ea" d="M1648 115h50v50h-50z"/>
							<path fill="#bbd4e0" d="M1648 161h50v4h-50z"/>
							<path fill="#d1e2ea" d="M1560 200h20v110h-20z"/>
							<path fill="#d1e2ea" d="M1740 200h20v110h-20z"/>
							<path fill="#a4c5d6" d="M1869.62 304a12.5 12.5 0 1 1 23.76 0"/>
							<path fill="#a4c5d6" d="M1869.62 333a12.5 12.5 0 1 1 23.76 0"/>
							<path fill="#a4c5d6" d="M1869.62 362a12.5 12.5 0 1 1 23.76 0"/>
							<path fill="#a4c5d6" d="M1786.62 304a12.5 12.5 0 1 1 23.76 0"/>
							<path fill="#a4c5d6" d="M1786.62 333a12.5 12.5 0 1 1 23.76 0"/>
							<path fill="#a4c5d6" d="M1786.62 362a12.5 12.5 0 1 1 23.76 0"/>
							<path fill="#bbd4e0" d="M1580 215h160v90h-160z"/>
							<path fill="#bbd4e0" d="M1550 135h220v70h-220z"/>
							<path fill="#c6dbe5" d="M2037 95h-410l205-80 205 80z"/>
							<path fill="#bbd4e0" d="M2044.29 98.14L1832 15V8.2l214.33 84.34-2.04 5.6z"/>
							<path fill="#bbd4e0" d="M1619.71 98.14L1832 15V8.2l-214.33 84.34 2.04 5.6z"/>
							<g>
								<path fill="#d1e2ea" d="M1888 202h130v70h-130z"/>
								<path fill="#bbd4e0" d="M1888 268h130v4h-130z"/>
							</g>
							<path fill="#a4c5d6" d="M1915 305a40 40 0 1 1 76 0"/>
							<g>
								<path fill="#d1e2ea" d="M2027 253h20v90h-20z"/>
								<circle cx="2037" cy="213" r="70" fill="#a4c5d6"/>
							</g>
							<g>
								<path fill="#d1e2ea" d="M1497 253h20v90h-20z"/>
								<circle cx="1507" cy="213" r="70" fill="#a4c5d6"/>
							</g>
							<g>
								<path fill="#c6dbe5" d="M1049.21 185h300v110h-300z"/>
								<path fill="#c6dbe5" d="M1349.21 185h-300l150-80 150 80z"/>
								<path fill="#bbd4e0" d="M1044.25 187.65L1199.21 105v-6.8l-157.79 84.15 2.83 5.3z"/>
								<path fill="#d1e2ea" d="M949.21 195h150v110h-150z"/>
								<path fill="#d1e2ea" d="M1099.21 195h-150l75-40 75 40z"/>
								<path fill="#d1e2ea" d="M1199.21 218h50v77h-50z"/>
								<path fill="#bbd4e0" d="M1194.21 212.12h60v6h-60z"/>
								<path fill="#d1e2ea" d="M1275.21 212.12h50v40h-50z"/>
								<path fill="#bbd4e0" d="M1275.21 248.12h50v4h-50z"/>
								<path fill="#d1e2ea" d="M1125.21 212.12h50v40h-50z"/>
								<path fill="#bbd4e0" d="M1125.21 248.12h50v4h-50z"/>
								<path fill="#bbd4e0" d="M969.21 215h110v90h-110z"/>
								<path fill="#c6dbe5" d="M969.21 305h110v88h-110z"/>
								<path fill="#c6dbe5" d="M1199.21 295h50v98h-50z"/>
								<path fill="#d1e2ea" d="M949.21 200h20v110h-20z"/>
								<path fill="#d1e2ea" d="M1079.21 200h20v110h-20z"/>
								<path fill="#c6dbe5" d="M1099.21 265h100v35h-100z"/>
								<path fill="#c6dbe5" d="M1249.21 265h100v35h-100z"/>
								<path fill="#bbd4e0" d="M1354.17 187.65L1199.21 105v-6.8L1357 182.35l-2.83 5.3z"/>
								<path fill="#bbd4e0" d="M1104.21 197.65l-80-42.65v-6.8l82.83 44.15-2.83 5.3z"/>
								<path fill="#bbd4e0" d="M944.21 197.65l80-42.65v-6.8l-82.83 44.15 2.83 5.3z"/>
								<path fill="#d1e2ea" d="M1294.21 342h6v20h-6z"/>
								<path fill="#d1e2ea" d="M1282.21 322h30v20h-30z"/>
								<path fill="#a4c5d6" d="M1290.76 342h-8.55v-5.49l21.63-14.51h8.37v5.6l-21.45 14.4z"/>
								<g fill="#d1e2ea">
									<path d="M1293.34 336a1.81 1.81 0 0 1 .33.93 1.79 1.79 0 0 1-.27 1 2.87 2.87 0 0 1-.84.87 5.2 5.2 0 0 1-.83.49 4.19 4.19 0 0 1-.82.24l-.79-1.13a3.9 3.9 0 0 0 1-.24 3.43 3.43 0 0 0 .79-.4.8.8 0 0 0 .34-.39.34.34 0 0 0 0-.34.36.36 0 0 0-.17-.13 1 1 0 0 0-.28 0l-.83.14a3.22 3.22 0 0 1-1 .08 1.55 1.55 0 0 1-.65-.2 1.86 1.86 0 0 1-.53-.52 1.43 1.43 0 0 1-.24-1.34 2.51 2.51 0 0 1 1-1.27 4.39 4.39 0 0 1 1.71-.71l.31 1.25a3.41 3.41 0 0 0-1.35.5.66.66 0 0 0-.29.33.32.32 0 0 0 0 .3.36.36 0 0 0 .31.14 5.53 5.53 0 0 0 1-.15 2.75 2.75 0 0 1 1.25 0 1.55 1.55 0 0 1 .85.55z"/>
									<path d="M1297.77 331.47a3.05 3.05 0 0 1 .69 2.2 2.75 2.75 0 0 1-1.26 1.81 2.71 2.71 0 0 1-2.12.57 3.69 3.69 0 0 1-2.52-3.57 3.21 3.21 0 0 1 3.37-2.39 3.09 3.09 0 0 1 1.84 1.38zm-3.21 2.27c.64.9 1.27 1.13 1.9.69a1 1 0 0 0 .48-.83 2.19 2.19 0 0 0-.5-1.19 2.29 2.29 0 0 0-1-.87 1 1 0 0 0-.94.17c-.59.44-.58 1.12.06 2.03z"/>
									<path d="M1300.27 333.21l-3.3-4.66 1.26-.89 2.58 3.64 1.79-1.26.72 1z"/>
									<path d="M1306.31 325.29a3 3 0 0 1 .63 2.26 3.06 3.06 0 0 1-1.36 1.91l-1.51 1.06-3.3-4.66 1.61-1.14a3 3 0 0 1 2.14-.65 2.66 2.66 0 0 1 1.79 1.22zm-1.28 1a1.85 1.85 0 0 0-.93-.77 1.17 1.17 0 0 0-1 .24l-.37.26 1.85 2.61.28-.2a1.24 1.24 0 0 0 .6-.93 2 2 0 0 0-.46-1.24z"/>
								</g>
								<path fill="#a4c5d6" d="M1276.46 305a25 25 0 1 1 48.75-7.81A25.19 25.19 0 0 1 1324 305"/>
								<path fill="#a4c5d6" d="M1126.46 305a25 25 0 1 1 48.75-7.81A25.19 25.19 0 0 1 1174 305"/>
							</g>
							<g>
								<path fill="#c6dbe5" d="M449 31h360v305H449z"/>
								<path fill="#d1e2ea" d="M544 256h180v79.89H544z"/>
								<path fill="#c6dbe5" d="M593.55 294.55h79.89v3h-79.89z" transform="rotate(90 633.5 296.06)"/>
								<path fill="#c6dbe5" d="M640.55 295.55h79.89v1h-79.89z" transform="rotate(90 680.5 296.05)"/>
								<path fill="#c6dbe5" d="M548.55 295.55h79.89v1h-79.89z" transform="rotate(90 588.5 296.05)"/>
								<path fill="#d1e2ea" d="M484 142h290v70H484z"/>
								<path fill="#bbd4e0" d="M484 211h290v1H484z"/>
								<path fill="#bbd4e0" d="M484 142h290v1H484z"/>
								<g>
									<path fill="#d1e2ea" d="M484 41h290v70H484z"/>
									<path fill="#bbd4e0" d="M484 110h290v1H484z"/>
									<path fill="#bbd4e0" d="M484 41h290v1H484z"/>
								</g>
								<g>
									<path fill="#d1e2ea" d="M179 31h250v300H179z"/>
									<path fill="#c6dbe5" d="M259 253.88h90v77h-90z"/>
									<path fill="#d1e2ea" d="M179 253.88h80v82h-80z"/>
									<path fill="#d1e2ea" d="M349 253.88h80v82h-80z"/>
									<path fill="#bbd4e0" d="M254 248h100v6H254z"/>
									<path fill="#c6dbe5" d="M199 147h80v60h-80z"/>
									<path fill="#bbd4e0" d="M199 203h80v4h-80z"/>
									<path fill="#c6dbe5" d="M329 147h80v60h-80z"/>
									<path fill="#bbd4e0" d="M329 203h80v4h-80z"/>
									<path fill="#c6dbe5" d="M199 47h80v60h-80z"/>
									<path fill="#bbd4e0" d="M199 103h80v4h-80z"/>
									<path fill="#c6dbe5" d="M329 47h80v60h-80z"/>
									<path fill="#bbd4e0" d="M329 103h80v4h-80z"/>
									<path fill="#bbd4e0" d="M265 292h77v1h-77z" transform="rotate(90 303.5 292.5)"/>
									<path fill="#c6dbe5" d="M348 227.1h6v6h-6z"/>
									<path fill="#c6dbe5" d="M254 227.1h6v6h-6z"/>
									<path fill="none" stroke="#bbd4e0" stroke-miterlimit="10" d="M351 248.89V230.1"/>
									<path fill="none" stroke="#bbd4e0" stroke-miterlimit="10" d="M257 248.89V230.1"/>
								</g>
							</g>
						</g>
						<g id="people">
							<g id="family">
								<g id="fam-arm-m">
									<path fill="#3D84A7" d="M1793.8 270.7c-1.5 0-2.6.1-3.7.4-1 .2-2 .6-3.2 1.3-1.2.7-2.6 1.8-4 3.3-1.5 1.5-3 3.3-4.7 5.5-3.3 4.3-6.6 9.6-10.8 15.3-2.1 2.9-4.4 5.9-7.1 8.9-2.7 3-5.8 6-9.5 8.7-3.7 2.7-8 5.1-12.7 6.7-4.6 1.5-9.5 2.2-14 2.2s-8.7-.6-12.7-1.6c-3.9-1-7.5-2.2-11-3.6-6.8-2.9-12.8-6.4-18.5-10.2-5.6-3.8-10.9-7.9-15.9-12.2-3.7-3.2-4-8.7-.9-12.4 2.6-3 6.9-3.8 10.3-2.2h.1c5.6 2.6 11.2 5.1 16.7 7.3 2.8 1.1 5.5 2.1 8.2 2.9 2.7.9 5.4 1.6 8 2.1 2.6.6 5.1.9 7.4 1 2.3.1 4.5 0 6.3-.4 3.7-.8 5.7-2.2 8.2-4.6 2.4-2.5 5-6.5 7.7-11.4 1.3-2.4 2.7-5.1 4.2-8 1.5-2.8 3.1-5.8 5-9 1.9-3.1 4-6.4 6.7-9.7 2.6-3.3 5.8-6.7 9.8-9.7 3.9-3.1 8.6-5.7 13.5-7.5 5-1.8 10.1-2.7 15-3h.6c11-.5 20.4 8 20.9 19.1s-8 20.4-19.1 20.9c0-.1-.5-.1-.8-.1z"/>
									<path fill="#ECCD8E" d="M1680.6 279.5l-5.4 11.1c-.8 1.7-2.9 2.4-4.6 1.6l-2.2-1.1c-4.8-2.3-6.8-8.1-4.4-12.9 2.3-4.8 8.1-6.8 12.9-4.4l2.2 1.1c1.6.8 2.3 2.8 1.5 4.6z"/>
								</g>
								<path fill="#b84242" d="M1712 184.92a33.72 33.72 0 0 1 33.72 33.72v41.28h-67.43v-41.29a33.72 33.72 0 0 1 33.71-33.71z"/>
								<path fill="#abedd8" d="M1671.92 387.87h90v63h-90z"/>
								<path fill="url(#linear-gradient)" d="M1761.92 392.57c0 10.05-90 10.32-90 2.74v-95a45 45 0 0 1 45-45 45 45 0 0 1 45 45z"/>
								<path fill="#47466d" d="M1755.48 378.87h110v72h-110z"/>
								<path fill="#eccd8e" d="M1862.75 415.84h18.62v14.98h-18.62z" transform="rotate(85.48 1872.02 423.285)"/>
								<path fill="#eccd8e" d="M1873.24 424.84l6.63 2.24s2.25 6 2.37 9.94c.11 3.46-.83 11.35-4.22 12.74a17.4 17.4 0 0 1-10.5.76c-3.65-1.13-3.86-10.22-4-13s1.45-9.23 1.45-9.23z"/>
								<path fill="url(#linear-gradient-2)" d="M1865.48 383.8c0 10.26-110 19.93-110 4.51 0 0-.92-71.18 6-106.81 4.71-20.21 22.51-53.19 50.29-53.19h3.43c27.77 0 50.28 23.82 50.28 53.19z"/>
								<path fill="#82552e" d="M1767.35 358.22v-24.1h-5v27c0 3.23 4 6 8 6v-3.07a4.4 4.4 0 0 0-1.83-3.46 3 3 0 0 1-1.17-2.37z"/>
								<path fill="#0e0d36" d="M1752.37 365.87h2a34 34 0 0 1 34 34v51h-70v-51a34 34 0 0 1 34-34z"/>
								<path fill="#d4a47b" d="M1763.35 367c0 5.12-20 5.12-20 0v-18.27h20z"/>
								<path fill="#e0c180" d="M1831.16 231.05a35.74 35.74 0 0 1 6.11 2.65L1810 254.42l-19.62-23.49 5.82-.78v-33h35z"/>
								<path fill="#eccd8e" d="M1838.91 190.48c0 19.21-4.39 34.78-27.41 34.78s-23.42-15.57-23.42-34.78-2-34.77 23.42-34.77 27.41 15.57 27.41 34.77z"/>
								<rect width="4.66" height="16" x="1786.75" y="181.87" fill="#eccd8e" rx="2.33"/>
								<path fill="#a89788" d="M1830.92 171h10v18.9h-2.22a7.78 7.78 0 0 1-7.78-7.78V171z"/>
								<path fill="#a89788" d="M1787.92 171h4v14.9a4 4 0 0 1-4 4V171z"/>
								<path fill="#231f20" d="M1825.67 155.71h-22.49a15.26 15.26 0 0 0-15.26 15.29h4a5.85 5.85 0 0 1 5.85-5.84h27.31a5.84 5.84 0 0 1 5.84 5.84h10a15.25 15.25 0 0 0-15.25-15.29z"/>
								<path fill="#3d84a7" d="M1836.93 233.64c1.44.05 2.9.17 4.33.36a38.84 38.84 0 0 1 4.17 1 30.73 30.73 0 0 1 7.09 3.26c.51.31 1.06.64 1.52 1l1.3 1a26.68 26.68 0 0 1 2.38 2c.69.66 1.4 1.35 2 2s1.13 1.31 1.69 2 1 1.3 1.47 1.93.94 1.3 1.32 1.9c.76 1.21 1.57 2.47 2.17 3.62l.95 1.77.83 1.7c.58 1.16 1 2.25 1.51 3.36a103.65 103.65 0 0 1 4.33 12.69c1.15 4.1 2.07 8.12 2.87 12.09s1.45 7.9 2.06 11.8 1.06 7.78 1.5 11.65c.9 7.72 1.49 15.38 2 23 .94 15.26 1.17 30.42 1 45.54-.13 7.56-.35 15.1-.73 22.64s-.85 15-1.61 22.67l-17.42.26c-2.06-14.58-4-29.33-6.2-43.9s-4.41-29.09-7-43.39c-1.31-7.14-2.74-14.22-4.27-21.19s-3.26-13.79-5.19-20.32c-1-3.25-2-6.42-3.11-9.41a82.06 82.06 0 0 0-3.51-8.2c-.3-.59-.6-1.19-.9-1.68l-.44-.78-.43-.65c-.29-.49-.55-.75-.79-1.11a3.08 3.08 0 0 0-.32-.36c-.1-.1-.2-.26-.25-.26a.53.53 0 0 1-.16-.13.12.12 0 0 0 0 .1 2.72 2.72 0 0 0 .24.26 1.33 1.33 0 0 0 .19.14l.32.25a8.84 8.84 0 0 0 2 .93 6.4 6.4 0 0 0 1.45.35 5.46 5.46 0 0 0 1.56.13z"/>
								
								<rect width="4.66" height="16" x="1837.55" y="181.87" fill="#eccd8e" rx="2.33"/>
								<g id="fam-arm-l">
									<path fill="#F5E0CD" d="M1715 385.9s4.4 4.4 8.2 5.7c2.6.9 8.8 1.7 10.5-.5 2.3-3 2.7-6.6 2.8-7.8.3-3.6-6.3-2.7-6.7-6.6-.4-3.5-6.9-1.7-9.9.2l-4.9 9z"/>
									<path fill="#F5E0CD" d="M1703.8 281.7c-5.4 10.7-11.3 21-16.1 30.9-2.4 5-4.5 9.8-5.9 14.6-1.4 4.7-2.1 9.2-1.8 13.7 0 .6.1 1.1.1 1.7l.2 1.7.3 1.7c.1.4.1.7.2 1.1.4 1.5 1.3 3.2 2.6 5 2.5 3.5 6.4 7 10.7 10.1 8.7 6.3 19.1 11.6 29.4 16.2l-2.6 9.5c-3.2-.5-6.1-1.1-9.1-1.8s-6-1.5-8.9-2.5c-3-.9-5.9-2-8.8-3.1-2.9-1.2-5.8-2.5-8.7-4-5.7-3-11.4-6.7-16.6-12.2-2.5-2.8-4.9-6.1-6.6-10.1-.4-1-.8-2-1.1-3.1l-.7-2.6-.6-2.7c-.1-.9-.3-1.8-.4-2.7-1-7.3-.3-14.7 1.3-21.4 1.6-6.7 4-12.8 6.5-18.5 2.6-5.7 5.3-11.2 8-16.4 2.7-5.3 5.5-10.4 8.2-15.6l20.4 10.5z"/>
									<path fill="#46CDCF" d="M1697.4 305.6c-.8 2.3-3.3 3.5-5.6 2.8l-22.2-6.8c-2.2-.5-3.5-2.8-2.9-5 3.8-12.6 12.2-22.7 17.7-27.2l23.7 7.2-10.7 29z"/>
								</g>
								<path fill="#ebcfb7" d="M1682.74 271a45 45 0 0 1 68.22-.15c-7.78 13.72-53.27 13.15-68.22.15z"/>
								<path fill="#ebcfb7" d="M1728.64 257.71c-4 4.6-18.91 4.6-25 .26v-35.21h25z"/>
								<path fill="#dfb28b" d="M1753 313.11h.75a19.62 19.62 0 0 1 19.62 19.62v10.38a20 20 0 0 1-20 20 20 20 0 0 1-20-20v-10.38a19.62 19.62 0 0 1 19.63-19.62z"/>
								<path fill="#82552e" d="M1774.85 332.11h-13.58a7.92 7.92 0 0 1-7.92-7.91 7.91 7.91 0 0 1-7.91 7.91h-13.59c0-10.5 9.19-19 20.53-19h1.95c11.34 0 20.52 8.5 20.52 19z"/>
								<path fill="#82552e" d="M1772.32 339h2.53v-6.92h-9.46a6.93 6.93 0 0 1 6.93 6.92z"/>
								<rect width="3" height="10" x="1771.85" y="336.39" fill="#dfb28b" rx="1.32"/>
								<path fill="#82552e" d="M1734.39 339h-2.54v-6.92h9.47a6.92 6.92 0 0 0-6.93 6.92z"/>
								<rect width="3" height="10" x="1731.85" y="336.39" fill="#dfb28b" rx="1.32"/>
								<rect width="4" height="13" x="1735.47" y="217.47" fill="#f5e0cd" rx="1.95"/>
								<path fill="#f5e0cd" d="M1738.47 224.08c0 17-8.91 31-17.5 31.78-10.38 1-27.5-11.87-27.5-30.78 0-17 3.56-30.78 26.5-30.78 16.13 0 18.5 12.78 18.5 29.78z"/>
								<rect width="4" height="13" x="1691.47" y="217.47" fill="#f5e0cd" rx="1.95"/>
								<path fill="#b84242" d="M1690.92 228.1v-16.51a17.63 17.63 0 0 1 17.64-17.59h9.36c-.11 15.37-9.73 26.69-27 34.1z"/>
								<path fill="#b84242" d="M1741.81 228.1v-16.51a17.63 17.63 0 0 0-17.63-17.59h-9.37c.12 15.37 9.24 24.44 27 34.1z"/>
							</g>
							<g id="couple">
								<path fill="#231f20" d="M1133.17 204.8h67.43v81.28a33.72 33.72 0 0 1-33.72 33.72 33.72 33.72 0 0 1-33.72-33.72V204.8h.01z" transform="rotate(180 1166.89 262.295)"/>
								<path fill="#3d84a7" d="M1112.28 250.64a54.9 54.9 0 0 1 11.53 1.85 46.12 46.12 0 0 1 11.82 5.1 44.13 44.13 0 0 1 9.9 8.3 50.79 50.79 0 0 1 6.62 9.47 83.07 83.07 0 0 1 6.73 17.16c1.5 5.08 2.61 9.67 3.77 13.11a41.94 41.94 0 0 0 1.6 4.1c.21.54.4.86.54 1.22s.24.56.35.74.11.18.16.31a2.82 2.82 0 0 0 .24.29 1.94 1.94 0 0 0 .36.33l.23.17.3.14a9.67 9.67 0 0 0 3.78.78 43.58 43.58 0 0 0 11.88-1.46c4.37-1 8.89-2.44 13.5-3.93l.15-.05a8.84 8.84 0 0 1 8.26 15.33 104 104 0 0 1-13.52 9.12 76.51 76.51 0 0 1-7.8 3.86 58 58 0 0 1-9.09 2.93 38.27 38.27 0 0 1-11.18.83l-1.55-.14c-.53-.07-1.07-.17-1.6-.26a28.38 28.38 0 0 1-3.24-.74c-1.08-.3-2.16-.72-3.23-1.13a33 33 0 0 1-3.11-1.51 34.26 34.26 0 0 1-5.58-3.85 40.66 40.66 0 0 1-4.4-4.41 54.51 54.51 0 0 1-6-8.79c-3.15-5.6-5.23-10.53-7.26-14.8a55.72 55.72 0 0 0-5.75-10.09 14.21 14.21 0 0 0-2.43-2.47 6.12 6.12 0 0 0-1.86-.94 13.89 13.89 0 0 0-2.09-.42 27.29 27.29 0 0 0-3.31-.17 20 20 0 1 1-.38-40h1.29z"/>
								<path fill="#ecc19c" d="M1192.64 301.69h12.31a3.46 3.46 0 0 1 3.46 3.46v2.48a9.61 9.61 0 0 1-9.61 9.61 9.61 9.61 0 0 1-9.61-9.61v-2.48a3.46 3.46 0 0 1 3.46-3.46z" transform="rotate(-115.95 1198.749 309.5)"/>
								<path fill="#a8895c" d="M1147.61 280.75l25 .25v-34h-25v33.75z"/>
								<path fill="#b3956a" d="M1136.24 244c0 17 4.91 30 13.5 30.78 10.38 1 31.5-10.87 31.5-29.78 0-17-5.56-30.79-28.5-30.79-16.13-.04-16.5 12.79-16.5 29.79z"/>
								<path fill="#357a9c" d="M1041.23 400h108v51h-108z" transform="rotate(180 1095.23 425.5)"/>
								<path fill="url(#linear-gradient-3)" d="M1039.23 403.68c0 10.26 110 19.93 110 4.51 0 0 .92-71.18-6-106.81-4.71-20.21-22.51-53.19-50.29-53.19h-3.43c-27.77 0-50.28 23.81-50.28 53.19z"/>
								<path fill="#47466d" d="M1086.51 316.84l16.88.12"/>
								<path fill="url(#linear-gradient-4)" d="M1161.61 275.19c21 0 36.63 20.31 36.63 45.16 0 7.95-10.67 36.42-10.94 52.74a137.37 137.37 0 0 0 5.31 38.91 155.75 155.75 0 0 1 5 39h-75c0-19.37 4.5-40 5.18-58.35.7-19-1.49-35.46-5.2-41-8.22-12.32-3.31-24.89.33-33.9 3.56-8.81 17.7-42.56 38.69-42.56z"/>
								<path fill="#46cdcf" d="M1113.89 285.4l-14.25 34.53-21.71-30.37-11.13-35.64a47 47 0 0 1 6.75-3l35-.31a54.79 54.79 0 0 1 7.39.35z"/>
								<path fill="#2e6a88" d="M1099.64 319.93c13.9-12.33 20.91-28.38 24.57-41.95l-5.46-3.74 6.65-1.11a152.85 152.85 0 0 0 2.91-19.15 50 50 0 0 0-12.37-3c-3.53 28.82-8.18 49.29-16.3 68.95z"/>
								<path fill="#dfb28b" d="M1073.55 250.93l20.7 10.4 14.3-10.57v-33.73h-35v33.9z"/>
								<path fill="#ecc19c" d="M1066.8 210.36c0 19.21 3.39 34.78 26.41 34.78s23.42-15.57 23.42-34.78 2-34.77-23.42-34.77-26.41 15.57-26.41 34.77z"/>
								<rect width="4.66" height="16" x="1113.3" y="201.75" fill="#ecc19c" rx="2.33" transform="rotate(180 1115.63 209.745)"/>
								<path fill="#82552e" d="M1064.91 194h10v15h-10z" transform="rotate(180 1069.905 201.5)"/>
								<path fill="#82552e" d="M1112.91 194h4v15h-4z" transform="rotate(180 1114.905 201.5)"/>
								<path fill="#82552e" d="M1116.9 190.33v4.26h-52v-2.26a16.73 16.73 0 0 1 16.74-16.74h20.48a14.77 14.77 0 0 1 14.78 14.74z"/>
								<rect width="4.66" height="16" x="1064.5" y="201.75" fill="#ecc19c" rx="2.33" transform="rotate(180 1066.825 209.745)"/>
								<path fill="#a8895c" d="M1189.61 290.91s-9.28-15.72-28-15.72c-14.28 0-24.17 15.56-24.17 15.56 3.85 18.25 45.3 19.42 52.17.16z"/>
								
								<g id="coup-arm-m">
									<path fill="#ECC19C" d="M1134.8 378h18.6v15h-18.6z" transform="rotate(.992 1144.18 385.387) scale(1.00005)"/>
									<path fill="#46CDCF" d="M1139.5 376.9l.3 16.8 5.5.1.4-16.3z"/>
									<path fill="#ECC19C" d="M1145.7 386.6l2.6 6.5s6.1 1.9 10.1 1.8c3.5-.1 11.3-1.5 12.5-5 1.6-4.6.6-9.1.1-10.5-1.4-3.6-10.4-3.2-13.3-3.2s-9.1 2-9.1 2l-2.9 8.4z"/>
									<path fill="#3D84A7" d="M1081.3 293.2c-4.3 4.4-8.2 8.9-11.2 13.6-3 4.7-5.1 9.5-6.3 14.2-1.2 4.7-1.2 9.1-.2 13.5.1.3.1.6.2.8l.3.8c.2.5.4 1.1.5 1.6l.7 1.6c.2.5.4 1.1.8 1.6l.9 1.6c.3.6.7 1 1 1.6.4.5.7 1.1 1.1 1.6l1.3 1.5c3.4 4.1 8 7.9 13.3 11.2 5.3 3.2 11.3 6.1 17.6 8.4l2.4.9c.8.3 1.6.6 2.4.8l4.9 1.5 5 1.4c.8.2 1.7.5 2.5.7l2.6.6c6.8 1.7 13.9 2.7 21.1 3.9l-.4 17.4c-7.7.6-15.5 1-23.4.6l-3-.1c-1-.1-2-.1-3-.2-2-.2-4-.3-6-.5l-6-.8c-1-.1-2-.3-3-.5l-3-.6c-8-1.6-16.1-3.8-24.1-7.3-7.9-3.5-15.8-8.1-22.9-14.6l-2.6-2.5c-.9-.8-1.7-1.8-2.5-2.7-.8-.9-1.7-1.8-2.4-2.8l-2.2-3c-.8-1-1.4-2.1-2.1-3.2-.7-1.1-1.3-2.2-1.9-3.3l-1.7-3.5-.8-1.8c-.2-.6-.5-1.2-.7-1.8l-1.3-3.7c-.4-1.2-.7-2.5-1-3.8-.7-2.5-1-5.1-1.3-7.7-.2-1.3-.2-2.6-.2-3.9 0-1.3-.1-2.6-.1-3.9.1-2.5.2-5.1.6-7.6.2-1.2.3-2.5.6-3.7l.8-3.6c.5-2.5 1.3-4.7 2.1-7 .3-1.2.8-2.3 1.3-3.4l1.4-3.3c1-2.1 2-4.2 3.1-6.3 4.5-8.2 9.8-15.4 15.8-21.9l29 27.6z"/>
								</g>
								<path fill="#2e6a88" d="M1099.64 319.93c-18-14.33-28.16-25.54-35.39-40.57l5-4.17-6.67.5a138.81 138.81 0 0 1-5.4-15 49.39 49.39 0 0 1 11.32-7.61c7.07 26.28 15.81 44.39 31.14 66.85z"/>
								<g id="coup-arm-l">
									<path fill="#B3956A" d="M1091.3 326.6s-6.9-5.6-9.6-9.4c-1.8-2.5-7.3-11.4-4.2-14.8 3-3.2 6.1-2 7.9-.8 1.7 1.2 3.2 3.3 5.4 4.6 2 1.3 4.6-1.1 6.5 2.1 1.8 3 1.1 11.8 1.1 11.8l-7.1 6.5z"/>
									<path fill="#B3956A" d="M1173.7 310c.4 6.1.3 12.3-.1 18.4-.4 6.2-1.2 12.3-2.6 18.6-1.4 6.2-3.2 12.5-6.6 19-.9 1.6-1.9 3.3-3.1 5-1.2 1.7-2.7 3.4-4.6 5-1.9 1.6-4.4 3.1-7.3 4.1-2.9.9-5.9 1-8.6.7-2.7-.4-4.9-1.2-6.9-2.1-1.9-.9-3.6-1.9-5.1-3-3-2.1-5.5-4.4-7.7-6.7-2.3-2.3-4.3-4.6-6.2-7-1.9-2.4-3.7-4.7-5.5-7.1-3.5-4.8-6.7-9.6-9.9-14.5-3.1-4.9-6.2-9.8-9.1-14.7l7.8-6c8.2 8.2 15.8 16.9 23.6 24.9 3.8 4 7.8 7.8 11.7 11.1 2 1.6 3.9 3 5.7 4 1.8 1 3.4 1.5 3.8 1.3.2 0 .1-.1-.1-.1s-.2 0 0-.3c.5-.6 1.5-2.1 2.3-4 .8-1.9 1.6-4.1 2.2-6.4.6-2.3 1.1-4.8 1.6-7.3 1.7-10.1 2-21 1.6-31.6l23.1-1.3z"/>
									<path fill="#ABEDD8" d="M1143.2 337.5l35 3.3s6.2-38-14.7-38.7c-20.9-.8-20.3 35.4-20.3 35.4z"/>
									<path fill="#E0AB2D" d="M1082.9 306h1v5h-1z" transform="rotate(45.001 1083.414 308.49)"/>
									<path fill="#F1F1F2" d="M1081.9 307h3v3h-3z" transform="rotate(45.001 1083.414 308.49)"/>
								</g>
								
								<path fill="#231f20" d="M1168.26 242h19.35v-21.55a11.28 11.28 0 0 0-11.28-11.28h-24.76l-11.12 8.77-4.7 10.88c3.72 11.07 18.91 13.18 32.51 13.18z"/>
								<g fill="#47466d">
									<path d="M1093 264.25l-10.88 4.39-1.4-15.97 12.05 6.18.23 5.4z"/>
									<path d="M1095.27 264.16l11.45 4.14-.74-14.7-10.71 5.58v4.98z"/>
									<path d="M1096.77 264.57l-5.03.03.12-6.16h4.79l.12 6.13z"/>
								</g>
								<path fill="#231f20" d="M1187.61 241a13 13 0 0 1 13 13v74h-26v-74a13 13 0 0 1 13-13z" transform="rotate(180 1187.61 284.5)"/>
								<path fill="#82552e" d="M1074.91 198.17v-3.58h22c-4.91 3.3-11.91 3.58-22 3.58z"/>
								<path fill="#82552e" d="M1112.91 198.17c-6.62 0-12.06-1.21-16-3.58h16z"/>
							</g>
							<g id="individual">
								<path fill="none" stroke="#d6773c" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M370.53 375.61c7.14-48.66 13.86-91.24 27.3-109"/>
								<path fill="#357a9c" d="M379.6 401h114v50h-114z"/>
								<path fill="none" stroke="#d6773c" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M460.16 251.91c-1.44-3.14-3.64-5.14-5.67-5.66"/>
								<path fill="url(#linear-gradient-5)" d="M437.15 248.1c-44.89-.06-60.62 33.83-60.62 46 0 25.14 2 118.24 2 118.24a866.86 866.86 0 0 0 117.23 0s.74-85.42.74-115.24c0-12-9.72-48.94-59.35-49z"/>
								<path fill="#47466d" d="M429.23 284.65l.77 118.69 9 8 7.92-8 .17-118.82a8.92 8.92 0 0 0-8.92-9 8.92 8.92 0 0 0-8.94 9.13z"/>
								<path fill="#ad4f28" d="M442.77 448.13l-80.9-14.26a2.46 2.46 0 0 1-1.95-2.88l1.77-10.07L447.37 436l-1.78 10.07a2.45 2.45 0 0 1-2.82 2.06z"/>
								<path fill="#d6773c" d="M448.35 437.1l-87.94-15.51 8.4-47.64a1.62 1.62 0 0 1 1.88-1.32l84.74 14.94a1.63 1.63 0 0 1 1.32 1.89z"/>
								<path fill="#c26429" d="M392.54 414.9h26.65v9.63h-26.65z" transform="rotate(-80 405.865 419.714)"/>
								<path fill="none" stroke="#e0ab2d" stroke-miterlimit="10" stroke-width="2" d="M396.791 431.638l1.325-7.514 13.374 2.358-1.325 7.514z"/>
								<path fill="#c26429" d="M398.98 428.44h9v9.63h-9z" transform="rotate(-80 403.477 433.256)"/>
								<path fill="#9c7761" d="M492.3 418.56l5.67-16.25-13.91-4.53-5.66 16.25 13.9 4.53z"/>
								<path fill="#9c7761" d="M486.75 413.5l5.55 5.06s1.33 7-.67 11.51c-1.87 4.25-6.36 12.44-10.43 13.59a11.35 11.35 0 0 1-10.86-3.28c-1.17-1.4-.94-7.64.55-11.82s4.56-7.38 5.56-9.59c.52-1.13 1.19-3 1.95-4.94.7-1.84 8.35-.53 8.35-.53z"/>
								<path fill="#357a9c" d="M477.31 414.36l-15.76 1.7V451h32.05v-17.4l-16.29-19.24z"/>
								<path fill="#46cdcf" d="M481.37 263.81a85.72 85.72 0 0 1 8.2 8c2.43 2.7 4.63 5.45 6.72 8.22a142.52 142.52 0 0 1 11 17.27 137.32 137.32 0 0 1 8.51 18.79 99.74 99.74 0 0 1 3.11 10.38 69.79 69.79 0 0 1 1.86 11.64l.08 1.58v1.76c0 1.21 0 2.22-.09 3.29a57.37 57.37 0 0 1-.67 5.81 93.21 93.21 0 0 1-2.25 10.21 188.79 188.79 0 0 1-6.21 18.3c-2.29 5.87-4.8 11.56-7.41 17.18s-5.37 11.08-8.44 16.61l-16.14-6.55c1.4-5.64 2.87-11.47 4.19-17.2s2.61-11.48 3.73-17.16 2.09-11.3 2.65-16.68c.27-2.67.49-5.28.5-7.62a26.08 26.08 0 0 0-.14-3.2 7.72 7.72 0 0 0-.19-1.21l-.1-.5-.19-.66a46.93 46.93 0 0 0-2.14-5.94c-.93-2.12-2-4.31-3.25-6.51a124.9 124.9 0 0 0-8.4-13.07 137 137 0 0 0-9.94-12.1 81.31 81.31 0 0 0-10.23-9.57z"/>
								<path fill="#47466d" d="M427.42 269.24l5.56 10.19h10.05l5.07-10.6-10.38-6.28-10.3 6.69z"/>
								<path fill="#8a6650" d="M455.23 258.58l-17.5 4.77-17.5-4.77v-33.62h35v33.62z"/>
								<path fill="#46cdcf" d="M455.48 249.63l-17.75 13.72 15.83 9.39 5.37-22.37-3.45-.74z"/>
								<path fill="#46cdcf" d="M419.98 249.5l17.75 13.85-14.82 9.39-6.74-22.43 3.81-.81z"/>
								<path id="ind-thumb" fill="#9c7761" d="M443.34 369.74c4.17-.24 8.09-1.51 12.77-1.54 2.49 0 4.39.64 4.51 2.7s-2.77 3.07-2.77 3.07l-8.28.09z"/>
								<path fill="none" stroke="#d6773c" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M454.35 390.81c9.3-41.42 15.08-132.73 3.38-142.55"/>
								<g id="ind-arm">
									<path fill="#9c7761" d="M427.28 367.7h14.59v13.62h-14.59z" transform="rotate(14.44 434.498 374.445)"/>
									<path fill="#9c7761" d="M439 376.63l1 6.3s6.35 3.33 8.55 3.69c3 .48 7.32-2.38 9.47-4.48s4.28-6.07 3.48-8.18c-1.09-2.87-9.6-4.08-9.6-4.08l-8.5-.14z"/>
									<path fill="#46cdcf" d="M417.54 293.55A70.45 70.45 0 0 0 403.7 300a55.62 55.62 0 0 0-11.34 9.19 40.46 40.46 0 0 0-7.62 11.23 24.16 24.16 0 0 0-2.36 10.94 13.37 13.37 0 0 0 .83 4.24 10.8 10.8 0 0 0 2.16 3.5 14 14 0 0 0 1.78 1.58c.33.27.71.51 1.08.77l2 1.22c2.66 1.62 5.41 3.17 8.17 4.74 11.09 6.19 22.71 11.88 34.59 17.14l-4.12 16.93A174.25 174.25 0 0 1 408 378.5c-3.45-.68-6.87-1.48-10.29-2.32s-6.81-1.83-10.21-2.84-6.75-2.19-10.13-3.4l-2.57-.94c-1.12-.5-2.23-1-3.33-1.61a45.81 45.81 0 0 1-6.41-4.16 43.26 43.26 0 0 1-10.49-11.89 45.74 45.74 0 0 1-5.57-14.63 53.24 53.24 0 0 1-.73-14.77 63.07 63.07 0 0 1 2.73-13.69 75.58 75.58 0 0 1 12.5-23.19 87.49 87.49 0 0 1 18.5-17.42A99.53 99.53 0 0 1 403.77 256z"/>
								</g>
								<path fill="#9c7761" d="M462.45 214.29c0 19.2 1.43 34.77-21.59 34.77s-29.41-15.57-29.41-34.77 4-34.78 29.41-34.78c23.48 0 21.59 15.57 21.59 34.78z"/>
								<rect width="4.66" height="16" x="459.62" y="205.67" fill="#9c7761" rx="2.33"/>
								<rect width="4.66" height="16" x="408.83" y="205.67" fill="#9c7761" rx="2.33"/>
								<path fill="#231f20" d="M429.27 179.6h22.64a10.53 10.53 0 0 1 10.53 10.53v7.47h-51v-.17a17.83 17.83 0 0 1 17.83-17.83z"/>
								<path fill="#8a6650" d="M415.45 209.6h-4v-12h16a12 12 0 0 0-12 12z"/>
								<path fill="#231f20" d="M462.36 194.77h-23.91V179.6c11.1 0 15.44-2.75 17.91-8 3.94 7.73 9.94 15.45 6 23.17z"/>
							</g>
						</g>
					</g>
					<path id="inset-top" fill="#9c421e" d="M250 130h350v10H250z"/>
					<rect x="650" y="300" fill="#AD4F28" width="20" height="220"/>
					<path id="edge-right-top" fill="#ad4f28" d="M650 400V80l20 20v300h-20z"/>
					<path fill="#9c421e" d="M315 520h355l-20-20H315z"/>
					<path id="edge-bottom" fill="#9c421e" d="M645 500H200l20 20h425v-20z"/>
					<path id="inset-left-2" fill="#ad4f28" d="M250 140h10v310h-10z"/>
					<path id="inset-left" fill="#ad4f28" d="M250 330h10V140l-10-10v200z"/>
				</svg>
			</div>
		</div>
		<div id="hand-front"></div>
	</div>
</section>
	
<div id="debug-buttons">
	<button id="individual-btn">Individual</button>
	<button id="couple-btn">Couple</button>
	<button id="family-btn">Family</button>
</div>
            
          
!

CSS

            
              body {overflow-x: hidden;}
section {
	width: 100%; height: 100vh;
	position: relative;
	#portrait-container {
		width: 100%;
		position: absolute; top: 4rem; right: -24%;
		#portrait {
			width: 500px; width: 70%;
			position: absolute; top: 5%; right: 28%;
			transform: rotate(5deg);
			div {padding-bottom: 77.61%}
		}
		#hand-front, #hand-back {
			width: 500px; width: 45%;
			position: absolute; top: 5%; right: 0%;
			transform: translateY(20%);
			background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/128542/hand-front.svg?v=2'); 
			background-size: contain; background-repeat: no-repeat; background-position: 0 0;
			&::before {
				content: ""; display: block;
				position: relative;
				width: 100%; height: 100px;
				padding-bottom: 194%;
			}
		}
		#hand-back {
			background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/128542/hand-back.svg?v=2');
		}
	}
}

#debug-buttons {
	display: flex; flex-flow: row nowrap; justify-content: center; align-items: center;
	position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
	button {
		margin: 1rem .5rem; padding: .5rem 1rem;
		font-size: 1rem;
		background-color: #ddd; 
		border: none; border-radius: .25rem;
		transition: background-color .1s linear;
		&:hover {
			background-color: #999;
		}
	}
}

.svg-holder {
	div {
		position: relative;
		width: 100%; height: 0;
		padding-bottom: 100%;
		svg {overflow: visible;
			position: absolute; top: 0; left: 0;
			width: 100%; height: 100%;
		}
	}
}
            
          
!

JS

            
              // select elements to reference
const sceneryBounds = select('#scenery-bounds');
const frame = select('#frame');
const insetT = select('#inset-top');
const insetL = select('#inset-left');
const insetL2 = select('#inset-left-2');
const edgeR = select('#edge-right-top');
const edgeB = select('#edge-bottom');
const scenery = select('#scenery');
const people = select('#people');
const indArm = select('#ind-arm');
const indThumb = select('#ind-thumb');
const coupArmM = select('#coup-arm-m');
const coupArmL = select('#coup-arm-l');
const famArmM = select('#fam-arm-m');
const famArmL = select('#fam-arm-l');

// animation vars
var sceneTl, indTl, coupTl, famTl;
const dur = .5;
const ease = Back.easeOut.config(1);
var curNum = 3;

// set initial appearance and properties
TweenMax.set(sceneryBounds, {transformOrigin: "100% 100%"});
TweenMax.set(frame, {transformOrigin: "100% 100%"});
TweenMax.set(insetT, {transformOrigin: "100% 50%"});
TweenMax.set(indArm, {rotation: "10deg", transformOrigin: "56px 0px"});
TweenMax.set(coupArmM, {transformOrigin: "0% 0%"});
TweenMax.set(coupArmL, {transformOrigin: "83% 14%"});
TweenMax.set(famArmM, {transformOrigin: "100% 0%"});
TweenMax.set(famArmL, {transformOrigin: "32% 0%"});
TweenMax.set(sceneryBounds, {scaleX: 1.571, scaleY: 1.25, transformOrigin: "100% 100%"});
TweenMax.set(frame, {scaleX: 1.444, scaleY: 1.19, transformOrigin: "100% 100%"});
TweenMax.set(insetT, {y: -80, scaleX: 1.571, transformOrigin: "100% 50%"});
TweenMax.set(insetL, {x: -200, y: -80});
TweenMax.set(insetL2, {x: -200});
TweenMax.set(edgeB, {x: -200});
TweenMax.set(edgeR, {y: -80});
TweenMax.set(scenery, {x: -1470});
TweenMax.set(people, {x: -1425});

// build timelines for secondary motion
indTl = new TimelineMax({paused: true});
indTl
	.fromTo(indArm, .8, {rotation: "12deg"}, {rotation: "0deg", ease: Quad.easeOut}, ".4")
	.fromTo(indThumb, .8, {x: -20, y: 6, rotation: "10deg"}, {x: 0, y: 0, rotation: "0deg", ease: Quad.easeOut}, ".4")
;
coupTl = new TimelineMax({paused: true});
coupTl
	.fromTo(coupArmL, .8, {rotation: "15deg"}, {rotation: "0deg", ease: Quad.easeOut}, ".4")
	.fromTo(coupArmM, .8, {rotation: "15deg"}, {rotation: "0deg", ease: Quad.easeOut}, ".2")
;
famTl = new TimelineMax({paused: true});
famTl
	.fromTo(famArmL, .8, {rotation: "10deg"}, {rotation: "0deg", ease: Quad.easeOut}, ".4")
	.fromTo(famArmM, 1.2, {rotation: "-20deg"}, {rotation: "0deg", ease: Quad.easeOut}, "0")
;
famTl.progress(1);

// function called to change the scene
function changeScene(newScene) {
	// make sure a different option was selected
	if(newScene == curNum) {return;}
	
	// some temp vars
	let frameSX,frameSY,sceneSX,sceneSY,distL,distT,sceneX,peopleX;
	
	// create new scene timeline
	sceneTl = new TimelineMax({paused: true, repeat: 0});
	
	// see which state we're changing to
	switch(newScene) {
		// change portrait to individual
		case 1:
			// set individual vars
			frameSX = 1;
			frameSY = 1;
			sceneSX = 1;
			sceneSY = 1;
			distL = 0;
			distT = 0;
			sceneX = 0;
			peopleX = 0;
			// add individual timeline of secondary motion
			sceneTl.fromTo(indTl, indTl.duration(), {progress: 0}, {progress: 1, ease: Linear.easeNone}, "0")
			break;
		// change portrait to couple
		case 2:
			// set couple vars
			frameSX = 1.222;
			frameSY = 1.095;
			sceneSX = 1.286;
			sceneSY = 1.125;
			distL = -100;
			distT = -40;
			sceneX = -770;
			peopleX = -725;
			// add couple timeline of secondary motion
			sceneTl.fromTo(coupTl, coupTl.duration(), {progress: 0}, {progress: 1, ease: Linear.easeNone}, "0")
			break;
		// change portrait to family
		case 3:
			// set family vars
			frameSX = 1.444;
			frameSY = 1.19;
			sceneSX = 1.571;
			sceneSY = 1.25;
			distL = -200;
			distT = -80;
			sceneX = -1470;
			peopleX = -1425;
			// add family timeline of secondary motion
			sceneTl.fromTo(famTl, famTl.duration(), {progress: 0}, {progress: 1, ease: Linear.easeNone}, "0")
			break;
	}
	
	// set var to reflect what scene we're showing
	curNum = newScene;
	
	// build scene timeline with vars from above
	sceneTl
		.to(scenery, .85, {x: sceneX, ease: Power2.easeOut}, "0")
		.to(people, 1, {x: peopleX, ease: Power2.easeOut}, "0")
		.to(frame, dur, {scaleX: frameSX, scaleY: frameSY, ease: ease}, "0")
		.to(sceneryBounds, dur, {scaleX: sceneSX, scaleY: sceneSY, ease: ease}, "0")
		.to(insetT, dur, {y: distT, scaleX: sceneSX, ease: ease}, "0")
		.to(insetL, dur, {x: distL, y: distT, ease: ease}, "0")
		.to(insetL2, dur, {x: distL, ease: ease}, "0")
		.to(edgeB, dur, {x: distL, ease: ease}, "0")
		.to(edgeR, dur, {y: distT, ease: ease}, "0")
	;
	// play the timeline
	sceneTl.play();
	
}

// utility function to select elements
function select(targ) {return document.querySelector(targ);}




/* demo button functionality */
var individualBtn = select('#individual-btn');
var coupleBtn = select('#couple-btn');
var familyBtn = select('#family-btn');

individualBtn.addEventListener('click', () => {changeScene(1);} );
coupleBtn.addEventListener('click', () => { changeScene(2); });
familyBtn.addEventListener('click', () => { changeScene(3); });
            
          
!
999px

Console