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 […]
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