View the demo.
DISCLAIMER: This package is still in active development and is not ready for production use. I'm open to any suggestions on improving this package.
To install the "alpine-motion" package, you can use npm, pnpm or yarn. Run the following command in your project directory:
npm install @braedencrankd/alpine-motion
# or
yarn add @braedencrankd/alpine-motion
# or
pnpm install @braedencrankd/alpine-motion
Import the alpine-motion
plugin in your project entry point.
import alpineMotion from "alpine-motion";
Alpine.plugin(alpineMotion);
Define the x-motion
directive on an element to create a motion animation. The following example will create a motion animation that will rotate the element 90 degrees over 1.5 seconds.
Note: make sure to add the x-init
or x-data
directive to the container element to ensure the x-motion
is initialized when Alpine is loaded.
<div x-init>
<div class="flex flex-wrap gap-2 mb-10">
<!-- Playing a named animation -->
<button
class="px-6 py-1.5 rounded"
@click="$motion('box-animation-1').play()"
>
Play
</button>
<!-- Plauing another named animation on the same element -->
<button
class="px-6 py-1.5 rounded"
@click="$motion('box-animation-2').play()"
>
Reverse
</button>
<!-- Pausing an animation -->
<button
class=" px-6 py-1.5 rounded bg-green-500 text-white"
@click="$motion('box-animation-1').pause()"
>
Pause
</button>
</div>
<!-- Defining two different animations on the same element -->
<div
x-motion:box-animation-1.rotate.90deg.duration.1500ms
x-motion:box-animation-2.rotate.-90deg.duration.1500ms
class="w-24 h-24 bg-indigo-500 rounded-lg"
></div>
</div>
The simplist way to configure animation is to use modifiers. Modifiers come in pairs of property
and value
. The following example will create a motion animation that will rotate the element 90 degrees over 1.5 seconds.
<div x-motion:box-animation-1.rotate.90deg.duration.1500ms>...</div>
Note: Each modifier corresponds to the options defined by the Motion One package: the documentation can be found here.
Alternativly you can pass a list of objects to the x-motion
directive.
<div x-motion:box-animation-three="{ rotate: 90 }, { duration: 1.5 }">...</div>
The benefit of this syntax is that you can pass Alpine data into the values of the object. For example:
Here we are updating the the currentRotationPos
variable when the buttons are clicked. Because this value is being used in the animation, the animation will run with the updated value.
<div x-data="{currentRotationPos: 0}">
<div class="flex flex-wrap gap-2 mb-6">
<button class="px-6 py-1.5 rounded" @click="currentRotationPos += 90;">
+90
</button>
<button class="px-6 py-1.5 rounded" @click="currentRotationPos -= 90;">
-90
</button>
</div>
<div
x-motion:box-animation-three="{ rotate: currentRotationPos }, { duration: 1.5 }"
class="w-24 h-24 bg-indigo-500 rounded-lg"
></div>
</div>