🎠Ontology-Based Animations
Animations automatically applied through SCSS ontology - no JavaScript needed in subdomains!
Entity Animations
Elements using genesis-entity() mixins get automatic animations based on their role
Primary Entity
Uses: @include genesis-entity('primary');
Gets: fadeInUp entrance + card hover effect
Secondary Entity
Uses: @include genesis-entity('secondary');
Gets: fadeIn entrance + subtle hover
Imperative Entity
Uses: @include genesis-entity('imperative');
Gets: bounceIn entrance + pulse emphasis
Synapse Animations
Interactive elements using genesis-synapse() get hover animations
Cognition Animations
Typography using genesis-cognition() gets entrance animations
Axiom Heading
This is discourse text using genesis-cognition('discourse')
Scroll-Triggered Animations
Elements using genesis-state('scroll-triggered') reveal on scroll
How It Works
Subdomain SCSS
.my-card {
@include genesis-entity('primary');
}Subdomain uses ontological mixins
HTML
<div class="my-card">
Content here
</div>Simple semantic HTML
Auto-Animation
✨ Animations automatically applied!
- fadeInUp entrance
- Card hover effect
- Reduced motion support
Benefits
🎯 Zero Subdomain Code
Subdomains only use SCSS mixins. No JavaScript, no data attributes, no manual setup.
🧬 Ontologically Pure
Animations are semantic - tied to role, not appearance. Change styling without breaking animations.
♿ Accessible by Default
Automatic reduced motion support. Animations disabled for users who prefer reduced motion.
🎨 Consistent Experience
All subdomains get the same high-quality animations through the ontology system.