Tween Animations
Relevant source files
The following files were used as context for generating this wiki page:
Tween animations in the @pcstyle/motion library provide a collection of duration-based easing presets and utilities built upon framer-motion. These animations allow for smooth, predictable transitions between states by interpolating values over a fixed timeline, as opposed to spring-based physics.
The system is categorized into transition presets, keyframe definitions, and sequence hooks that allow developers to apply consistent easing curves across the UI. These are particularly integrated into the project's "cyberpunk" aesthetic through specialized presets like easeCyber.
Sources: src/transitions/tween.ts, package.json:1-5
Core Transition Presets
The library exports a variety of Transition objects that define the duration and ease properties. These easing curves are defined using either string identifiers (e.g., "linear") or cubic-bezier arrays.
Easing Types
The following table summarizes the available tween presets:
| Preset Name | Duration | Easing Curve / Type | Description |
|---|---|---|---|
easeOut | 0.3s | [0.4, 0, 0.2, 1] | Standard ease-out for exit animations. |
easeIn | 0.3s | [0.4, 0, 1, 1] | Ease-in for entrance animations. |
easeInOut | 0.4s | [0.4, 0, 0.2, 1] | Balanced curve for smooth transitions. |
easeElastic | 0.6s | [0.68, -0.55, 0.27, 1.55] | Overshoot/anticipation effect. |
easeFast | 0.15s | "easeOut" | Quick snap for high-responsiveness. |
easeSlow | 0.6s | "easeInOut" | Gradual reveal for atmospheric effects. |
linear | 1.0s | "linear" | Constant speed for continuous loops. |
easeCyber | 0.2s | [0.9, 0, 0.1, 1] | Sharp, high-contrast cyberpunk movement. |
Sources: src/transitions/tween.ts:8-63
Keyframe-Based Tweens
Tween animations are often combined with keyframe arrays to create complex visual effects like glitches or pulses. Keyframes define an array of values that the animation engine "tweens" through over the specified duration.
The diagram shows how keyframe definitions are processed through variants or hooks to produce visual output.
Sources: src/keyframes/index.ts:1-70, src/variants/cyber.ts:6-14
Common Keyframe Definitions
Keyframes are exported as objects containing property arrays:
- glitchKeyframes: Random offsets in
xandycoordinates. - pulseKeyframes: Interpolates
opacityandscale. - flickerKeyframes: Rapidly oscillates
opacitybetween 1 and 0.8. - hologramKeyframes: Shifts
filter: hue-rotatefrom 0 to 360 degrees.
Sources: src/keyframes/index.ts:10-75
Programmatic Animation Sequences
For complex multi-step tweening, the library provides the useAnimationSequence hook. This hook utilizes the animate function from framer-motion to execute steps sequentially.
Sequence Logic Flow
This sequence diagram illustrates the asynchronous execution of animation steps within a sequence.
Sources: src/hooks/useAnimationSequence.ts:21-43
AnimationStep Configuration
The AnimationStep interface defines how individual tweens are configured within a sequence:
- target: A string selector for the DOM element.
- animation:
DOMKeyframesDefinition(the target properties). - options: Optional overrides for
duration,delay, orstagger.
Sources: src/hooks/useAnimationSequence.ts:8-18
Cyberpunk Variants
Tweening logic is heavily utilized in the cyber variants to create thematic effects. These variants use Infinity repeats and specific easing to maintain a digital aesthetic.
// Example of a looped tween using linear easing
export const scanline: Variants = {
initial: { backgroundPosition: "0 0" },
animate: {
backgroundPosition: ["0 0", "0 100%"],
transition: { duration: 8, repeat: Infinity, ease: "linear" },
},
};
Sources: src/variants/cyber.ts:16-22
Implementation Summary
Tween animations serve as the foundational timing mechanism for non-physical movement in the project. By centralizing easing curves in src/transitions/tween.ts and complex movement patterns in src/keyframes/index.ts, the library ensures that visual timing remains consistent across various components and gestures.