Standard Variants (Fade, Scale, Slide)
Relevant source files
The following files were used as context for generating this wiki page:
The @pcstyle/motion library provides a collection of standardized Variants for Framer Motion, specifically designed to handle common UI transitions such as fading, scaling, and sliding. These variants serve as the foundational building blocks for more complex animations within the PCSTYLE ecosystem, ensuring consistent behavior for entering and exiting elements. Sources: package.json:1-5, src/index.ts:1-7
These standard variants are exported from the variants directory and aggregated in a central index for ease of use. They define two primary states: hidden (the initial or exit state) and visible (the final or animate state). Sources: src/variants/index.ts:1-4, src/variants/fade.ts:6-10
Architecture and Data Structure
The standard variants are implemented as objects conforming to the Variants type from the framer-motion package. Each variant typically defines a transition between a hidden state and a visible state, though some use initial and animate for continuous or state-specific effects.
The diagram above illustrates how variants are organized and exported through the library's entry points. Sources: src/index.ts:6-7, src/variants/index.ts:1-3
Fade Variants
Fade variants primarily manipulate the opacity property. They are often combined with slight positional offsets (e.g., y: 20) to create "rise" or "drop" entrance effects.
| Variant | Hidden State | Visible State |
|---|---|---|
fadeIn | opacity: 0 | opacity: 1 |
fadeOut | opacity: 1 | opacity: 0 |
fadeInUp | opacity: 0, y: 20 | opacity: 1, y: 0 |
fadeInDown | opacity: 0, y: -20 | opacity: 1, y: 0 |
fadeInScale | opacity: 0, scale: 0.95 | opacity: 1, scale: 1 |
Sources: src/variants/fade.ts:6-38
Scale Variants
Scale variants manage the scale and opacity properties. They include specific "pop" and "bounce" behaviors achieved through spring transitions.
The diagram shows the relationship between scale values in different variant types. Sources: src/variants/scale.ts:6-45
- Standard Scaling:
scaleInandscaleOutuse a default scale range of 0.8 to 1.0. Sources: src/variants/scale.ts:6-14 - Physics-Based Scaling:
popInandbounceInutilize spring physics.popInusesstiffness: 400, damping: 15, whilebounceInusesstiffness: 500, damping: 10. Sources: src/variants/scale.ts:16-23, src/variants/scale.ts:38-45 - Continuous Scaling: The
pulsevariant uses an array-based keyframe for itsanimateproperty:scale: [1, 1.05, 1]. Sources: src/variants/scale.ts:47-53
Slide Variants
Slide variants utilize percentage-based strings (e.g., "100%") for the x and y axes to ensure responsiveness regardless of element size.
| Variant | Hidden Coordinate | Visible Coordinate |
|---|---|---|
slideIn | x: "100%" | x: 0 |
slideUp | y: "100%" | y: 0 |
slideDown | y: "-100%" | y: 0 |
slideRight | x: "-100%" | x: 0 |
Sources: src/variants/slide.ts:6-33
Integration with Orchestration
These standard variants are frequently used as children within container-based orchestration, such as the staggerContainer. When a parent uses staggerChildren, the standard variants (like staggerItem or staggerItemSlide) automatically inherit the timing logic. Sources: src/variants/stagger.ts:6-13, src/variants/stagger.ts:47-60
Conclusion
The Standard Variants provide a robust set of predefined animations that leverage Framer Motion's power while abstracting the complexity of coordinate math and physics settings. By categorizing animations into Fade, Scale, and Slide, the library offers developers predictable and combinable motion patterns for modern web interfaces.