How to create Solar System Animation with HTML CSS GSAP3 | Web animation Solar System with GSAP3 frontend tricks

Solar System Animation (GSAP 3)

in Front-end | May 22, 2020
How to create Solar System Animation with HTML CSS GSAP3

Imagine that we are George Lucas and create a piece of space. Lol 🙂

To do this, we found a suitable image in the SVG format and edited it a little.

Solar system

See the Pen Solar system (GSAP 3) by Andrey (@glivera) on CodePen.dark

So, let’s begin….

1. HTML

We use the HTML Pug (Jade) preprocessor because it is cool and useful, so there will be no pure html in the example. Our structure will be as follows:

// Add stars
.stars_w
    - i=0;
    while i < 200
        -i++;
        span.star_el

// Our solar system
.svg_block
	svg.svg_el(data-name='Layer 1', xmlns='http://www.w3.org/2000/svg', viewBox='0 0 933.66 928.21')
		g.anim_el#sun
			circle#sunBorder(cx='467.08', cy='466.66', r='103.7', style='fill:#da693c')
			circle#sunBody(cx='467.08', cy='466.66', r='91.5', style='fill:#e8d213')
			circle(cx='475.13', cy='534.87', r='21.9', style='fill:#fab62a')
			circle(cx='421.96', cy='485.04', r='14.2', style='fill:#fab62a')
			circle(cx='498.23', cy='423.12', r='28.3', style='fill:#fab62a')
			circle(cx='453.84', cy='395.06', r='7.1', style='fill:#fab62a')
			circle(cx='404.17', cy='430.14', r='6.8', style='fill:#fab62a')
			circle(cx='531.05', cy='503.47', r='9', style='fill:#fab62a')
		g#group-8
			path.circle_path_el#mercury-orb(d='M593.81,431.58c19.25,70.52-22.45,143.55-93,162.81S357.3,571.94,338,501.42s22.45-143.55,93-162.8S574.55,361.06,593.81,431.58Zm-255,69.64c19.14,70.1,91.74,111.55,161.84,92.41s111.56-91.75,92.41-161.84-91.74-111.56-161.84-92.42S319.65,431.12,338.8,501.22Z', style='fill:#f9f4f4')
			circle.anim_el#mercury(cx='591.99', cy='430.59', r='8.64', style='fill:#ce715c')
		g#group-7
			path.circle_path_el#venus-orb(d='M572.9,334.3c73,58.38,84.83,165.22,26.45,238.18S434.13,657.3,361.17,598.93,276.35,433.7,334.72,360.75,500,275.92,572.9,334.3ZM361.79,598.15c72.53,58,178.75,46.23,236.78-26.29s46.24-178.75-26.29-236.78S393.54,288.84,335.5,361.37,289.27,540.12,361.79,598.15Z', style='fill:#f9f4f4')
			circle.anim_el#venus(cx='576.5', cy='339.98', r='10.72', style='fill:#eb623b')
		g#group-6
			path.circle_path_el#earth-orb(d='M273.92,395.52c39.3-107.69,158.88-163.32,266.56-124s163.31,158.87,124,266.56-158.87,163.31-266.55,124S234.63,503.2,273.92,395.52ZM663.34,537.64c39.07-107-16.24-225.92-123.28-265s-225.92,16.24-265,123.29,16.23,225.91,123.28,265S624.28,644.68,663.34,537.64Z', style='fill:#f9f4f4')
			circle.anim_el#earth(cx='271.12', cy='399.02', r='15.54', style='fill:#3369b1')
		g#group-5
			path.circle_path_el#mars-orb(d='M690.32,568.14c-56.7,123.6-203.38,178-327,121.32s-178-203.39-121.31-327,203.38-178,327-121.32S747,444.55,690.32,568.14Zm-447-205C187,486,241.08,631.77,364,688.13S632.63,690.4,689,567.53s2.26-268.68-120.6-325S299.71,240.22,243.35,363.09Z', style='fill:#f9f4f4')
			circle.anim_el#mars(cx='688.19', cy='566.89', r='12.32', style='fill:#e7384d')
		g#group-4
			path.circle_path_el#jupiter-orb(d='M210.24,619.74C125.68,478,172.16,294,313.87,209.38S639.66,171.3,724.23,313,762.31,638.8,620.6,723.37,294.81,761.45,210.24,619.74ZM722.71,313.91C638.65,173,455.64,126.83,314.77,210.9S127.69,478,211.76,618.84s267.07,187.08,407.94,103S806.78,454.78,722.71,313.91Z', style='fill:#f9f4f4')
			circle.anim_el#jupiter(cx='210.9', cy='617.97', r='28.3', style='fill:#b2887b')
		g#group-3
			path.circle_path_el#saturn-orb(d='M714.73,232.45c127.72,137.18,120,352.69-17.15,480.42s-352.69,120-480.42-17.15S97.13,343,234.31,215.3,587,95.27,714.73,232.45ZM218.63,694.36c127,136.36,341.22,144,477.59,17s144-341.22,17-477.59-341.21-144-477.58-17S91.66,558,218.63,694.36Z', style='fill:#f9f4f4')
			g.anim_el#saturn
				circle(cx='717.04', cy='234.43', r='21', style='fill:#c19bc7')
				ellipse(cx='718.33', cy='235.66', rx='31.8', ry='8.3', transform='translate(43.76 576.96) rotate(-45)', style='fill:#8c77ab')
				path(d='M731.23,219.49a20.38,20.38,0,0,0-28.2-.7c-8.5,7.6-10.1,20.6-2.6,28.1,4.3,4.3,11.3-.1,19.8-7.6S733.73,222,731.23,219.49Z', style='fill:#c19bc7')
		g#group-2
			path.circle_path_el#uranus-orb(d='M374.61,81.22C584.14,32.83,794,163.93,842.36,373.46S759.65,792.82,550.12,841.21,130.76,758.51,82.37,549,165.07,129.61,374.61,81.22ZM549.6,839c208.3-48.1,338.62-256.7,290.52-465s-256.7-338.62-465-290.52-338.61,256.7-290.51,465S341.31,887.07,549.6,839Z', style='fill:#f9f4f4')
			circle.anim_el#uranus(cx='370.27', cy='86.72', r='15.5', style='fill:#78aadc')
		g#group-1
			path.circle_path_el#neptune-orb(d='M38.29,463.26C37.37,228,228.05,35.78,463.35,34.86s427.48,189.76,428.4,425.07S702,887.41,466.69,888.33,39.21,698.57,38.29,463.26Zm850.94-3.32C888.32,226,697.27,36.47,463.36,37.38S39.89,229.34,40.8,463.25s192,423.47,425.88,422.56S890.15,693.85,889.23,459.94Z', style='fill:#f9f4f4')
			circle.anim_el#neptune(cx='38.28', cy='464.08', r='16', style='fill:#234c9a')
		g#ship-group
			path.circle_path_el#ship_path(d='M-689.91891,500.4119 C-689.91891,531.3919 -122.806,489.842 -99.686,486.902 271.962,439.63 97.624,26.859 285.871,67.419 646.625,145.147 360.357,325.101 196.326,628.429 98.487,809.352 578.284,779.996 645.19,656.266 702.518,550.247 545.393,258.119 529.861,187.425 471.679,-77.388 1025.087,266.315 954.78,525.743 914.464,674.506 844.511,791.906 710.073,871.897 508.415,991.854 -693.032,48.933 -689.777,48.933', style='fill:#f9f4f4')
			g.anim_el#starship
				g#fire
					ellipse(cx='100.6', cy='73.19', rx='4.14', ry='10.13', transform='translate(-22.29 92.57) rotate(-45)', style='fill:#e8d213;stroke:#f9f4f4;stroke-miterlimit:10')
					ellipse(cx='100.6', cy='73.19', rx='2.56', ry='6.24', transform='translate(-22.29 92.57) rotate(-45)', style='fill:#da693c;stroke:#f9f4f4;stroke-miterlimit:10')
				path(d='M94.26,83.45l3.64-3.64a1.1,1.1,0,0,1,1.54,0h0l3.64,3.64a1.08,1.08,0,0,1,0,1.54,1.06,1.06,0,0,1-.77.32H95A1.08,1.08,0,0,1,94,84.19,1.07,1.07,0,0,1,94.26,83.45Z', style='fill:#e7384d;stroke:#f9f4f4;stroke-miterlimit:10')
				path(d='M110.82,66.93l-3.64,3.64a1.09,1.09,0,0,0,0,1.54h0l3.64,3.64a1.08,1.08,0,0,0,1.54,0,1.06,1.06,0,0,0,.32-.77V67.75a1.08,1.08,0,0,0-1-1.15A1.1,1.1,0,0,0,110.82,66.93Z', style='fill:#e7384d;stroke:#f9f4f4;stroke-miterlimit:10')
				path(d='M131.89,96a109.88,109.88,0,0,0-12-16L107.42,92.43a105.06,105.06,0,0,0,16,12Z', style='fill:#c9d1db;stroke:#f9f4f4;stroke-miterlimit:10')
				path(d='M134.58,107.21c1.88-1.89.21-6.34-2.69-11.22l-8.53,8.53C128.26,107.39,132.72,109.06,134.58,107.21Z', style='fill:#e7384d;stroke:#f9f4f4;stroke-miterlimit:10')
				path(d='M119,79.07A34.78,34.78,0,0,0,115.36,76l-12,12a41.56,41.56,0,0,0,3.12,3.62c.28.28.59.55,1,.89L120,80C119.53,79.66,119.26,79.32,119,79.07Z', style='fill:#e7384d;stroke:#f9f4f4;stroke-miterlimit:10')
				circle(cx='117.58', cy='90.18', r='2.75', style='fill:#78aadc;stroke:#f9f4f4;stroke-miterlimit:10')
				circle(cx='123.57', cy='96.18', r='2.75', style='fill:#78aadc;stroke:#f9f4f4;stroke-miterlimit:10')
				path(d='M103.32,88l12-12a61.22,61.22,0,0,0-7.62-4.88l-9.27,9.26A53.66,53.66,0,0,0,103.32,88Z', style='fill:#6ac1b8;stroke:#f9f4f4;stroke-miterlimit:10')
				path(d='M101.37,74l-4.11,4.08s.4.9,1.14,2.25l9.26-9.26c-1.38-.74-2.25-1.14-2.25-1.14Z', style='fill:#e7384d;stroke:#f9f4f4;stroke-miterlimit:10')

