john/tractatus
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
tractatus/public/js
History
TheFlow fa01644c17 feat(phase3): implement scroll animations with Intersection Observer 
SUMMARY:
Implemented Phase 3 Task 3.1: Scroll Animations system using Intersection
Observer API for smooth, performant scroll-triggered animations on homepage.

CHANGES:

1. Created scroll-animations.js (new):
   - Intersection Observer-based animation system
   - Supports 7 animation types (fade-in, slide-up/down/left/right, scale-in, rotate-in)
   - Staggered delays via data-stagger attribute
   - Respects prefers-reduced-motion
   - Auto-initializes, can be disabled globally
   - Custom 'scroll-animated' event for other components

2. Enhanced tractatus-theme.css:
   - Added 100+ lines of scroll animation CSS
   - Smooth transitions using CSS transforms (GPU-accelerated)
   - Data-attribute based animation selection
   - Default animation (slide-up) if none specified
   - Accessibility: respects prefers-reduced-motion

3. Updated index.html (homepage):
   - Added scroll-animations.js script
   - Value proposition: slide-up animation
   - Three audience cards: scale-in with 100/200/300ms stagger
   - Capabilities heading: fade-in
   - Six capability cards: slide-up with 100-600ms stagger
   - All animations trigger on scroll (not page load)

ANIMATION TYPES:
- fade-in: Opacity 0 → 1
- slide-up: Translates from bottom (+2rem) → 0
- slide-down: Translates from top (-2rem) → 0
- slide-left: Translates from right (+2rem) → 0
- slide-right: Translates from left (-2rem) → 0
- scale-in: Scales from 0.95 → 1 with opacity
- rotate-in: Rotates from 12deg → 0 with scale

USAGE EXAMPLE:
<div class="animate-on-scroll" data-animation="slide-up" data-stagger="200">
  Content here
</div>

ACCESSIBILITY:
✓ Respects prefers-reduced-motion (disables all animations)
✓ GPU-accelerated transforms (60fps on modern devices)
✓ Progressive enhancement (graceful degradation)
✓ Zero CSP violations maintained

PERFORMANCE:
- Intersection Observer (better than scroll listeners)
- Unobserves elements after animation (memory efficient)
- Supports data-animate-repeat for repeatable animations
- CSS transitions (GPU-accelerated)

UI_TRANSFORMATION_PROJECT_PLAN.md:
✓ Phase 3 Task 3.1.1: Implemented Intersection Observer
✓ Phase 3 Task 3.1.2: Added scroll animations to homepage

NEXT STEPS:
- Phase 3 Task 3.1.3: Apply to all pages site-wide
- Phase 3 Task 3.2: Interactive architecture diagram

🤖 Generated with Claude Code (https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-10-19 15:09:59 +13:00
..
admin feat(admin): add publish/unpublish workflow UI to dashboard 2025-10-19 13:42:47 +13:00
components feat(i18n): add footer and privacy page translations (en/de/fr) 2025-10-19 14:44:14 +13:00
demos feat: comprehensive accessibility improvements (WCAG 2.1 AA) 2025-10-12 07:08:40 +13:00
utils feat: add multi-currency support and privacy policy to Koha system 2025-10-08 15:17:23 +13:00
blog-post.js feat: newsletter modal and deployment script enhancements 2025-10-14 13:11:46 +13:00
blog.js feat: newsletter modal and deployment script enhancements 2025-10-14 13:11:46 +13:00
case-submission.js fix(csp): clean all public-facing pages - 75 violations fixed (66%) 2025-10-19 13:17:50 +13:00
check-version.js fix(csp): clean all public-facing pages - 75 violations fixed (66%) 2025-10-19 13:17:50 +13:00
docs-app.js fix(mobile): implement navigation toggle for document viewer 2025-10-19 12:41:48 +13:00
docs-search-enhanced.js feat: enhance FAQ for Leader audience and improve navigation 2025-10-14 10:53:47 +13:00
docs-viewer-app.js feat: fix CSP violations & implement three audience paths 2025-10-07 12:21:00 +13:00
faq.js refactor: rewrite Copilot Q&A in measured, evidence-based tone 2025-10-14 14:19:46 +13:00
i18n-simple.js feat(i18n): enhance browser language detection with clear priority logging 2025-10-19 15:01:14 +13:00
koha-donation.js feat(koha): implement Stripe Customer Portal integration 2025-10-18 22:19:08 +13:00
koha-success.js fix(csp): clean all public-facing pages - 75 violations fixed (66%) 2025-10-19 13:17:50 +13:00
koha-transparency.js feat: complete Priority 2 - Enhanced Koha Transparency Dashboard 2025-10-11 17:14:34 +13:00
leader-page.js feat: add case submission portal admin interface and i18n support 2025-10-16 14:50:47 +13:00
media-inquiry.js fix(csp): clean all public-facing pages - 75 violations fixed (66%) 2025-10-19 13:17:50 +13:00
media-triage-transparency.js feat: comprehensive accessibility improvements (WCAG 2.1 AA) 2025-10-12 07:08:40 +13:00
researcher-page.js feat: add case submission portal admin interface and i18n support 2025-10-16 14:50:47 +13:00
scroll-animations.js feat(phase3): implement scroll animations with Intersection Observer 2025-10-19 15:09:59 +13:00
version-manager.js fix: PWA install button UX improvements and CSP compliance 2025-10-15 08:39:47 +13:00