Scroll Motion Architect: Interactive Web Animation Designer

This tool empowers designers and developers to visually create stunning, performant scroll-triggered animations for any web element. Users can define entry/exit points, transformations (scale, rotate, translate), opacity changes, and filters, all linked to scroll progression. The application generates optimized, production-ready CSS and JavaScript (leveraging the Intersection Observer API for efficiency) that's easy to integrate.

0%
100%
1
0deg
0px
0px
1
0px
Unlock advanced options with premium.

Free use limit reached. Unlock unlimited access.

You've used all 3 free animation designs. Purchase unlimited access or subscribe to Pixel Office Showcase Hub for all apps.

Showcase Hub Bundle

Unlimited access to Scroll Motion Architect and 150+ other premium apps.

One-time Access

Unlock Scroll Motion Architect forever with a single payment.

Crypto Micro-payment

Pay securely with cryptocurrencies like Solana or Bitcoin.

`; }; // --- Event Listeners for Widget UI --- document.getElementById('generateCodeBtn').addEventListener('click', () => { if (!isUnlocked()) { incrementUsage(); } const code = generateAnimationCode(); document.getElementById('generatedCode').textContent = code; document.getElementById('outputSection').style.display = 'block'; updateDownloadButtonText(); // Update download button state after generation }); document.getElementById('copyCodeBtn').addEventListener('click', () => { const codeText = document.getElementById('generatedCode').textContent; navigator.clipboard.writeText(codeText).then(() => { alert(translations[currentLanguage].copySuccess); }).catch(err => { console.error('Error copying code: ', err); alert(translations[currentLanguage].copyFail); }); }); document.getElementById('downloadCodeBtn').addEventListener('click', () => { if (!isUnlocked()) { showPaymentOverlay(); return; } const params = getAnimationParameters(); const message = `${translations[currentLanguage].downloadWhatsAppMessage} - ${translations[currentLanguage].labelElementSelector}: ${params.selector} - ${translations[currentLanguage].labelTriggerOffsetStart}: ${params.triggerOffsetStart}% - ${translations[currentLanguage].labelTriggerOffsetEnd}: ${params.triggerOffsetEnd}% - ${translations[currentLanguage].labelScale}: ${params.scale} - ${translations[currentLanguage].labelRotate}: ${params.rotate}deg - ${translations[currentLanguage].labelTranslateX}: ${params.translateX}px - ${translations[currentLanguage].labelTranslateY}: ${params.translateY}px - ${translations[currentLanguage].labelOpacity}: ${params.opacity} - ${translations[currentLanguage].labelFilterBlur}: ${params.filterBlur}px - ${translations[currentLanguage].labelEasingCurve}: ${params.easingCurve}`; const whatsappUrl = `https://wa.me/${WHATSAPP_NUMBER}?text=${encodeURIComponent(message)}`; window.open(whatsappUrl, '_blank'); });