Unlocking the Power of Animations in SolidJS with Motion One
When it comes to building interactive web applications, managing state and handling user inputs are just the beginning. The way elements move and interact on the page can significantly impact the user experience, adding aesthetic value, providing visual feedback, guiding task flow, and demonstrating how elements relate to each other. In larger JavaScript frameworks like React, there are well-known libraries available for animation, such as React Spring and Framer Motion. However, Solid, being a smaller, more performance-focused framework, doesn’t have as many established animation libraries. But that doesn’t mean we can’t animate our Solid apps.
Introducing Motion One
Motion One is a powerful and flexible animation library that allows you to animate elements with minimal effort. Built on the Web Animations API, it provides a simple and intuitive way to animate elements in the DOM. The library comes with several features that make it a great choice for animating Solid apps, including ease of use, lightweight, and support for a wide variety of animations.
Setting Up Our SolidJS App
In this article, we’ll explore how to add animations to a Solid application using the Motion One library. We’ll start by setting up our Solid app and animating it with Motion One. We’ll use a starter repo as our base project, which includes a simple modal that we’ll animate to move in and out of the screen. We’ll also have routing set up so we can animate page transitions.
Prerequisites
Before we dive in, it’s essential to note that this article assumes you have some basic knowledge of JavaScript, Node.js, and the SolidJS framework. You should also have Node.js installed in your system.
Installing Motion One
To get started, we’ll install Motion One by running the following command in our terminal: npm install @motionone/solid. With Motion One installed, we can start animating our modal.
Animating SolidJS Elements with Motion One
To animate our modal, we’ll use the <Motion /> component from Motion One. The <Motion /> component is used to create an HTML or SVG element that is animatable. It also provides props for customizing the animation, including the initial state of the element, the animate state, the transition options, and the exit animation.
Setting the Initial Prop
The initial prop defines the initial state of the element and expects an object with CSS properties and values, which will be applied to the element when it renders. Let’s add an initial prop to our <Motion /> component to set the modal’s background color to green and rotate it 15 degrees when it renders.
Using the Animate Prop
The animate prop defines the animation state of the element. This prop defines the CSS properties and values we want to animate. Let’s add an animate prop to our <Motion /> component to animate the modal from its initial state to a purple background and no rotation.
Using Animate with Initial
We can also use the animate prop without the initial prop. When we do this, the element will animate from its default DOM state to the animate state. Let’s remove the initial prop from our <Motion /> component and use the animate prop to rotate the modal 360 degrees when it renders and change the background color to blue.
Writing Keyframe Animations with the Animate Prop
With the animate prop, we can also specify the starting state of the animation by passing the style property value as an array. This is called a keyframe animation. Let’s use the animate prop to animate the modal from a yellow background to a purple background.
Animating Along the X and Y Axes
We can also animate the position of the modal using the x and y properties of the animate object. Let’s make the modal slide up from the bottom of the screen when it renders. We’ll use the y property to animate the modal from 500px below the default DOM position to its default position.
Setting Animation Durations with the Transition Prop
The transition prop defines the duration and easing of the animation. Let’s add the transition prop to our <Motion /> component to set the animation duration to 0.5 seconds and use an ease-in-out transition.
Adding Exit Animations
We’ve seen how to animate elements when they are rendered. We can also animate elements when they are removed from the DOM. This is called an exit animation. Exit animations give our app a more polished feel. To add an exit animation to our Motion component, we have to first render it with the Solid <Show /> component.
Animating Page Transitions
In addition to individual component animations, Motion One can also handle page transitions in a smooth and efficient manner. We have two pages in our application: the Home page and the About page. Let’s add a page transition effect when navigating between these pages.
By following these steps, we’ve successfully added animations to our Solid application using the Motion One library. We’ve learned about animating CSS properties, adding enter and exit animations, and handling page transitions. The combination of Solid and Motion One offers endless possibilities for creating engaging and interactive web applications.