Skip to content

Instantly share code, notes, and snippets.

@oooh-boi
Created December 12, 2021 10:34
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save oooh-boi/ba779cc0915c785c9439ca447ddb6428 to your computer and use it in GitHub Desktop.
Save oooh-boi/ba779cc0915c785c9439ca447ddb6428 to your computer and use it in GitHub Desktop.
Copy-paste code into Elementor's Custom Code file or use Snippets plugin for WordPress. If you use Snippets omit the SCRIPT wrapping element.
<script>
;( function() {
document.addEventListener( 'DOMContentLoaded', my_stuff );
function my_stuff() {
let is_mobile = false;
let hero = document.querySelector( '#hero' );
let tele_bg = gsap.utils.toArray( '#hero .tele' );
// update whatever is needed on window resize
let debounce = function( func ) {
let timer;
return function( event ) {
if( timer ) clearTimeout( timer );
timer = setTimeout( func, 200, event );
};
}
window.addEventListener( "resize", debounce( ( e ) => {
// disable for mobiles
let mobile_view = window.matchMedia( "(max-width: 767px)" );
if( mobile_view.matches ) {
gsap.set( '#hero .tele .elementor-background-overlay', { autoAlpha: 1, y: 0 } );
is_mobile = true;
} else {
gsap.set( '#hero .tele .elementor-background-overlay', { autoAlpha: 0 } );
is_mobile = false;
}
// update the title position
tele_bg.forEach( ( obj ) => {
let tele_content = obj.querySelector( '.elementor-widget-wrap' );
let tele_text = obj.querySelector( '.tele-text' );
if( ! is_mobile ) gsap.set( tele_content, { y: tele_text.offsetHeight + 12 } );
else gsap.set( tele_content, { y: 0 } );
} );
} ) );
tele_bg.forEach( ( obj ) => {
// grab the image URL
let bg_overlay = obj.querySelector( '.elementor-background-overlay' );
let bg_image = gsap.getProperty( bg_overlay, 'backgroundImage' );
// create elements
let div_el = document.createElement( 'div' );
div_el.style.cssText = 'opacity: 0; width: 100%; height: 100%; top: 0; left: 0; position: absolute; background: no-repeat center / cover ' + bg_image + ' #000';
hero.prepend( div_el );
gsap.set( div_el, { scale: 1.5 } );
// column title and text
let tele_content = obj.querySelector( '.elementor-widget-wrap' );
let tele_text = obj.querySelector( '.tele-text' );
gsap.set( tele_content, { y: tele_text.offsetHeight + 12 } );
obj.addEventListener( 'mouseenter', ( e ) => {
if( is_mobile ) return;
let me_tl = gsap.timeline( { defaults: { ease: 'expo.out' } } );
me_tl.to( div_el, { opacity: 1, scale: 1, duration: 0.4 } )
.to( tele_content, { y: 0, duration: 0.5 }, 0 )
.to( obj, { background: 'rgba(0,0,0,0.5)', duration: 0.3 }, 0 );
} );
obj.addEventListener( 'mouseleave', ( e ) => {
if( is_mobile ) return;
let ml_tl = gsap.timeline( { defaults: { ease: 'expo.out' } } );
ml_tl.to( div_el, { opacity: 0, scale: 1.5, duration: 0.6 } )
.to( tele_content, { y: tele_text.offsetHeight + 12, duration: 0.5 }, 0 )
.to( obj, { background: 'transparent', duration: 0.3 }, 0 );
} );
} );
}
} )();
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment