Let’s create a Newton’s Sun and Moon Loading Animation using HTML, CSS, and JavaScript! 🌞🌙 This creative loader mimics the motion of Newton’s cradle using the sun and moon as animated spheres, swinging smoothly to represent day and night transitions.
We’ll use:
- HTML to structure the loader elements (sun, moon, cradle lines).
- CSS for styling, positioning, and smooth animation.
- JavaScript to control the swing timing or add interactivity if needed.
This project is a fun way to blend science and creativity while practicing animation and layout skills. Whether you’re new to coding or looking for something unique for your site, this animation adds a beautiful and clever touch.
HTML :
This HTML sets up the structure for a smooth “Sun and Moon Loading Animation” using SVG graphics. It includes stylized sun, moon, clouds, and stars inside an SVG element. These elements are animated via GSAP (GreenSock Animation Platform) and MorphSVGPlugin, which are loaded via CDN. The <body> centers the animation, and the linked style.css and script.js files handle all the visual styles and animation logic. Overall, this code displays a creative loader that smoothly switches between a sunny and a starry night theme using advanced SVG morphing and animation techniques.
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Newtons Sun and Moon Loading Animation ☀️🌕</title>
<link rel="stylesheet" href="https://public.codepenassets.com/css/normalize-5.0.0.min.css">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<svg class="sunny-moony" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 140.22917 47.625001">
<g transform="translate(30.4270831 -253.30314617)">
<path class="cloud cloud--static" d="M28.400015 276.59647a1.904456 1.904456 0 00-1.374592.55759 1.904456 1.904456 0 00-.458886.74363 1.904456 1.904456 0 00-2.1947.35605 1.904456 1.904456 0 00-.35605 2.19624 1.904456 1.904456 0 00-.743624.45734 1.904456 1.904456 0 000 2.69338 1.904456 1.904456 0 00.743624.4594 1.904456 1.904456 0 00.35605 2.1947 1.904456 1.904456 0 002.196251.35605 1.904456 1.904456 0 00.457335.74311 1.904456 1.904456 0 002.693376 0 1.904456 1.904456 0 00.459404-.74363 1.904456 1.904456 0 002.194698-.35553 1.904456 1.904456 0 00.356049-2.19677 1.904456 1.904456 0 00.743107-.45733 1.904456 1.904456 0 000-2.69338 1.904456 1.904456 0 00-.743622-.45889 1.904456 1.904456 0 00-.355534-2.19469 1.904456 1.904456 0 00-2.196767-.35605 1.904456 1.904456 0 00-.457335-.74363 1.904456 1.904456 0 00-1.318784-.55759z"></path>
<path class="cloud cloud--static" d="M39.715405 276.66449a1.904456 1.904456 0 00-1.374592.55759 1.904456 1.904456 0 00-.458886.74363 1.904456 1.904456 0 00-2.1947.35605 1.904456 1.904456 0 00-.35605 2.19624 1.904456 1.904456 0 00-.743624.45734 1.904456 1.904456 0 000 2.69338 1.904456 1.904456 0 00.743624.4594 1.904456 1.904456 0 00.35605 2.1947 1.904456 1.904456 0 002.196251.35605 1.904456 1.904456 0 00.457335.74311 1.904456 1.904456 0 002.693376 0 1.904456 1.904456 0 00.459404-.74363 1.904456 1.904456 0 002.194698-.35553 1.904456 1.904456 0 00.356049-2.19677 1.904456 1.904456 0 00.743107-.45733 1.904456 1.904456 0 000-2.69338 1.904456 1.904456 0 00-.743622-.45889 1.904456 1.904456 0 00-.355534-2.19469 1.904456 1.904456 0 00-2.196767-.35605 1.904456 1.904456 0 00-.457335-.74363 1.904456 1.904456 0 00-1.318784-.55759z"></path>
<path class="cloud cloud--static" d="M51.030797 276.66449a1.904456 1.904456 0 00-1.374592.55759 1.904456 1.904456 0 00-.458886.74363 1.904456 1.904456 0 00-2.1947.35605 1.904456 1.904456 0 00-.35605 2.19624 1.904456 1.904456 0 00-.743624.45734 1.904456 1.904456 0 000 2.69338 1.904456 1.904456 0 00.743624.4594 1.904456 1.904456 0 00.35605 2.1947 1.904456 1.904456 0 002.196251.35605 1.904456 1.904456 0 00.457335.74311 1.904456 1.904456 0 002.693376 0 1.904456 1.904456 0 00.459404-.74363 1.904456 1.904456 0 002.194698-.35553 1.904456 1.904456 0 00.356049-2.19677 1.904456 1.904456 0 00.743107-.45733 1.904456 1.904456 0 000-2.69338 1.904456 1.904456 0 00-.743622-.45889 1.904456 1.904456 0 00-.355534-2.19469 1.904456 1.904456 0 00-2.196767-.35605 1.904456 1.904456 0 00-.457335-.74363 1.904456 1.904456 0 00-1.318784-.55759z"></path>
<g class="sunny-moony__sun" transform="translate(-15.33403 12.199538)">
<g class="sun__ray-wrap">
<rect class="sun__ray" ry=".85020351" y="266.68771" x="76.802017" height="6.7336116" width="1.700407"></rect>
</g>
<g class="sun__ray-wrap">
<rect class="sun__ray" width="1.700407" height="6.7336116" x="76.802017" y="266.68771" ry=".85020351"></rect>
</g>
<g class="sun__ray-wrap">
<rect class="sun__ray" ry=".85020351" y="266.68771" x="76.802017" height="6.7336116" width="1.700407"></rect>
</g>
<g class="sun__ray-wrap">
<rect class="sun__ray" width="1.700407" height="6.7336116" x="76.802017" y="266.68771" ry=".85020351"></rect>
</g>
<g class="sun__ray-wrap">
<rect class="sun__ray" ry=".85020351" y="266.68771" x="76.802017" height="6.7336116" width="1.700407"></rect>
</g>
<g class="sun__ray-wrap">
<rect class="sun__ray" width="1.700407" height="6.7336116" x="76.802017" y="266.68771" ry=".85020351"></rect>
</g>
<g class="sun__ray-wrap">
<rect class="sun__ray" ry=".85020351" y="266.68771" x="76.802017" height="6.7336116" width="1.700407"></rect>
</g>
<g class="sun__ray-wrap">
<rect class="sun__ray" width="1.700407" height="6.7336116" x="76.802017" y="266.68771" ry=".85020351"></rect>
</g>
<path class="sun" d="M81.652814 274.05511c-2.209469 2.20946-5.791721 2.20946-8.001189-.00001-2.209462-2.20946-2.209462-5.79172 0-8.00118 2.209468-2.20947 5.79172-2.20948 8.001189-.00001 2.209468 2.20947 2.209468 5.79173 0 8.0012z"></path>
<path class="sun__cloud" d="M77.680127 264.39695a1.904456 1.904456 0 00-1.374592.55759 1.904456 1.904456 0 00-.458886.74363 1.904456 1.904456 0 00-2.1947.35605 1.904456 1.904456 0 00-.35605 2.19624 1.904456 1.904456 0 00-.743624.45734 1.904456 1.904456 0 000 2.69338 1.904456 1.904456 0 00.743624.4594 1.904456 1.904456 0 00.35605 2.1947 1.904456 1.904456 0 002.196251.35605 1.904456 1.904456 0 00.457335.74311 1.904456 1.904456 0 002.693376 0 1.904456 1.904456 0 00.459404-.74363 1.904456 1.904456 0 002.194698-.35553 1.904456 1.904456 0 00.356049-2.19677 1.904456 1.904456 0 00.743107-.45733 1.904456 1.904456 0 000-2.69338 1.904456 1.904456 0 00-.743622-.45889 1.904456 1.904456 0 00-.355534-2.19469 1.904456 1.904456 0 00-2.196767-.35605 1.904456 1.904456 0 00-.457335-.74363 1.904456 1.904456 0 00-1.318784-.55759z" fill="#4d4d4d"></path>
</g>
<g class="cloud-and-stars">
<g class="clouds-dud" style="opacity: 0;">
<path class="cloud-path" d="M12.976038 277.820928a5.7937272 5.7937272 0 00-5.7763908 5.44153 3.4811737 3.4811737 0 00-.8211396-.10232 3.4811737 3.4811737 0 00-3.4814406 3.48092 3.4811737 3.4811737 0 003.4814406 3.48145H23.212106a3.1751005 3.1751005 0 003.175516-3.17552 3.1751005 3.1751005 0 00-3.133659-3.17293 3.9572877 3.9572877 0 00.0047-.0915 3.9572877 3.9572877 0 00-3.957381-3.95738 3.9572877 3.9572877 0 00-1.711523.39326 5.7937272 5.7937272 0 00-4.613672-2.29754z"></path>
</g>
<g class="stars">
<path class="stars-path" d="M5.9614505 278.866758l-.4571285.0119-.2493413.38332-.1525884-.43107-.4416133-.11869.3628235-.27833-.023591-.45667.3768259.25906.4270335-.16356-.1299326.43844zM3.941467 292.910448l-.241402-.27263-.361445.0443.184695-.31384-.153824-.33006.35555.0787.266377-.24829.03505.36246.318454.17661-.333889.14534zM20.1013131 294.160918l-.3719498.11234-.118324.37009-.221777-.31904-.3885392.002.234884-.3095-.1218064-.36896.3669433.12774.3132587-.22986-.0081.38846zM24.4298455 278.866778l-.2265258-.38682-.4470788-.0327.2978928-.33497-.1070641-.4353.4106337.1798.3809095-.23634-.044107.4461.3424792.28923-.4378936.0959zM27.903033 290.016758l-.395679-.64058-.752015-.0372.486962-.57426-.197-.72671.696638.28567.630263-.41192-.05642.75082.586523.47212-.731504.17836zM11.973298 294.066288l-.6300807.31096-.1010381.69534-.4904493-.50315-.6925256.11877.3269662-.62192-.3269662-.62193.6925256.11878.4904493-.50315.1010381.69533zM1.35803807 284.52489138l-.59904028-.4703737-.72707759.22685189.26220194-.71508846-.44042579-.62139275.76111464.0283961.45488053-.61088902.20819347.73263644.7215586.24383731-.63244349.42439945zM13.82230515 274.97269136l-.59904027-.47037371-.7270776.2268519.26220195-.71508846-.44042579-.62139276.76111464.0283961.45488052-.61088902.20819347.73263645.7215586.2438373-.63244348.42439945z"></path>
</g>
</g>
<g class="sunny-moony__moon">
<path class="moon" d="M22.714506 282.254048a5.6576948 5.6576948 0 01-5.657695 5.6577 5.6576948 5.6576948 0 01-5.657695-5.6577 5.6576948 5.6576948 0 015.657695-5.65769 5.6576948 5.6576948 0 015.657695 5.65769z"></path>
<path class="moon__cloud" d="M17.084716 276.596488a1.904456 1.904456 0 00-1.374592.55759 1.904456 1.904456 0 00-.458886.74363 1.904456 1.904456 0 00-2.1947.35605 1.904456 1.904456 0 00-.35605 2.19624 1.904456 1.904456 0 00-.743624.45734 1.904456 1.904456 0 000 2.69338 1.904456 1.904456 0 00.743624.4594 1.904456 1.904456 0 00.35605 2.1947 1.904456 1.904456 0 002.196251.35605 1.904456 1.904456 0 00.457335.74311 1.904456 1.904456 0 002.693376 0 1.904456 1.904456 0 00.459404-.74363 1.904456 1.904456 0 002.194698-.35553 1.904456 1.904456 0 00.356049-2.19677 1.904456 1.904456 0 00.743107-.45733 1.904456 1.904456 0 000-2.69338 1.904456 1.904456 0 00-.743622-.45889 1.904456 1.904456 0 00-.355534-2.19469 1.904456 1.904456 0 00-2.196767-.35605 1.904456 1.904456 0 00-.457335-.74363 1.904456 1.904456 0 00-1.318784-.55759z"></path>
</g>
<g class="cloud-and-stars">
<g class="clouds">
<path class="cloud-path" d="M12.976038 277.820928a5.7937272 5.7937272 0 00-5.7763908 5.44153 3.4811737 3.4811737 0 00-.8211396-.10232 3.4811737 3.4811737 0 00-3.4814406 3.48092 3.4811737 3.4811737 0 003.4814406 3.48145H23.212106a3.1751005 3.1751005 0 003.175516-3.17552 3.1751005 3.1751005 0 00-3.133659-3.17293 3.9572877 3.9572877 0 00.0047-.0915 3.9572877 3.9572877 0 00-3.957381-3.95738 3.9572877 3.9572877 0 00-1.711523.39326 5.7937272 5.7937272 0 00-4.613672-2.29754z"></path>
</g>
<g class="stars-dud" style="opacity: 0;">
<path class="stars-path" d="M5.9614505 278.866758l-.4571285.0119-.2493413.38332-.1525884-.43107-.4416133-.11869.3628235-.27833-.023591-.45667.3768259.25906.4270335-.16356-.1299326.43844zM3.941467 292.910448l-.241402-.27263-.361445.0443.184695-.31384-.153824-.33006.35555.0787.266377-.24829.03505.36246.318454.17661-.333889.14534zM20.1013131 294.160918l-.3719498.11234-.118324.37009-.221777-.31904-.3885392.002.234884-.3095-.1218064-.36896.3669433.12774.3132587-.22986-.0081.38846zM24.4298455 278.866778l-.2265258-.38682-.4470788-.0327.2978928-.33497-.1070641-.4353.4106337.1798.3809095-.23634-.044107.4461.3424792.28923-.4378936.0959zM27.903033 290.016758l-.395679-.64058-.752015-.0372.486962-.57426-.197-.72671.696638.28567.630263-.41192-.05642.75082.586523.47212-.731504.17836zM11.973298 294.066288l-.6300807.31096-.1010381.69534-.4904493-.50315-.6925256.11877.3269662-.62192-.3269662-.62193.6925256.11878.4904493-.50315.1010381.69533zM1.35803807 284.52489138l-.59904028-.4703737-.72707759.22685189.26220194-.71508846-.44042579-.62139275.76111464.0283961.45488053-.61088902.20819347.73263644.7215586.24383731-.63244349.42439945zM13.82230515 274.97269136l-.59904027-.47037371-.7270776.2268519.26220195-.71508846-.44042579-.62139276.76111464.0283961.45488052-.61088902.20819347.73263645.7215586.2438373-.63244348.42439945z"></path>
</g>
</g>
</g>
</svg>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.1.1/gsap.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin3.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/GSDevTools3.min.js'></script><script src="./script.js"></script>
</body>
</html>
CSS :
This CSS sets up the styling and animation for a sun-and-moon themed animation. It makes everything use border-box and adds a quick fade-in effect. The body is centered with a dynamic background color based on CSS variables for saturation and lightness. The SVG is hidden by default but scales responsively. Elements like the sun, moon, clouds, and stars are styled with HSL colors that also change dynamically based on variables. Extra elements like .moon__cloud and .sun__cloud are hidden initially and have specific fill colors, supporting the animated transition between day and night.
* {
box-sizing: border-box;
-webkit-animation: fadeIn 0.5s;
animation: fadeIn 0.5s;
}
body {
min-height: 100vh;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
background: hsl(200, calc(var(--saturation) * 1%), calc(var(--lightness) * 1%));
}
svg {
display: none;
width: 95vmin;
}
.moon__cloud,
.sun__cloud {
fill: #00f;
display: none;
}
.cloud--static {
fill: hsl(0, 0%, calc(var(--lightness) * 1%));
}
.cloud-path {
fill: #bfbfbf;
}
.moon {
fill: hsl(0, 0%, calc(var(--lightness) * 1%));
}
.stars-path {
fill: #d2ccac;
}
.sun,
.sun__ray {
fill: hsl(50, calc(var(--saturation) * 1%), calc(var(--lightness) * 1%));
}JavaScript:
This code uses GSAP and the MorphSVG plugin to animate a day-to-night transition. It selects elements like the sun, moon, clouds, and stars from the DOM, sets their initial styles, and defines timelines for swinging animations and color changes. The getSunSwing and getMoonSwing functions create smooth rotation and morphing effects for the sun and moon. A combined timeline (SWINGERS) handles these swings, while another (COLORISER) changes color variables to simulate light changes. Finally, both animations run in an infinite loop with a yoyo effect, creating a smooth, repeating transition between day and night.
const {
gsap: { set, to, timeline } } =
window;
gsap.registerPlugin(MorphSVGPlugin);
const MOON_GROUP = document.querySelector('.sunny-moony__moon');
const MOON = document.querySelector('.moon');
const SUN_GROUP = document.querySelector('.sunny-moony__sun');
const SUN_RAY_WRAPS = document.querySelectorAll('.sun__ray-wrap');
const SUN_RAYS = document.querySelectorAll('.sun__ray');
const SUN = document.querySelector('.sun');
const CLOUDS = document.querySelectorAll('.clouds');
const STARS = document.querySelectorAll('.stars');
const CLOUD_AND_STARS = document.querySelectorAll('.cloud-and-stars');
const ANGLE = 70;
const SWING_SPEED = 0.45;
const TRANSFORM_ORIGIN = '50% -150%';
const CENTERED = '50% 50%';
set('svg', { display: 'block' });
set(document.body, { '--saturation': 80, '--lightness': 60 });
set('.cloud--static', { '--lightness': 100 });
set([SUN, SUN_RAYS], { '--lightness': 50, '--saturation': 85 });
set(SUN_GROUP, { transformOrigin: TRANSFORM_ORIGIN });
set(MOON_GROUP, { transformOrigin: '50% -150%' });
set(MOON, { morphSVG: '.moon__cloud', '--lightness': 100 });
set(SUN_RAY_WRAPS, {
transformOrigin: CENTERED,
rotate: index => 360 / 8 * index + 5 });
set(CLOUD_AND_STARS, { rotate: 0, transformOrigin: '50% -50%' });
set([CLOUDS, STARS], { transformOrigin: '50% 50%', rotate: 0 });
set(CLOUDS, { scale: 0 });
set(STARS, { opacity: 0, scale: 0 });
set(SUN_GROUP, { rotate: -ANGLE });
set(SUN, { morphSVG: '.sun' });
set(SUN_RAYS, { y: 10 });
// Create a swinging sun timeline
const getSunSwing = () =>
new timeline().
add(
to(SUN, {
morphSVG: '.sun__cloud',
duration: SWING_SPEED,
ease: 'Power4.easeIn' }),
0).
add(
to(SUN_GROUP, {
rotate: 0,
duration: SWING_SPEED,
ease: 'Power4.easeIn' }),
0).
add(
to(SUN_RAYS, { y: 0, duration: SWING_SPEED, ease: 'Power4.easeIn' }),
0);
// Create a swinging moon timeline
const getMoonSwing = () =>
new timeline().
add(
to(MOON, {
morphSVG: '.moon',
duration: SWING_SPEED,
ease: 'Power4.easeOut' }),
0).
add(
to([MOON_GROUP, CLOUD_AND_STARS], {
rotate: ANGLE,
duration: SWING_SPEED,
ease: 'Power4.easeOut' }),
0).
add(
to(STARS, {
rotate: -ANGLE,
opacity: 1,
scale: 1,
duration: SWING_SPEED,
ease: 'Power4.easeOut' }),
0).
add(
to(CLOUDS, {
rotate: -ANGLE,
scale: 1,
duration: SWING_SPEED,
ease: 'Power4.easeOut' }),
0);
const SWINGERS = new timeline().add(getSunSwing()).add(getMoonSwing());
const COLORISER = new timeline().
add(
to(document.body, {
'--saturation': 25,
'--lightness': 20,
duration: SWING_SPEED * 2,
ease: 'Power4.easeInOut' }),
0).
add(
to([SUN_RAYS, SUN], {
'--lightness': 75,
'--saturation': 0,
duration: SWING_SPEED,
ease: 'Power4.easeIn' }),
0).
add(
to('.cloud--static', {
'--lightness': 75,
duration: 0,
delay: SWING_SPEED,
ease: 'Power4.easeIn' }),
0);
new timeline({ repeatRefresh: true, repeat: -1, yoyo: true }).
add(SWINGERS).
add(COLORISER, 0);In conclusion, building a Newton’s Sun and Moon Loader with HTML, CSS, and JavaScript is a fun and unique way to learn about animations and creative design. With smooth swinging motion and a playful concept, it’s a great addition to any modern loading screen. Keep creating and let your ideas shine like the sun and moon! 🌞🌙💻
If your project has problems, don’t worry. Just click to download the source code and face your coding challenges with excitement. Have fun coding!
