Astro with Motion.dev without a framework
By Dillon Walsh
Published on December 9, 2024
Astro is one of the most influential web frameworks around today and it is showing no signs of slowing down. Odds are pretty good if you haven’t used Astro yet, you probably have heard of it. Astro has a ton of great features for making fast, performant applications in a mostly unopinionated way. Astro gives you the tools and lets you build how you want and what you want.
Up until recently, if you wanted to add animations to your Astro project, the View Transitions API later renamed to <ClientRouter /> made it simple for animating the transition between pages, but to style each individual component you were going to have to make your own animations using the tools CSS provides. There is nothing wrong with building your own animations, and you should be able to animate your components without a library, but it can be a lot of work.
If you haven’t used it already… let me introduce you to Motion.dev! A React animation library that recently expanded to vanilla JavaScript, which integrates with Astro seamlessly. For this example, I am not going to go too deep into the ins and outs of the library, I just want to give a quick introduction to how you can get started with it in an Astro project. I highly recommend you dive into their docs as you really get involved with the library.
Here is all the JavaScript I added to the starter code to start seeing the animations:
import { animate } from "motion";
animate("#title", { y: [-60, 0] }, { type: "spring", damping: 9 });
animate("#motion", { opacity: [0, 1] }, { delay: 2.5 });
animate("h1", { y: [-65, 0] }, { type: "spring", damping: 10, delay: 0.1 });
animate(
"code",
{ rotateZ: [0, 360] },
{ type: "spring", damping: 10, delay: 0.4 },
);
animate(
".button",
{ x: [300, 0] },
{ type: "spring", delay: 0.3, damping: 30 },
);
animate("#discord", { opacity: [0, 1] }, { delay: 1.6 });
animate(
".box",
{ x: [-500, 0], opacity: [0, 1] },
{ type: "spring", damping: 12, delay: 1.9 },
);Be careful if you decide to just copy over the script above into the Astro starter, I added a few identifiers to divide some of the animations and I Will share the full file below.
That’s all there is to it! Bear in mind that when styling with Astro components, your styles are scoped to the component they are placed in unless otherwise directed, and in this example the styles and animations are component-scoped. Hopefully you found this useful! Motion is a great tool for getting interested in animations, but is also capable of some powerful stuff when you get deeper into it. Go give it a try and see how it works for you!
Update: If you prefer to not use JavaScript for your animations as Astro is intentionally designed to minimize the amount of JavaScript you use, Motion now has expanded into CSS animations
Motion.dev astro guide
Here is the full Welcome.astro component, containing all the html, CSS and
JavaScript with the animations on nearly every element.
---
import astroLogo from "../assets/astro.svg";
import background from "../assets/background.svg";
---
<div id="container">
<img id="background" src={background.src} alt="" fetchpriority="high" />
<main>
<section id="hero">
<div class="headline">
<a id="title" href="https://astro.build"
><img
src={astroLogo.src}
width="115"
height="48"
alt="Astro Homepage"
/></a
>
<span id="motion"
>With <img
id="motion-logo"
width="24"
height="24"
alt="motion logo"
src="https://user-images.githubusercontent.com/7850794/164965523-3eced4c4-6020-467e-acde-f11b7900ad62.png"
/> Motion</span
>
</div>
<h1>
To get started, open the <code><pre>src/pages</pre></code> directory in your
project.
</h1>
<section id="links">
<a class="button" href="https://docs.astro.build">Read our docs</a>
<a id="discord" href="https://astro.build/chat"
>Join our Discord <svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 127.14 96.36"
><path
fill="currentColor"
d="M107.7 8.07A105.15 105.15 0 0 0 81.47 0a72.06 72.06 0 0 0-3.36 6.83 97.68 97.68 0 0 0-29.11 0A72.37 72.37 0 0 0 45.64 0a105.89 105.89 0 0 0-26.25 8.09C2.79 32.65-1.71 56.6.54 80.21a105.73 105.73 0 0 0 32.17 16.15 77.7 77.7 0 0 0 6.89-11.11 68.42 68.42 0 0 1-10.85-5.18c.91-.66 1.8-1.34 2.66-2a75.57 75.57 0 0 0 64.32 0c.87.71 1.76 1.39 2.66 2a68.68 68.68 0 0 1-10.87 5.19 77 77 0 0 0 6.89 11.1 105.25 105.25 0 0 0 32.19-16.14c2.64-27.38-4.51-51.11-18.9-72.15ZM42.45 65.69C36.18 65.69 31 60 31 53s5-12.74 11.43-12.74S54 46 53.89 53s-5.05 12.69-11.44 12.69Zm42.24 0C78.41 65.69 73.25 60 73.25 53s5-12.74 11.44-12.74S96.23 46 96.12 53s-5.04 12.69-11.43 12.69Z"
></path></svg
>
</a>
</section>
</section>
</main>
<a href="https://astro.build/blog/astro-5/" id="news" class="box">
<svg width="32" height="32" fill="none" xmlns="http://www.w3.org/2000/svg"
><path
d="M24.667 12c1.333 1.414 2 3.192 2 5.334 0 4.62-4.934 5.7-7.334 12C18.444 28.567 18 27.456 18 26c0-4.642 6.667-7.053 6.667-14Zm-5.334-5.333c1.6 1.65 2.4 3.43 2.4 5.333 0 6.602-8.06 7.59-6.4 17.334C13.111 27.787 12 25.564 12 22.666c0-4.434 7.333-8 7.333-16Zm-6-5.333C15.111 3.555 16 5.556 16 7.333c0 8.333-11.333 10.962-5.333 22-3.488-.774-6-4-6-8 0-8.667 8.666-10 8.666-20Z"
fill="#111827"></path></svg
>
<h2>What's New in Astro 5.0?</h2>
<p>
From content layers to server islands, click to learn more about the new
features and improvements in Astro 5.0
</p>
</a>
</div>
<style>
#background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
filter: blur(100px);
}
#container {
font-family: Inter, Roboto, "Helvetica Neue", "Arial Nova", "Nimbus Sans",
Arial, sans-serif;
height: 100%;
}
main {
height: 100%;
display: flex;
justify-content: center;
}
#hero {
display: flex;
align-items: start;
flex-direction: column;
justify-content: center;
padding: 16px;
}
.headline {
display: flex;
align-items: center;
gap: 16px;
}
#motion {
font-size: 22px;
font-weight: 700;
padding-bottom: 5px;
}
#motion-logo {
vertical-align: middle;
}
h1 {
font-size: 22px;
margin-top: 0.25em;
}
#links {
display: flex;
gap: 16px;
}
#links a {
display: flex;
align-items: center;
padding: 10px 12px;
color: #111827;
text-decoration: none;
transition: color 0.2s;
}
#links a:hover {
color: rgb(78, 80, 86);
}
#links a svg {
height: 1em;
margin-left: 8px;
}
#links a.button {
color: white;
background: linear-gradient(83.21deg, #3245ff 0%, #bc52ee 100%);
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.12),
inset 0 -2px 0 rgba(0, 0, 0, 0.24);
border-radius: 10px;
}
#links a.button:hover {
color: rgb(230, 230, 230);
box-shadow: none;
}
pre {
font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo,
Consolas, "DejaVu Sans Mono", monospace;
font-weight: normal;
background: linear-gradient(14deg, #d83333 0%, #f041ff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin: 0;
}
h2 {
margin: 0 0 1em;
font-weight: normal;
color: #111827;
font-size: 20px;
}
p {
color: #4b5563;
font-size: 16px;
line-height: 24px;
letter-spacing: -0.006em;
margin: 0;
}
code {
display: inline-block;
background:
linear-gradient(66.77deg, #f3cddd 0%, #f5cee7 100%) padding-box,
linear-gradient(155deg, #d83333 0%, #f041ff 18%, #f5cee7 45%) border-box;
border-radius: 8px;
border: 1px solid transparent;
padding: 6px 8px;
}
.box {
padding: 16px;
background: rgba(255, 255, 255, 1);
border-radius: 16px;
border: 1px solid white;
}
#news {
position: absolute;
bottom: 16px;
right: 16px;
max-width: 300px;
text-decoration: none;
transition: background 0.2s;
backdrop-filter: blur(50px);
}
#news:hover {
background: rgba(255, 255, 255, 0.55);
}
@media screen and (max-height: 368px) {
#news {
display: none;
}
}
@media screen and (max-width: 768px) {
#container {
display: flex;
flex-direction: column;
}
#hero {
display: block;
padding-top: 10%;
}
#links {
flex-wrap: wrap;
}
#links a.button {
padding: 14px 18px;
}
#news {
right: 16px;
left: 16px;
bottom: 2.5rem;
max-width: 100%;
}
h1 {
line-height: 1.5;
}
}
</style>
<script>
import { animate } from "motion";
animate("#title", { y: [-60, 0] }, { type: "spring", damping: 9 });
animate("#motion", { opacity: [0, 1] }, { delay: 2.5 });
animate("h1", { y: [-65, 0] }, { type: "spring", damping: 10, delay: 0.1 });
animate(
"code",
{ rotateZ: [0, 1] },
{ type: "spring", damping: 1, delay: 0.4 },
);
animate(
".button",
{ x: [3000, 0] },
{ type: "spring", delay: 0.3, damping: 30 },
);
animate("#discord", { opacity: [0, 1] }, { delay: 1.6 });
animate(
".box",
{ x: [-500, 0], opacity: [0, 1] },
{ type: "spring", damping: 12, delay: 1.9 },
);
</script>