Requirements #
Before using the Cursor Trail Extension, ensure you have:
- Divi Theme or Divi Builder installed and activated
- DiviAnimator installed and activated
- Cursor Trail Extension enabled in DiviAnimator settings
How to Enable Cursor Trail #
- Log in to your WordPress Dashboard
- Navigate to DiviAnimator → Extensions
- Locate Cursor Trail
- Toggle the Enable switch to activate
- Click Save Settings
Once enabled, Cursor Trail settings become available throughout your site.
Overview #
The Cursor Trail Extension creates an animated trail effect that follows your mouse cursor across the page. Users can see a gallery of images or elements sequentially appear and animate along their cursor path, creating an engaging and interactive visual experience.
This extension is powered by GSAP (GreenSock Animation Platform) and offers full control over the animation behavior, timing, easing, and visual properties.
Settings Reference #
Enable #
Location: Cursor Trail → Enable
The master toggle for the Cursor Trail effect.
- Toggle On: Activates the cursor trail feature across your entire site
- Toggle Off: Disables the effect without removing settings
The toggle appears as a blue switch when active.
Gallery #
Location: Cursor Trail → Gallery
Upload or select the images that will appear in your cursor trail.
How to Use:
- Click the Gallery section
- Click the + button to add images
- Choose from your media library or upload new images
- Each image will appear sequentially as the cursor moves
- Images appear as thumbnail previews in a grid layout
Best Image Specifications:
- Size: 80px × 80px to 200px × 200px (smaller sizes perform better)
- Format: PNG (with transparency) or JPG
- Optimization: Compress images to reduce loading impact
- Quantity: 4-8 images recommended for smooth animation flow
Tips:
- Use images with consistent dimensions
- Transparent PNGs work best for seamless blending
- Avoid overly complex or detailed images
- Consider using icons, emojis, or simple illustrations
Image Order #
Location: Cursor Trail → Image Order
Controls the sequence in which images appear in the trail.
Available Options:
- Default (Upload Order): Images appear in the order they were uploaded to the gallery
- Random: Images appear in random order each time the cursor moves
Use Cases:
- Default: Best when you want a consistent visual pattern
- Random: Creates variety and unpredictability for more dynamic interactions
Image Distance #
Location: Cursor Trail → Image Distance
Slider Range: 0 - 200 pixels (Default: 65)
Controls the spacing between consecutive trail images as they follow the cursor.
What It Does:
- Low values (10-30): Images cluster tightly together, creating a dense trail
- Medium values (50-80): Balanced spacing for a readable trail
- High values (100+): Sparse trail with significant gaps between images
Visual Impact:
- Smaller distances = more image overlap = busier effect
- Larger distances = more breathing room = cleaner look
Recommendations:
- Desktop: 50-80 pixels
- Mobile: 30-50 pixels
- For dense galleries (8+ images): 40-60 pixels
- For sparse galleries (3-4 images): 70-100 pixels
Image Rotation/Angle #
Location: Cursor Trail → Image Rotation/Angle
Controls whether trail images rotate or maintain fixed orientation.
Available Options:
- Default (Straight): Images remain at 0° rotation
- Dynamic Rotation: Images rotate based on cursor movement direction
- Fixed Angle: Set a specific rotation angle for all images
Use Cases:
- Straight: Professional, clean appearance
- Dynamic: Follows cursor movement for directional feedback
- Fixed Angle: Artistic or stylistic effects
Visual Examples:
- Straight: Images face forward consistently
- Dynamic: Images tilt toward cursor movement direction
- Fixed at 15°: All images have a slight tilt
GSAP Easing #
Location: Cursor Trail → GSAP Easing
Defines how smoothly or dramatically the images animate into position.
Available Easing Options:
| Easing Type | Behavior | Best For |
| None | No easing, instant change | Sharp, technical effects |
| Linear | Constant speed throughout | Predictable motion |
| Power 1 In Out | Subtle easing | Smooth, natural motion |
| Power 2 In Out | Moderate easing | Standard animations |
| Power 3 In Out | Strong easing | Dramatic transitions |
| Power 4 In Out | Extreme easing | Bold animations |
| Elastic Out | Bouncy with overshoot | Playful, bouncy effect |
| Bounce | Multiple bounces on arrival | Fun, energetic feel |
| Back | Slight backward motion before forward | Elegant, swishy |
| Circ Out | Circular motion curve | Smooth, organic feel |
Recommendations by Use Case:
- Professional Site: Linear or Power 1
- Creative Portfolio: Power 3 or Elastic Out
- Fun/Playful Site: Bounce or Back
- Subtle Elegance: Power 2 or Circ Out
Default: Bounce (energetic, engaging feel)
Duration #
Location: Cursor Trail → Duration
Slider Range: 0.1 - 5 seconds (Default: 1 second)
Controls how long it takes for trail images to complete their animation.
What It Controls:
- The time from when an image appears until it fully settles into its target position
- Longer durations = slower, more deliberate animation
- Shorter durations = snappier, more responsive animation
Typical Values:
| Duration | Effect | Best For |
| 0.3 - 0.5s | Very fast, twitchy | Responsive, gaming-like |
| 0.8 - 1.2s | Standard, smooth | Most websites |
| 1.5 - 2s | Slow, luxurious | High-end, premium feel |
| 2.5 - 3s | Very slow, cinematic | Dramatic, attention-grabbing |
Performance Considerations:
- Faster durations (0.5s) are less CPU-intensive
- Slower durations (2s+) create more processing load on slower devices
- Test on mobile devices to ensure smooth performance
Recommendations:
- Desktop: 0.8 - 1.5 seconds
- Mobile: 0.5 - 1 second (faster = less strain)
- High-speed gaming/interactive sites: 0.3 - 0.6 seconds
- Premium/portfolio sites: 1.5 - 2 seconds
Z-Index Control #
Location: Cursor Trail → Z-Index Control
Controls the layering depth of the cursor trail (how it overlaps with other page elements).
What It Does:
- Determines whether the trail appears above or below other content
- Higher values = trail appears on top
- Lower values = trail appears behind other elements
Z-Index Layers:
| Value | Placement | Use Case |
| 1-10 | Below most content | Subtle background effect |
| 100-500 | Above regular content | Visible but not obtrusive |
| 1000+ | Above modals, overlays | Always visible, no coverage |
Typical Scenarios:
- Above text and images: Use higher value (500-1000)
- Above regular blocks: Use medium value (100-300)
- Behind sticky headers: Use low value (1-50)
- Always on top: Use very high value (9999)
Need Help? #
If you encounter issues or need assistance with the Cursor Trail Extension:
Contact Support:
- Email: support@diviexpand.com
- Visit: https://diviexpand.com//contact-us/
