- How do I add in-view animations to my Laravel Blade templates?
- Simply include the Blade component `<x-inview-animations-assets />` in your layout file. This auto-loads the required CSS and JS. Then, add the `reveal` class and `data-anim` attribute (e.g., `data-anim='fade-up'`) to any element you want to animate on scroll.
- Which Laravel versions does this package support?
- The package is optimized for Laravel 8+ and works seamlessly with Blade components. It leverages modern JavaScript features like IntersectionObserver, so older Laravel versions (pre-8) may require polyfills or adjustments.
- Can I customize animation delays, durations, or repeat behavior?
- Yes. Use the `data-delay`, `data-duration`, and `data-repeat` attributes on elements with the `reveal` class. For example, `data-delay='0.5'` delays the animation by 500ms, and `data-repeat='true'` makes it loop continuously.
- Does this package work with Tailwind CSS or other CSS frameworks?
- Absolutely. The package includes a default CSS file, but you can override or extend its styles to match Tailwind or any other framework. The animations are designed to be framework-agnostic and focus on the `data-anim` attribute for triggering effects.
- Will this package conflict with Alpine.js or Stimulus in my Laravel app?
- No, it won’t conflict if you namespace your directives properly. The package uses Blade components and `data-anim` attributes, which are distinct from Alpine.js or Stimulus. Just ensure you’re not using another IntersectionObserver-based library simultaneously.
- How do I animate progress rings or charts in my dashboard?
- Use the `.dna-card` class with `data-type='ring'` and specify the percentage with `data-percent`. For example, `<article class='dna-card' data-type='ring' data-percent='75'>` will animate a ring progress bar to 75%. The package includes SVG-based animations for dynamic data visualization.
- Is there a performance impact if I animate many elements on a page?
- Performance impact is minimal if used judiciously. IntersectionObserver is efficient, but animating 50+ elements may require optimization. Test with tools like Lighthouse to monitor scroll performance, and consider lazy-loading animation scripts for off-screen elements.
- Can I use this package in a Laravel SPA hybrid app (e.g., Inertia.js)?
- This package is designed for server-rendered Blade templates and may not work optimally in SPAs like Inertia.js. For SPAs, consider using Vue/React animation libraries instead, as they handle dynamic rendering better. However, it works well for traditional Laravel apps with Blade.
- How do I handle legacy browser support, like IE11?
- IntersectionObserver requires polyfills for older browsers like IE11. The package doesn’t include them by default, but you can add a polyfill like `intersection-observer` via npm or CDN. Test thoroughly to ensure graceful degradation if JavaScript is disabled.
- Are there alternatives to this package for Laravel animations?
- Yes. For simpler animations, consider using Tailwind CSS’s built-in transitions or libraries like Animate.css. For more advanced scroll-triggered effects, explore Laravel packages like `spatie/laravel-activitylog` (for event-based animations) or frontend frameworks like Alpine.js. However, this package offers a dedicated, lightweight solution for in-view animations without extra dependencies.