Introduction
Overview
Oku Motion is a simple yet powerful motion library for Vue3 and Nuxt3.
It enables effortlessly smooth animations for web elements, harnessing the power of the Web Animations API for optimal performance. Its versatility extends to animating anything, offering creative freedom and ensuring your website stands out with visually stunning effects.
In this quick overview, we'll take a look at some of the APIs that Oku Motion offers.
It's based on Motion One.
The <motion /> component
The core of Motion is the motion component. Think of it as a plain HTML or SVG element, supercharged with animation capabilities.
<Motion/>Gestures
<motion /> extends Vue's event system with powerful gesture recognisers. It supports hover, press and more.
<Motion
:hover="{ scale: 1.2 }"
:press="{ scale: 0.8 }" />Keyframes
Set a value as an array and Motion will animate through each of these values in turn.
By default, each keyframe will be spaced evenly throughout the animation, but the exact timing and easing can be configured via the transition property.
<Motion
class="box"
:animate="{
scale: [1, 2, 2, 1, 1],
rotate: [0, 0, 180, 180, 0],
borderRadius: ['0%', '0%', '50%', '50%', '0%'],
}"
:transition="{
duration: 2,
ease: 'easeInOut',
times: [0, 0.2, 0.5, 0.8, 1],
repeat: Infinity,
repeatDelay: 1,
}"
/>Variants
Variants can be used to animate entire sub-trees of components with a single animate prop. Options like when and staggerChildren can be used to declaratively orchestrate these animations.
Scroll-triggered animations
Elements can animate as they enter and leave the viewport with the handy whileInView prop.