Components
Scroll Velocity
Text animation that responds to scroll velocity with customizable speed and damping.
Scroll Velocity
The ScrollVelocity component creates text animations that respond to scroll velocity with customizable speed, damping, and stiffness. It's perfect for creating dynamic text effects that react to user scrolling.
Usage
Scroll Velocity
Nuxt Motion Block Nuxt Motion Block Nuxt Motion Block Nuxt Motion Block Nuxt Motion Block Nuxt Motion Block
Scroll Down Scroll Down Scroll Down Scroll Down Scroll Down Scroll Down
<template>
<div class="p-6 bg-gray-50 dark:bg-gray-900 rounded-lg">
<h3 class="text-lg font-bold mb-4 text-gray-900 dark:text-white">Scroll Velocity</h3>
<MScrollVelocity
:texts="['Nuxt Motion Block', 'Scroll Down']"
:velocity="100"
:damping="50"
:stiffness="400"
:num-copies="6"
/>
</div>
</template>
Props
scrollContainerRef
any
Reference to the scroll container element.
texts
string[]
Array of texts to display.
velocity
number
Base velocity of the animation.
class
string
CSS classes to apply to the text elements.
damping
number
Damping factor for the spring animation.
stiffness
number
Stiffness factor for the spring animation.
numCopies
number
Number of copies of the text to display.
velocityMapping
object
Mapping of scroll velocity to animation speed.
parallaxClass
string
CSS classes to apply to the parallax container.
scrollerClass
string
CSS classes to apply to the scroller container.
parallaxStyle
object
Inline styles to apply to the parallax container.
scrollerStyle
object
Inline styles to apply to the scroller container.
Examples
Basic Scroll Velocity
Scroll Velocity
Dynamic text effects that respond to scroll speed for engaging parallax experiences
Fast Scroll Fast Scroll Fast Scroll Fast Scroll Fast Scroll Fast Scroll
Medium Speed Medium Speed Medium Speed Medium Speed Medium Speed Medium Speed
Slow Motion Slow Motion Slow Motion Slow Motion Slow Motion Slow Motion
<template>
<div class="p-4 bg-gray-50 dark:bg-gray-900 rounded-lg">
<h3 class="text-lg font-bold mb-4 text-gray-900 dark:text-white">Basic Scroll Velocity</h3>
<MScrollVelocity
:texts="['Scroll Effect']"
:velocity="50"
/>
</div>
</template>
Custom Scroll Velocity
Custom Scroll Velocity
Fast Scroll Fast Scroll Fast Scroll Fast Scroll Fast Scroll Fast Scroll Fast Scroll Fast Scroll
Effect Effect Effect Effect Effect Effect Effect Effect
<template>
<div class="p-4 bg-gray-50 dark:bg-gray-900 rounded-lg">
<h3 class="text-lg font-bold mb-4 text-gray-900 dark:text-white">Custom Scroll Velocity</h3>
<MScrollVelocity
:texts="['Fast Scroll', 'Effect']"
:velocity="200"
:damping="30"
:stiffness="600"
:num-copies="8"
class="text-5xl font-bold text-purple-600 dark:text-purple-400"
/>
</div>
</template>