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 […]
Add text over Image on Hover in Elementor Pro WordPress
https://youtu.be/jf6w5aXFOjI 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 […]
GSAP Image Mask Scroll Effect In Elementor
https://youtu.be/rK-XdbJwjD0 Javascript Code
Cool GSAP Scroll Effect In Elementor | Rounded Edges On Scroll
https://youtu.be/rQErAwH_Exw Javascript Code
GSAP Text Stroke Animation In Elementor Pro
https://youtu.be/iuoO4XYdNRM Make sure to add the class load-container to your section. HTML Code WordPress CSS Code /* Adjust for desktop*/ .loader text { font-family: Spartan; font-size:5rem; font-weight: bold; word-break: break-all; stroke: #000; stroke-width: 2px; line-height: 7rem; } .loader svg { width: 480px; height: 110px; } /* Adjust for tablet */ @media(max-width:1024px){ .loader text { font-family: […]
Elementor Button Hover Fill Effect With Custom CSS
https://youtu.be/bh_lASwY3UY IMPORTANT! – Make sure your button is set to inline positioning and has a class of my-btn CSS Code /*Fill box*/ .my-btn .elementor-button::before{ content:”; position: absolute; background: black; /*
Shrink Section On Scroll With GSAP & ScrollTrigger In Elementor Pro
https://youtu.be/QkYJM-hbqw0 Source Code
Elementor Icon Box Hover Effect | WordPress Hover Card CSS
https://youtu.be/i91NyzjIZ38 Regular Hover Card /*icon box border radiues*/ selector .icon-box{ border-radius: 10px; } /*icon box circle style*/ selector .icon-box .elementor-icon:before{ content: ”; position: absolute; background: #4054B2; /*
Hide Product Prices For Users On WooCommerce
https://youtu.be/4_xiZdE_No4 PHP Code // Hide prices add_action(‘after_setup_theme’,’magik_activate_filter’) ; function magik_activate_filter() { add_filter(‘woocommerce_get_price_html’, ‘magik_show_price_logged’); } function magik_show_price_logged($price) { if(is_user_logged_in() ) { return $price; } else { remove_action( ‘woocommerce_single_product_summary’, ‘woocommerce_template_single_price’, 10 ); remove_action( ‘woocommerce_after_shop_loop_item_title’, ‘woocommerce_template_loop_price’, 10 ); return ‘Login to order’; } } //Option Two (If you decided to use Option One then don’t add the following […]
Elementor Background Overlay On Mobile & Tablet
https://youtu.be/lmO1xAs7NBc CSS Code – Elementor Pro Version /*Tablet background Overlay Elementor Pro*/ @media(max-width:1024px){ selector.elementor-element > .elementor-background-overlay { background-color: transparent; background-image: linear-gradient( 80deg, #000000 20%, #F2295B00 80%); opacity: 0.79; transition: background 0.3s, border-radius 0.3s, opacity 0.3s; } } /*Mobile background Overlay Elementor Pro*/ @media(max-width:767px){ selector.elementor-element > .elementor-background-overlay { background-color: transparent; background-image: linear-gradient( 180deg, #000000 20%, #F2295B00 […]
