Logo

ACCELERATING

MEDTECH

TO

script for magic scroll
document.addEventListener('DOMContentLoaded', function() { const items = 4; // Total number of items const scrollHeight = document.querySelector('.scroll-spacer').offsetHeight; window.addEventListener('scroll', function() { const scrolled = window.pageYOffset; const maxScroll = scrollHeight - window.innerHeight; const scrollProgress = scrolled / maxScroll; // Calculate which item should show (1 to items) let currentIndex = Math.ceil(scrollProgress * items); if (currentIndex items) currentIndex = items; // Update all items at once document.querySelectorAll('.fade-item').forEach(item => { if (item.dataset.index == currentIndex) { item.classList.add('active'); } else { item.classList.remove('active'); } }); }); });
scramble
class TextScramble { constructor(el) { this.el = el; this.chars = '!-_\\/[]{}—=+*^?#________'; this.update = this.update.bind(this); } setText(newText) { const oldText = this.el.innerText; const length = Math.max(oldText.length, newText.length); const promise = new Promise((resolve) => this.resolve = resolve); this.queue = []; for (let i = 0; i < length; i++) { const from = oldText[i] || ''; const to = newText[i] || ''; const start = Math.floor(Math.random() * 40); const end = start + Math.floor(Math.random() * 40); this.queue.push({ from, to, start, end }); } cancelAnimationFrame(this.frameRequest); this.frame = 0; this.update(); return promise; } update() { let output = ''; let complete = 0; for (let i = 0, n = this.queue.length; i = end) { complete++; output += to; } else if (this.frame >= start) { if (!char || Math.random() { // Skip if already initialized if (element.hasAttribute('data-scramble-init')) return; // Get the original text - prioritize data-text attribute if it exists // Otherwise use the actual text content let originalText = element.getAttribute('data-text') || element.textContent || element.innerText; // Clean up the text (remove extra whitespace) originalText = originalText.trim(); // Mark as initialized element.setAttribute('data-scramble-init', 'true'); // Store original text element.setAttribute('data-text', originalText); // Clear text initially element.textContent = ''; // Find the parent fade-item element const fadeItem = element.closest('.fade-item'); if (fadeItem) { // Track if currently animating to prevent overlapping animations let isAnimating = false; // Create MutationObserver to watch for class changes const observer = new MutationObserver((mutations) => { mutations.forEach((mutation) => { if (mutation.type === 'attributes' && mutation.attributeName === 'class') { // Check if 'active' class was added if (fadeItem.classList.contains('active') && !isAnimating) { // Set animating flag isAnimating = true; // Create scramble effect instance const fx = new TextScramble(element); // Small delay to sync with fade-in setTimeout(() => { element.classList.add('visible'); fx.setText(originalText).then(() => { // Optional: Add glow effect after animation completes element.classList.add('glowing'); setTimeout(() => { element.classList.remove('glowing'); }, 500); }); }, 100); // Adjust delay as needed } // Reset when active class is removed else if (!fadeItem.classList.contains('active') && isAnimating) { // Reset for re-animation isAnimating = false; element.textContent = ''; element.classList.remove('visible'); element.classList.remove('glowing'); } } }); }); // Start observing the fade-item for class changes observer.observe(fadeItem, { attributes: true, attributeFilter: ['class'] }); // Check if already active on page load if (fadeItem.classList.contains('active')) { setTimeout(() => { isAnimating = true; const fx = new TextScramble(element); element.classList.add('visible'); fx.setText(originalText); }, 100); } } else { // If not inside a fade-item, use Intersection Observer as fallback const observerOptions = { threshold: 0.2, rootMargin: '0px' }; const scrambleObserver = new IntersectionObserver((entries) => { entries.forEach((entry) => { if (entry.isIntersecting && !element.hasAttribute('data-scramble-animated')) { element.setAttribute('data-scramble-animated', 'true'); const fx = new TextScramble(element); element.classList.add('visible'); fx.setText(originalText).then(() => { element.classList.add('glowing'); setTimeout(() => { element.classList.remove('glowing'); }, 500); }); scrambleObserver.unobserve(element); } }); }, observerOptions); scrambleObserver.observe(element); } }); } // Initialize on DOMContentLoaded document.addEventListener('DOMContentLoaded', function() { // Small delay to ensure your scroll script runs first setTimeout(initScrambleEffect, 100); }); // Also initialize when Elementor loads new content (for popup, tabs, etc.) if (typeof jQuery !== 'undefined' && window.elementorFrontend) { jQuery(window).on('elementor/frontend/init', function() { elementorFrontend.hooks.addAction('frontend/element_ready/widget', initScrambleEffect); }); }// For Elementor: Re-run on Elementor preview refresh if (window.elementor) { window.elementor.on('preview:loaded', function() { // Re-initialize for preview mode const elements = document.querySelectorAll('.scramble-text'); elements.forEach((element) => { const fx = new TextScramble(element); const originalText = element.getAttribute('data-text'); if (originalText) { element.innerText = ''; element.classList.remove('visible'); setTimeout(() => { element.classList.add('visible'); fx.setText(originalText); }, 500); } }); }); }

TIME TO

MARKET

svg anim
document.addEventListener('DOMContentLoaded', function() { // ===== CONFIGURATION ===== const config = { svgSelector: '.my-animated-svg', containerSelector: '.svg-container', targetImageSelector: '.target-image', taglineSelector: '.tagline', // Selector for tagline element relativePosition: { fromTop: 70, // Final position from top of target image fromLeft: 100 // Final position from left of target image }, numberOfPasses: 3, // Number of passes before final positioning initialSpeed: 3000, // Initial duration for first pass (ms) speedReduction: 0.5, // Each pass gets faster (multiply duration by this) fadeInDuration: 0, finalScale: 0.35, // Final explosion effect settings explosionScale: 3, // Scale multiplier for explosion (3 = 300%) explosionDuration: 1500, // Duration of explosion and fade out (ms) fadeInTargetImage: true, // Whether to fade in the target image during explosion // Gradient pulse settings gradientSlowPulse: 10000, // Slow pulse duration in ms (10 seconds) gradientPauseBeforeRestart: 1000 // Pause before restarting slow pulse (1 second) };// Get elements const svg = document.querySelector(config.svgSelector); const container = document.querySelector(config.containerSelector); const targetImage = document.querySelector(config.targetImageSelector); const tagline = document.querySelector(config.taglineSelector); if (!svg || !container || !targetImage) { console.error('Required elements not found'); return; }// Store original dimensions const originalWidth = svg.offsetWidth; const originalHeight = svg.offsetHeight; let isAnimating = false; // Hide target image initially if fade-in is enabled if (config.fadeInTargetImage) { targetImage.style.opacity = '0'; targetImage.style.transition = `opacity ${config.explosionDuration}ms ease-in`; }// Calculate final position relative to target image function calculateFinalPosition() { const targetRect = targetImage.getBoundingClientRect(); const containerRect = container.getBoundingClientRect(); const targetRelativeTop = targetRect.top - containerRect.top; const targetRelativeLeft = targetRect.left - containerRect.left; const finalLeft = targetRelativeLeft + config.relativePosition.fromLeft; const finalTop = targetRelativeTop + config.relativePosition.fromTop; return { top: finalTop, left: finalLeft }; }// Main animation sequence async function animateSequence() { if (isAnimating) return; isAnimating = true; console.log('Starting progressive speed animation...'); const containerWidth = container.offsetWidth; const svgWidth = originalWidth; // Start with slow gradient pulse container.style.animation = `gradientShift ${config.gradientSlowPulse}ms ease-in-out infinite`; // Calculate scale reduction per pass const totalPasses = config.numberOfPasses + 1; // +1 for final positioning pass const scaleReductionPerPass = (1 - config.finalScale) / totalPasses; // Setup initial position (left side, centered vertically) svg.style.left = `-${svgWidth}px`; svg.style.top = '50%'; svg.style.transition = 'none'; // Phase 1: Fade in console.log('Fading in...'); svg.style.opacity = '1'; await delay(config.fadeInDuration); // Phase 2: Multiple passes with increasing speed and progressive scaling let currentSpeed = config.initialSpeed; let currentScale = 1; for (let pass = 1; pass setTimeout(resolve, ms)); }// Start animation on page load animateSequence();// Restart animation on container click container.addEventListener('click', function() { if (isAnimating) return; console.log('Restarting animation...'); // Reset all styles svg.style.transition = 'none'; svg.style.opacity = '0'; svg.style.left = `-${originalWidth}px`; svg.style.top = '50%'; svg.style.transform = 'translateY(-50%)'; svg.style.width = `${originalWidth}px`; svg.style.height = `${originalHeight}px`; svg.style.animation = 'none'; svg.classList.remove('blur-light', 'blur-medium', 'blur-heavy', 'blur-extreme', 'blur-super'); // Reset target image opacity if fade-in is enabled if (config.fadeInTargetImage) { targetImage.style.transition = 'none'; targetImage.style.opacity = '0'; targetImage.offsetHeight; // Force reflow targetImage.style.transition = `opacity ${config.explosionDuration}ms ease-in`; } // Reset tagline if (tagline) { tagline.style.transition = 'none'; tagline.style.opacity = '0'; tagline.style.filter = 'blur(10px)'; tagline.offsetHeight; // Force reflow } // Reset gradient container.style.animation = `gradientShift ${config.gradientSlowPulse}ms ease-in-out infinite`; svg.offsetHeight; // Force reflow setTimeout(animateSequence, 100); }); // Update position on resize window.addEventListener('resize', function() { if (!isAnimating && svg.style.transform.includes('translate(-50%, -50%)')) { const finalPosition = calculateFinalPosition(); svg.style.left = `${finalPosition.left}px`; svg.style.top = `${finalPosition.top}px`; } }); });
Logo
Our Address

37 N Orange Ave., Suite 1201
Orlando, FL 32801

Phone

+1 (321) 946-1303

Linkedin-in X-twitter Facebook-f Instagram
  • Meet Your Marketing Team
Contact Us Today