How to use Motion One Animation Library

Motion One A new animation library, built on the Web Animations API for the smallest filesize and the fastest performance.

Motion One – A Lightweight JavaScript Animation Library

Shockingly simple.

Motion One packs the power of the Web Animations API into a minimal API.

It adds new features like selectors, individual transforms, timeline sequencing and more.

animate("#ball", { scale: 1.3 })

Size matters.

Motion One’s animate function is just 3.8kb, and scroll is only 2.5kb.

Both less than 20% the size of their Greensock equivalents.

animate("#ball", { scale: 1.3 })

Max performance.

Motion uses hardware accelerated animations where possible.

So your UI stays snappy and responsive, even under heavy workloads.

Best in dev.

Motion DevTools is a Chrome extension for inspecting, editing and exporting animations made with Motion One or CSS.

Steps For Motion One

Motion One is a web development project, and setting it up involves several essential steps. In this guide, we’ll walk you through each step in detail to help you get started successfully.

Step 1: Create a Folder

• Begin by creating a folder for your MotionOne project. You have the flexibility to name this folder whatever you prefer, as it will serve as the main directory for your project.

Step 2: Create an index.html File

• Inside the folder you created in Step 1, you need to create an HTML file with the name “index.html.” Ensure that the file name is “index,” and its extension is “.html.” This HTML file will serve as the entry point for your Motion One project.

Step 3: Create a style.scss File

• Still within the same folder, create a SCSS (Sass) file named “style.scss.” Similar to the HTML file, make sure that the file name is “style,” and its extension is “.scss.” This file will contain your project’s CSS styles written in Sass syntax.

Step 4: Install Motion

• To work with MotionOne, you’ll need to install the necessary dependencies. Open your terminal and run the following command: npm install motion. This command will download and install Motion’s packages and dependencies.

Step 5: Install Parcel (if not already installed)

• MotionOne utilizes Parcel as a bundler. If you don’t have Parcel installed, you’ll need to do so. To install Parcel, use the following command: npm install -g parcel-bundler.

Step 6: Run Your Motion One Project

• With all the necessary files in place and the dependencies installed, you can now run your MotionOne project.
  • Open your terminal.
  • Navigate to the project folder you created in Step 1 using the cd command.
  • Run the following command: npm parcel index.html.
  • If Parcel wasn’t previously installed, you should install it using npm install -g parcel-bundler as mentioned in Step 5.
  • Once the Parcel bundler is running, you can access your Motion One project by opening your web browser and navigating to the provided URL (usually http://localhost:1234).

By following these detailed steps, you’ll have successfully set up your Motion One project, and you can now start developing your web application. Happy coding!