Solar System Animation (GSAP 3)
in
Front-end | May 22, 2020
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.
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
