Scroll Reveal Laravel Package

Getting Started

Minimal Setup

1. Installation:

   composer require laraextend/scroll-reveal
   

2. Publish Assets (if needed):

   php artisan vendor:publish --provider="Laraextend\ScrollReveal\ScrollRevealServiceProvider"
   

3. Basic Usage:

   @scrollRevealScripts
   <x-scroll-reveal>
       <div class="your-content">This will animate on scroll!</div>
   </x-scroll-reveal>
   

First Use Case

Add subtle animations to a hero section:

<section class="hero">
    @scrollRevealScripts
    <x-scroll-reveal :delay="100" :duration="800" :distance="50">
        <h1 class="text-4xl">Welcome to Our Site</h1>
        <p class="text-xl">Scroll down to see the magic</p>
    </x-scroll-reveal>
</section>

Implementation Patterns

Core Workflows

1. Component Attributes:

   <x-scroll-reveal
       :delay="300"          <!-- Animation delay in ms -->
       :duration="1000"      <!-- Animation duration -->
       :distance="100"       <!-- Trigger distance from viewport -->
       :once="true"         <!-- Disable repeat on re-scroll -->
       :animate="['fadeIn', 'zoomIn']"  <!-- Multiple animations -->
       :threshold="0.1"      <!-- Intersection Observer threshold -->
   >
   

2. Livewire Integration:

   <div wire:ignore>
       @scrollRevealScripts
       <x-scroll-reveal>
           {{ $livewireContent }}
       </x-scroll-reveal>
   </div>
   

3. Dynamic Configuration:

   // In a controller or service
   ScrollReveal::configure(function ($config) {
       $config->defaultDelay = 500;
       $config->defaultDuration = 1200;
   });
   

Integration Tips

• Performance: Use wire:ignore for Livewire components to prevent re-renders
• Conditional Loading: Wrap @scrollRevealScripts in @if(request()->wantsJson()) ... @endif for API routes
• Custom Animations: Extend the default animations by publishing the config and adding CSS classes

Gotchas and Tips

Common Pitfalls

1. Animation Not Triggering:

   • Ensure the element is in the DOM when the page loads (not dynamically injected)
   • Check for CSS conflicts (e.g., overflow: hidden on parents)
   • Verify IntersectionObserver is supported (fallback provided)

2. Livewire Conflicts:

   • Always wrap in wire:ignore to prevent reactivity issues
   • Use wire:init or wire:loaded events if animations need to trigger after Livewire mounts

3. Configuration Overrides:

   • Component attributes override global config
   • Global config overrides default values

Debugging Tips

• Check Initialization:

  console.log(window.scrollRevealInitialized); // Should be true
  

• Inspect Observers:

  console.log(IntersectionObserver); // Verify browser support
  

• Animation Logs:

  <x-scroll-reveal :debug="true">
      <!-- Content -->
  </x-scroll-reveal>
  

Extension Points

1. Custom Animations:

   • Publish the config:

     php artisan vendor:publish --tag=scroll-reveal-config
     

   • Add new animation classes to config/scroll-reveal.php under animations

2. Driver Overrides:

   • Replace the default driver by publishing the JS file and updating the @scrollRevealScripts directive

3. Server-Side Rendering:

   • Disable animations for SSR by checking request()->wantsJson() or app()->environment('local') in the directive

Pro Tips

• Combine with Animate.css: Use the package's built-in animation classes (e.g., fadeIn, slideUp) for consistency
• Responsive Delays: Adjust :delay based on viewport size using Alpine.js or Tailwind responsive classes
• Smooth Scrolling: Pair with smooth-scroll packages for better UX when animations trigger on scroll