An AlpineJS plugin for using the MotionOne API with Alpine Directives
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.
- Motion One¸
- Alpine JS
- Installation
- Setup
- Usage
- Using the x-motion Directive
- Nameless Animations
- Named animation
- $motion magic ✨
- Reactive Animations 🪄
- in-view modifier
- Scroll Triggered Animations 📜
- Scroll Triggered Animations with Alpine Magic 🪄
``html
src="https://unpkg.com/@braedencrankd/alpine-motion@latest/dist/alpineMotion.min.js"
>
`
To install the "alpine-motion" package, you can use npm, pnpm or yarn. Run the following command in your project directory:
`bash`
npm install @braedencrankd/alpine-motionor
yarn add @braedencrankd/alpine-motionor
pnpm install @braedencrankd/alpine-motion
Import the alpine-motion plugin in your project entry point.
`js`
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._
`html
@click="$motion('box-animation-1').play()"
>
Play
@click="$motion('box-animation-2').play()"
>
Reverse
'box-animation-1': [ { rotate: 90 }, { duration: 1 } ],
'box-animation-2': [ { rotate: -90 }, { duration: 1 } ],
}"
class="w-24 h-24 bg-indigo-500 rounded-lg"
>
$3
The simplist way to declare animations is by creating nameless animation using the
directive. Nameless animations are run when the animated element is visible in the viewport.`html
...
`$3
The alternative method of declaring animations is by creating named animations. This is where you can delcare one or more animations in
directive expressions where the name is the key for each animation.`html
x-motion="{
'animation-one': [ {x: 100} , { duration: 0.5 } ],
}"
class="mt-10 w-24 h-24 bg-teal-400 rounded-lg"
>The benefit of this syntax is that these animations get put in an Alpine Store where you can run the animations at any point.
$3
The
alpine magic is used for getting and executing stored animations.`html
@click="$motion('box-animation-1').play()"
>
Play
`$3
Here we are updating the the
variable when the buttons are clicked. Because this value is being used in the animation, the animation will run with the updated value.`html
class="w-24 h-24 bg-indigo-500 rounded-lg"
>
$3
The
modifier is used to trigger animations when the element is in the viewport.`html
'in-view-animation': [ { rotate: 90 }, { duration: 1 } ],
}"
>
...
$3
Basic scroll triggered animations are created by adding the
modifier to the x-motion directive.`html
...
`If you need to localize where the scroll starts and stops you can define the
and scrollContainer options.`html
>
...
$3
You can also use Alpine Magic to trigger scroll triggered animations.
html
'scroll-animation': [ { rotate: 90 } ],
}"
>
...