How to run Javascript on your Elementor popup
https://youtu.be/WA9v_YrylIU jQuery jQuery(window).load(function() { jQuery.each( elementorFrontend.documentsManager.documents, ( id, document ) => { if ( document.getModal ) { // It’s a popup document document.getModal().on( ‘show’, () => { console.log( ‘Run your script here’ ); } ); } }); }); Credit/Source – By formulaclick View on GitHub
Show and Hide containers on click in Elementor with jQuery and CSS
https://youtu.be/b8HU3Kswsiw CSS .great-container, .bad-container{ display: none; } jQuery
Toggle between light/dark mode in Elementor using GSAP
https://youtu.be/P8CiqfniF34 Example One GSAP Code – Use this to make the entire site into dark mode automatically Example two GSAP code – Use this to have more control over witch elements change into dark mode Toggle Switch Logic const toggleCheckbox = document.querySelector(“#darkmode-checkbox”); toggleCheckbox.addEventListener(“click”, () => { if (!toggleCheckbox.checked) { // Play Timeline darkmode.play(); } else […]
Elementor Amazing Background Scroll Effect With GSAP
https://youtu.be/uKc16JCByic GSAP CODE
Change Image on Hover In Elementor
Change Image On Hover – JQuery Swap Between Multiple Images – JQuery
Create a Custom Mobile Menu Drop Down In Elementor Pro
CSS /*Tablet breakpoint*/ @media(max-width:1024px){ /*Mobile nav column */ #nav-container{ display:none; overflow:hidden; } /*Switch nav widget to verticle on mobile */ .elementor-nav-menu–layout-horizontal .elementor-nav-menu { flex-direction: column !important; } /*Make nav widget 100%*/ .nav-menu { width: 100% !important; } /*Make button widget 100%*/ .nav-btn{ width: 100% !important; } } /*Hide bar icon on desktop*/ @media(min-width:1025px){ .nav-icon{ display:none; […]
Elementor Change background on scroll with GSAP
https://youtu.be/NoWKAuB1TJM JS Code
Elementor Hover Box Animation Effect In WordPress
https://youtu.be/sXfT2kcyTBU CSS Code selector .elementor-widget-wrap::before { content:””; position: absolute; bottom:0px; left: 0px; background-color: #F54335; width: 100%; height: 0%; transition: height 0.15s ease-in; border-radius: 10px; } selector .elementor-widget-wrap:hover::before{ height: 100% !important; } selector .box-title h2{ transition: all 0.1s ease-in; } selector:hover .box-title h2{ color: white !important; } selector .box-des p{ transition: all 0.1s ease-in; } selector:hover […]
Change image on accordion tab click in Elementor Pro
Jquery
Elementor Entrance Animation on Scroll Using GSAP
https://youtu.be/c7HH6udFUXI Step 1 Add the class name text_reveal to the headline element Make sure the headline element HTML Tag is set to H2 Step 2 Add this to your headline element CSS tab. selector{ overflow:hidden; } Step 3 Add the class name start-reveal to the section you would like your scroll animation to begin. Make […]
