NEW RELEASE
v2.2 - 40+ new elementsWhat's new

7 Ready transitions

Transition pages

Fluid transitions that elevate page flow.

One-click copy
No coding required
Visual configurator

Transition 007

Added Sept 28, 2024

Transition 006

Added Sept 28, 2024

Transition 005

Added Sept 28, 2024

Transition 004

Added Sept 28, 2024

Transition 003

Added Sept 28, 2024

Transition 002

Added Sept 28, 2024

Transition 001

Added Sept 28, 2024

Pages that flow seamlessly

Fluid transitions between pages that elevate navigation and eliminate jarring page loads

Smooth page-to-page flow

Eliminate jarring page loads with fluid transitions. Create continuity between pages that makes navigation feel seamless and professional.

Loading states that don't frustrate

Turn waiting time into part of the experience. Animated transitions keep users engaged during page changes instead of staring at blank screens.

Customize speed and style

Use Bricksfusion's configurator to adjust transition timing, easing, and visual effects in real-time. Preview changes instantly without touching code.

Quick or dramatic

Need instant page changes or cinematic transitions? Adjust duration and intensity to match your site's pace without rebuilding animations.

Get Bricksfusion

Choose Your Plan

AnnualPro Annual
€99/year
Unlimited websites
Features & Templates
Library Components
Animations
Page Transitions
Templates
SureCart components
Visual configurator
COMPATIBLE WITH
Bricks Vanilla
ACSS Framework
Core Framework
AT Framework

New

Support
Email & community support
Get Pro Annual
ONE-TIME PAYMENTLifetime
€199
Unlimited websites
Features & Templates
Library Components
Animations
Page Transitions
Templates
SureCart components
Visual configurator
COMPATIBLE WITH
Bricks Vanilla
ACSS Framework
Core Framework
AT Framework

New

