Toggle between light/dark mode in Elementor using GSAP

Dark 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; } else […]

Create a Custom Mobile Menu Drop Down In Elementor Pro

custom mobile menu dropdown

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 Hover Box Animation Effect In WordPress

Hover box fill effect Elementor 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 […]

Elementor Entrance Animation on Scroll Using GSAP

entrance animation on scroll 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 […]

Add text over Image on Hover in Elementor Pro WordPress

text over image on hover 1 CSS Code selector{ height: 300px; overflow: hidden; } selector .inner-box__hover-box{ height: 100%; display: flex; align-items: center; } selector .learn-btn{ transform: translateY(35px); transition: all .3s ease } selector:hover .learn-btn{ transform: translateY(-35px); } selector .box-des{ transition: all .2s ease; opacity: 0; } selector:hover .box-des{ opacity: 1; } selector .box-content{ height: 50px; overflow: hidden; transition: all .3s […]