2. CSS

Further, we add styles using SASS

* {
	box-sizing: border-box;
}

body {
	position: fixed;
	top: 0;
	left: 0;
	
	width: 100%;
	height: 100vh;
	
	background: black;
	
	overflow: hidden;
}

.svg_block {
	width: 100%;
	height: 100%;
	padding: 4rem;
}

.svg_el {
	position: absolute;
	top: 0;
	left: 0;

	width: 100%;
	height: 100%;
}

.circle_path_el {
	opacity: 0;
}

.stars_w {
	position: fixed;
	top: 0;
	left: 0;

	width: 100%;
	height: 100%;
}

.star_el {
	background: white;
	box-shadow: 0 0 2px 1px blue;
	height: 2px;
	width: 2px;
	position: absolute;
	z-index: -1;
	opacity: 0.3;
}

$star-count : 200;

@for $i from 1 to $star-count+1 {
	$delay: random(20);

	.star_el:nth-of-type(#{$i}) {
		top: random(99) + vh;
		left: random(99) + vw;
	}
}


.anim_el {
	will-change: transform;
}

3. JavaScript

Let’s give movement to our objects. To do this, we need GSAP3 and the MotionPathPlugin:

// Our animation function
function animFunc() {
    // plugin initialization
	gsap.registerPlugin(MotionPathPlugin);

    // variables
	var time = 300,
            animEase = "linear";

    // animations for planets and the sun
	gsap.to("#sun", {
		duration: time * 0.1,
		ease: animEase,
		rotation: 360,
		repeat: -1,
		transformOrigin: "50% 50%"
	});
	gsap.to("#mercury", {
		duration: time * 0.1,
		ease: animEase,
		repeat: -1,
		motionPath: {
			path: "#mercury-orb",
			align: "#mercury-orb",
			start: 1,
			end: 1
		}
	});
	gsap.to("#venus", {
		duration: time * 0.2,
		ease: animEase,
		repeat: -1,
		motionPath: {
			path: "#venus-orb",
			align: "#venus-orb",
			autoRotate: true,
			start: 1,
			end: 1
		}
	});
	gsap.to("#earth", {
		duration: time * 0.3,
		ease: animEase,
		repeat: -1,
		motionPath: {
			path: "#earth-orb",
			align: "#earth-orb",
			autoRotate: true,
			start: 1,
			end: 1
		}
	});
	gsap.to("#mars", {
		duration: time * 0.4,
		ease: animEase,
		repeat: -1,
		motionPath: {
			path: "#mars-orb",
			align: "#mars-orb",
			autoRotate: true,
			start: 1,
			end: 1
		}
	});
	gsap.to("#jupiter", {
		duration: time * 0.5,
		ease: animEase,
		repeat: -1,
		motionPath: {
			path: "#jupiter-orb",
			align: "#jupiter-orb",
			autoRotate: true,
			start: 1,
			end: 1
		}
	});
	gsap.to("#saturn", {
		duration: time * 0.6,
		ease: animEase,
		repeat: -1,
		motionPath: {
			path: "#saturn-orb",
			align: "#saturn-orb",
			autoRotate: true,
			start: 1,
			end: 1
		}
	});
	gsap.to("#uranus", {
		duration: time * 0.7,
		ease: animEase,
		repeat: -1,
		motionPath: {
			path: "#uranus-orb",
			align: "#uranus-orb",
			autoRotate: true,
			start: 1,
			end: 1
		}
	});
	gsap.to("#neptune", {
		duration: time * 0.8,
		ease: animEase,
		repeat: -1,
		motionPath: {
			path: "#neptune-orb",
			align: "#neptune-orb",
			autoRotate: true,
			start: 1,
			end: 1
		}
	});

   // rocket animation
	gsap.to("#starship", {
		duration: 80,
		ease: animEase,
		repeat: -1,
		motionPath: {
			path: "#ship_path",
			align: "#ship_path",
			autoRotate: -40
		}
	});

    // Engine flame animation
	gsap.to("#fire", {
		duration: 0.2,
		scale: 1.3,
		repeat: -1,
		yoyo: true
	});
		

    // Reduce the size of our rocket
	gsap.set("#starship", {scale: .8});

}

// We call our function with animation
window.onload = function() {
    animFunc();
  };

That’s all! Working example on CodePen