Chiara Flex Banners Widget¶

Description¶

The Chiara Flex Banners Widget is a special version of Flex Banners for the Chiara theme, featuring GSAP animation for parallax hover effects.

Page Builder Name: Flex Banners | PapaThemes Chiara

Version: 1.0.0

Features¶

• ✅ GSAP parallax animation
• ✅ Mouse-follow effect
• ✅ Layered images
• ✅ Smooth transitions
• ✅ Inline editing

How to Use¶

1. Add Widget¶

1. Open Page Builder
2. Drag Flex Banners | PapaThemes Chiara widget to the page
3. Widget displays with banners

2. Configure GSAP Effect¶

Each banner item has option: - Use GSAP: Enable/disable GSAP animation

GSAP Animation¶

How It Works¶

Widget uses GSAP for parallax effect:

1. Second image (overlay) follows mouse movement
2. Movement calculated based on relative position
3. Scale and position animation

Code Implementation¶

$widget.find('._banner')
    .mousemove(e => {
        const $el = $(e.currentTarget);
        const $target = $el.find('img + img'); // Second image

        if ($target.length > 0) {
            const relX = e.pageX - $el.offset().left;
            const relY = e.pageY - $el.offset().top;
            const movement = -50;

            gsap.to($target.get(0), 1, {
                x: (relX - $el.width() / 2) / $el.width() * movement,
                y: (relY - $el.height() / 2) / $el.height() * movement,
                scale: 1,
            });
        }
    })
    .mouseout(e => {
        gsap.to($target.get(0), 1, { x: 0, y: 0, scale: 1 });
    });

Banner Structure¶

Single Image Banner¶

<div class="_banner">
    <img src="background.jpg" alt="">
</div>

Parallax Banner (2 Images)¶

<div class="_banner">
    <img src="background.jpg" alt="">
    <img src="foreground.png" alt=""> <!-- Parallax layer -->
</div>

Best Practices¶

Image Preparation¶

1. Background: Full image, can serve as fallback
2. Foreground: PNG with transparency
3. Size: Both images same size as container

Design Tips¶

• Foreground should have separate elements
• Avoid too many small details
• Keep movement subtle to avoid dizziness
• Test on multiple screen sizes

Usage Examples¶

Product Showcase¶

Background: Product photo on plain background
Foreground: Floating elements (icons, badges)
Movement: -50 (subtle)

Lifestyle Banner¶

Background: Scene photo
Foreground: Text overlay / CTA elements
Movement: -30 (very subtle)

Performance¶

GSAP Loading¶

const gsap = await loadGsap();

• GSAP loads async
• Only loads when needed
• Cached after first load

CSS Transition Override¶

$widget.find('._banner img + img').css('transition', 'none');

Disables CSS transition for smoother GSAP animation.

Responsive¶

• Desktop: Full GSAP effect with mouse tracking
• Tablet/Mobile: Touch doesn't trigger effect (mouse events)

Inline Editing¶

1. Enable Edit Mode
2. Click on banner
3. Edit content
4. GSAP effect still works in edit mode

Dependencies¶

Widget requires: - jQuery - GSAP (dynamically loaded)

Notes¶

1. Second image: Must have second image for effect to work
2. PNG transparency: Foreground should be PNG
3. Performance: GSAP animation is lightweight but should be tested
4. Mobile: Effect doesn't work on touch devices
5. useGsap flag: Must enable for each item needing effect