Laravel Inview Animations Laravel Package

Getting Started

Minimal Setup

1. Installation

   composer require bertux77/laravel-inview-animations
   

   Publish the config (if needed):

   php artisan vendor:publish --provider="Bertux77\LaravelInviewAnimations\LaravelInviewAnimationsServiceProvider"
   

2. Basic Blade Usage Add the package's JS/CSS to your layout (usually app.blade.php):

   @inviewAnimations
   

   Use the inview directive on any element:

   <div inview="reveal">
       This will fade in when scrolled into view.
   </div>
   

3. First Use Case Animate a hero section on a landing page:

   <section inview="reveal" data-inview-options='{"delay": 100, "duration": 1000}'>
       <h1 class="text-4xl">Welcome to our site</h1>
   </section>
   

Implementation Patterns

Common Workflows

1. Reveal Animations

   <!-- Basic reveal -->
   <div inview="reveal">...</div>
   
   <!-- With custom options -->
   <div inview="reveal" data-inview-options='{"direction": "bottom", "easing": "ease-in-out"}'>...</div>
   

2. Counter Animations

   <div inview="counter" data-inview-options='{"from": 0, "to": 1000, "suffix": "+", "duration": 2000}'>
       {{ $counter }}
   </div>
   

3. Skill Bars

   <div inview="skill-bar" data-inview-options='{"percentage": 90, "color": "#4CAF50", "height": "20px"}'>
       <div class="skill-bar-fill"></div>
   </div>
   

Integration Tips

• Dynamic Data: Use Blade variables for counters/skill bars:

  <div inview="counter" data-inview-options='{"from": 0, "to": {{ $dynamicValue }}, "duration": 2000}'>...</div>
  

• Conditional Animations: Disable on mobile via @media queries or Laravel logic:

  @if(!request()->isMobile())
      <div inview="reveal">...</div>
  @endif
  

• Custom Animations: Extend the package by adding new animation types in app/Providers/AppServiceProvider.php:

  use Bertux77\LaravelInviewAnimations\Facades\InviewAnimations;
  
  InviewAnimations::extend('custom', function ($element, $options) {
      // Custom logic
  });
  

Gotchas and Tips

Pitfalls

1. Performance

   • Avoid animating too many elements at once. Use data-inview-options to throttle animations:

     <div inview="reveal" data-inview-options='{"throttle": 500}'>...</div>
     

   • Disable animations for non-critical sections if the page loads slowly.

2. Mobile Devices

   • Some mobile browsers may not support IntersectionObserver reliably. Test thoroughly.
   • Fallback to a simple class toggle if needed:

     <div inview="reveal" class="fade-in">...</div>
     

3. Caching Issues

   • Clear view cache if animations stop working:

     php artisan view:clear
     

Debugging

• Check Console: Open browser dev tools (F12) to see if the package JS loads and if errors appear.
• Verify Directives: Ensure @inviewAnimations is included in the Blade template.
• Inspect Elements: Confirm data-inview attributes are present on target elements.

Configuration Quirks

• Default Options: Override defaults in config/inview-animations.php:

  'default_options' => [
      'rootMargin' => '0px',
      'threshold' => 0.1,
  ],
  

• Animation Triggers: Adjust threshold to control when animations trigger (e.g., 0.5 for halfway into view).

Extension Points

1. Custom Animations Register new animations in the service provider:

   InviewAnimations::extend('bounce', function ($element, $options) {
       $element->classList.add('bounce-animation');
   });
   

   Then use in Blade:

   <div inview="bounce">...</div>
   

2. Event Listeners Listen for animation events via JavaScript:

   document.addEventListener('inview:start', (e) => {
       console.log('Animation started:', e.detail.element);
   });
   

3. Server-Side Logic Use Laravel to dynamically generate animation options:

   $options = [
       'delay' => auth()->check() ? 300 : 0,
       'duration' => config('app.environment') === 'production' ? 1500 : 500,
   ];
   

   <div inview="reveal" data-inview-options='@json($options)'>...</div>