Support
Email & community support
Get Lifetime Access
document.addEventListener('DOMContentLoaded', function() {
    const fontLink = document.createElement('link');
    fontLink.href = 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap';
    fontLink.rel = 'stylesheet';
    document.head.appendChild(fontLink);

    const styles = `
        .simple-price-box {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.75rem;
            font-family: 'Inter', sans-serif;
            margin: 0.5rem 0;
            width: fit-content;
        }

        .simple-text-label {
            font-size: var(--text-xs);
            font-weight: 300;
            transition: color 0.2s ease;
            user-select: none;
            white-space: nowrap;
        }

        .simple-text-label.is-on {
            color: #fb923c;
            background: linear-gradient(135deg, #fb923c 0%, #ffa85c 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            font-weight: 500;
        }

        .simple-text-label.is-off {
            color: #9CA3AF;
        }

        .simple-switch {
            position: relative;
            width: 4rem;
            height: 2rem;
            background-color: #E5E7EB;
            border-radius: 9999px;
            cursor: pointer;
            transition: all 0.3s ease;
            flex-shrink: 0;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        .simple-switch.is-on {
            background: linear-gradient(135deg, #fb923c 0%, #ffa85c 50%, #fb923c 100%);
            box-shadow: 0 4px 15px rgba(251, 146, 60, 0.4);
            transform: scale(1.02);
        }

        .simple-switch::after {
            content: '';
            position: absolute;
            top: 0.25rem;
            left: 0.25rem;
            width: 1.5rem;
            height: 1.5rem;
            background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%);
            border-radius: 50%;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .simple-switch.is-on::after {
            transform: translateX(2rem);
            box-shadow: 0 3px 8px rgba(251, 146, 60, 0.3);
        }

        .simple-price-text {
            transition: opacity 0.3s ease;
            display: inline-flex !important;
            align-items: baseline;
            gap: 0.25rem;
            justify-content: inherit;
        }

        .simple-price-text .amount-value {
            display: inline-block;
        }

        .simple-price-text .time-period {
            opacity: 0.7;
            white-space: nowrap;
            font-size: var(--text-xs);
            font-weight: 300;
        }

        @media (max-width: 768px) {
            .simple-price-box {
                gap: 0.5rem;
            }
        }

        .simple-switch:hover {
            transform: scale(1.05);
        }

        .simple-switch.is-on:hover {
            background: linear-gradient(135deg, #ea7c2b 0%, #fb923c 50%, #ffa85c 100%);
            box-shadow: 0 6px 20px rgba(251, 146, 60, 0.5);
        }
    `;

    const styleSheet = document.createElement('style');
    styleSheet.textContent = styles;
    document.head.appendChild(styleSheet);

    const toggleHTML = `
    <div class="simple-price-box">
        <div class="simple-switch" role="switch" aria-checked="false" tabindex="0"></div>
        <span class="simple-text-label is-off" data-mode="monthly">3 Monthly payments</span>
    </div>
    `;

    const URLS = {
        oneTime: 'https://bricksfusion.com/payment/?line_items%5B0%5D%5Bprice_id%5D=9277ae68-9c20-4f18-833f-071ba6d0c75a&line_items%5B0%5D%5Bquantity%5D=1',
        monthly: 'https://bricksfusion.com/payment/?line_items%5B0%5D%5Bprice_id%5D=a21251dc-96e8-47a1-af1a-b68318db75d4&line_items%5B0%5D%5Bquantity%5D=1'
    };

    function animateValue(start, end, duration, element) {
        let startTimestamp = null;
        const step = (timestamp) => {
            if (!startTimestamp) startTimestamp = timestamp;
            const progress = Math.min((timestamp - startTimestamp) / duration, 1);
            const currentValue = Math.round(progress * (end - start) + start);
            element.textContent = `€${currentValue}`;
            if (progress < 1) {
                window.requestAnimationFrame(step);
            }
        };
        window.requestAnimationFrame(step);
    }

    function updatePriceDisplay(isMonthly, animate = true) {
        if (priceElement) {
            const currentAmount = priceElement.querySelector('.amount-value');
            const startPrice = currentAmount ? parseInt(currentAmount.textContent.replace('€', '')) : (isMonthly ? 199 : 67);
            const endPrice = isMonthly ? 67 : 199;
            
            if (animate && currentAmount) {
                animateValue(startPrice, endPrice, 500, currentAmount);
                
                setTimeout(() => {
                    const periodElement = priceElement.querySelector('.time-period');
                    if (periodElement) {
                        periodElement.textContent = isMonthly ? '/mo for 3 months' : '/one-time';
                    }
                }, 250);
            } else {
                priceElement.innerHTML = `
                    <span class="amount-value">€${endPrice}</span>
                    <span class="time-period">${isMonthly ? '/mo for 3 months' : '/one-time'}</span>
                `;
            }
        }
    }

    const toggleContainer = document.querySelector('[data-toggle-container]');
    const priceElement = document.querySelector('[data-simple-price]');
    
    if (toggleContainer && priceElement) {
        toggleContainer.innerHTML = toggleHTML;
        priceElement.classList.add('simple-price-text');
        
        const toggleBox = toggleContainer.querySelector('.simple-price-box');
        const computedStyle = window.getComputedStyle(toggleContainer);
        
        if (computedStyle.textAlign) {
            toggleBox.style.marginLeft = computedStyle.textAlign === 'center' ? 'auto' : 
                                       computedStyle.textAlign === 'right' ? 'auto' : '0';
            toggleBox.style.marginRight = computedStyle.textAlign === 'center' ? 'auto' : 
                                        computedStyle.textAlign === 'right' ? '0' : 'auto';
        }
    } else if (priceElement) {
        priceElement.insertAdjacentHTML('beforebegin', toggleHTML);
        priceElement.classList.add('simple-price-text');
    }

    const toggle = document.querySelector('.simple-switch');
    const monthlyLabel = document.querySelector('[data-mode="monthly"]');
    const buyButton = document.querySelector('[data-simple-button]');

    function handleToggle() {
        const isMonthly = !toggle.classList.contains('is-on');
        toggle.classList.toggle('is-on');
        toggle.setAttribute('aria-checked', isMonthly);
        
        if (monthlyLabel) {
            monthlyLabel.classList.toggle('is-on');
            monthlyLabel.classList.toggle('is-off');
        }
        
        updatePriceDisplay(isMonthly, true);
        if (buyButton) {
            buyButton.href = isMonthly ? URLS.monthly : URLS.oneTime;
        }
    }

    if (toggle) {
        toggle.addEventListener('click', handleToggle);
        toggle.addEventListener('keydown', (e) => {
            if (e.key === 'Enter' || e.key === ' ') {
                e.preventDefault();
                handleToggle();
            }
        });
    }

    updatePriceDisplay(false, false);
});