Sine Wave Animations
Sine wave animations create smooth, periodic motion perfect for creating oscillating, rhythmic, and cyclical animation behavior.
- 🐦️ Smooth oscillating motion
- 🐦️ Precise frequency control
- 🐦️ Perfect for looping animations
- 🐦️ Real-time parameter updates
Basic Usage Create a simple oscillating animation using createSineWave:
import { createSineWave } from 'ararajs'
function OscillatingBox() {
const [motion] = createSineWave({
amplitude: 50, // Oscillates 50px in each direction
frequency: 0.5, // Complete cycle every 2 seconds
offset: 100 // Center of oscillation at 100px
})
return (
<div style={{
transform: `translateX(${motion.position}px)`
}}>
🔵
</div>
)
}Configuration Options Sine waves can be customized through several parameters:
type SineWaveOptions = {
offset: number // Center position of the oscillation (default: 0)
frequency: number // Oscillations per second (default: 1)
amplitude: number // Size of the oscillation (default: 1)
phase: number // Starting point in the cycle in radians (default: 0) (2 * Math.PI is 1 turn)
}Understanding Parameters
Offset - The center point around which the oscillation occurs Frequency - How many complete cycles occur per second Amplitude - How far the motion deviates from the offset Phase - Where in the cycle the animation starts (in radians)
Visual Parameter Guide Here’s how different parameters affect the motion:
// Center oscillation
const centered = {
offset: 0,
amplitude: 50,
frequency: 1
}
// Shifted right
const shifted = {
offset: 100, // Moves entire oscillation right
amplitude: 50,
frequency: 1
}
// Fast, small oscillation
const fast = {
offset: 0,
amplitude: 10, // Smaller movement
frequency: 4 // 4 cycles per second
}
// Slow, wide oscillation
const wide = {
offset: 0,
amplitude: 200, // Large movement
frequency: 0.2 // One cycle every 5 seconds
}Example: Sine Wave 2D Section titled Example: Sine Wave 2D
import { cn } from '@lib/cn'
import { createElementSize } from '@solid-primitives/resize-observer'
import { createSignal } from 'solid-js'
import { createSineWave2D } from 'ararajs'
export function SineWave2DDemo(props: { class?: string; ballClass?: string }) {
const [container, setContainer] = createSignal<HTMLDivElement>()
const containerSize = createElementSize(container)
const [ball, setBall] = createSignal<HTMLDivElement>()
const ballSize = createElementSize(ball)
const radius = 90
const freq = 1
const [body] = createSineWave2D({
amplitude: [radius, radius],
frequency: [freq, freq],
phase: [Math.PI / 2, 0],
})
const xOffset = () => {
return (
body.position[0] +
-(ballSize.width ?? 0) / 2 +
(containerSize.width ?? 0) / 2
)
}
const yOffset = () => {
return (
body.position[1] +
-(ballSize.height ?? 0) / 2 +
(containerSize.height ?? 0) / 2
)
}
const paddingY = 32
return (
<div
class={cn(
'h-full w-full overflow-hidden rounded-lg shadow-inner',
props.class,
)}
style={{
'min-height': `${2 * radius + 2 * paddingY + (ballSize.height ?? 0)}px`,
}}
ref={setContainer}
>
<div
class={cn(
'size-10 rounded-full bg-arara-text/70 shadow-xl',
props.ballClass,
)}
style={{
transform: `translate(${xOffset()}px, ${yOffset()}px)`,
}}
ref={setBall}
/>
</div>
)
}Reactive Parameters Sine waves can respond to changing parameters in real-time:
function ReactiveOscillation() {
const [frequency, setFrequency] = createSignal(1)
const [motion] = createSineWave(() => ({
frequency: frequency(),
amplitude: 50
}))
return (
<>
<input
type="range"
min="0.1"
max="5"
step="0.1"
value={frequency()}
onInput={(e) => setFrequency(Number(e.target.value))}
/>
<div style={{
transform: `translateX(${motion.position}px)`
}}>
🔵
</div>
</>
)
}