feat: content entrance animations #52

Closed
opened 2026-06-04 12:04:46 +00:00 by jmiller · 1 comment
Owner

Summary

Add configurable entrance animations for the overlay content (title, text, card). Content elements can slide up, fade in, or use a typewriter effect for a more dynamic first impression.

Requirements

  • New contentAnimation list field: none, fade-in, slide-up, slide-left, slide-right, typewriter
  • New contentAnimationDelay number field (ms, default 0)
  • CSS keyframe animations for each type
  • Animations trigger when the hero enters the viewport (IntersectionObserver)
  • Respect prefers-reduced-motion
  • Works independently of the existing cardDelay field

Acceptance Criteria

  • Content animates in with the selected effect
  • Animation triggers on scroll-into-view, not just page load
  • Delay parameter works correctly
  • No animation under reduced-motion preference
  • Works with and without card mode
## Summary Add configurable entrance animations for the overlay content (title, text, card). Content elements can slide up, fade in, or use a typewriter effect for a more dynamic first impression. ## Requirements - New `contentAnimation` list field: none, fade-in, slide-up, slide-left, slide-right, typewriter - New `contentAnimationDelay` number field (ms, default 0) - CSS keyframe animations for each type - Animations trigger when the hero enters the viewport (IntersectionObserver) - Respect `prefers-reduced-motion` - Works independently of the existing `cardDelay` field ## Acceptance Criteria - [ ] Content animates in with the selected effect - [ ] Animation triggers on scroll-into-view, not just page load - [ ] Delay parameter works correctly - [ ] No animation under reduced-motion preference - [ ] Works with and without card mode
jmiller added the cssenhancementinvalidjoomla labels 2026-06-04 12:04:46 +00:00
Author
Owner

Branch created: feature/52-feat-content-entrance-animations

git fetch origin
git checkout feature/52-feat-content-entrance-animations
Branch created: [`feature/52-feat-content-entrance-animations`](https://git.mokoconsulting.tech/MokoConsulting/MokoJoomHero/src/branch/feature/52-feat-content-entrance-animations) ```bash git fetch origin git checkout feature/52-feat-content-entrance-animations ```
Sign in to join this conversation.
Type
Status
Priority
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: MokoConsulting/MokoJoomHero#52