Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<script>
;(function() {
// locomotive scroll storage
var loco_scroll = {};
// wait until sfe_loco_scroll available
var chck_if_sfe_loco_scroll_loaded = setInterval(function() {
if (window.sfe_loco_scroll && Object.keys(window.sfe_loco_scroll).length !== 0 && window.gsap && window.ScrollTrigger) {
// store locomitive scroll object for the local usage
loco_scroll = window.sfe_loco_scroll;
// register scrollTrigger
gsap.registerPlugin(ScrollTrigger);
// ... do your thing
my_thing();
// clear interval
clearInterval(chck_if_sfe_loco_scroll_loaded);
}
}, 500);
function my_thing() {
/* DON'T CHANGE THIS */
// each time Locomotive Scroll updates, tell ScrollTrigger to update too (sync positioning)
loco_scroll.on('scroll', ScrollTrigger.update);
// tell ScrollTrigger to use these proxy methods for the '.sfe-locomotive-scroll-wrapper' element since Locomotive Scroll is hijacking things
ScrollTrigger.scrollerProxy('.sfe-locomotive-scroll-wrapper', {
scrollTop(value) {
return arguments.length ? loco_scroll.scrollTo(value, 0, 0) : loco_scroll.scroll.instance.scroll.y;
}, // we don't have to define a scrollLeft because we're only scrolling vertically.
getBoundingClientRect() {
return {
top: 0,
left: 0,
width: window.innerWidth,
height: window.innerHeight
};
},
// LocomotiveScroll handles things completely differently on mobile devices - it doesn't even transform the container at all! So to get the correct behavior and avoid jitters, we should pin things with position: fixed on mobile. We sense it by checking to see if there's a transform applied to the container (the LocomotiveScroll-controlled element).
pinType: document.querySelector('.sfe-locomotive-scroll-wrapper').style.transform ? 'transform' : 'fixed'
});
/* DON'T CHANGE THIS END */
// ------------------------------------------------------ START YOUR OWN CODE FROM HERE
gsap.to('#id', {
scale: 1.5,
scrollTrigger: {
scroller: '.sfe-locomotive-scroll-wrapper', /* don't ever forget about this one, it's a MUST !!! */
trigger: '#id',
start: 'top top',
}
});
// ------------------------------------------------------ END YOUR OWN CODE HERE
/* DON'T CHANGE THIS */
// each time the window updates, we should refresh ScrollTrigger and then update LocomotiveScroll.
ScrollTrigger.addEventListener('refresh', () => loco_scroll.update());
// after everything is set up, refresh() ScrollTrigger and update LocomotiveScroll because padding may have been added for pinning, etc.
ScrollTrigger.refresh();
/* DON'T CHANGE THIS END */
}
})();
</script>
@jsvalderrama

This comment has been minimized.

Copy link

@jsvalderrama jsvalderrama commented Jun 12, 2021

Hello,

I am trying to integrate on your LocoScroll Elementor template your instructions regarding the Show-hide Header in Elementor with the GSAP & ScrollTrigger, to no avail.

I have enabled freehand mode under Steroids for Elementor > Manage JS Libraries (Locomotive Scroll settings). I don’t know how to modify this new code so that it works correctly. Could you please help me ?

Here is your code modified with the instructions from your video on Show-Hide Header. Does this code allow me to obtain the same results as the one from your video? Do I need the CSS as well?

I thank you in advance for your answer.

Best,

`<script>
;(function() {

// locomotive scroll storage
var loco_scroll = {};

// wait until sfe_loco_scroll available
var chck_if_sfe_loco_scroll_loaded = setInterval(function() {

    if (window.sfe_loco_scroll && Object.keys(window.sfe_loco_scroll).length !== 0 && window.gsap && window.ScrollTrigger) {

        // store locomitive scroll object for the local usage
        loco_scroll = window.sfe_loco_scroll;

        // register scrollTrigger
        gsap.registerPlugin(ScrollTrigger);

        // ... do your thing
        my_thing();

        // clear interval
        clearInterval(chck_if_sfe_loco_scroll_loaded);

    }

}, 500);

function show_hide_header() {

const site_header = document.querySelector( "#ob-site-header" );

const show_hide_header = gsap.from ( site_header, {

        yPercent: -100,
        duration: 0.25,
        ease: "sine.out",

} ).progress ( 1 );

ScrollTrigger.create ( {

start: "top top-=" + 100,
onUpdate: ( self ) => {

if ( self.directon === -1 ) show_hide_header.play ();

else show_hide_header.reverse ();

}

    /* DON'T CHANGE THIS */
  
    // each time Locomotive Scroll updates, tell ScrollTrigger to update too (sync positioning)
    loco_scroll.on('scroll', ScrollTrigger.update);

    // tell ScrollTrigger to use these proxy methods for the '.sfe-locomotive-scroll-wrapper' element since Locomotive Scroll is hijacking things
    ScrollTrigger.scrollerProxy('.sfe-locomotive-scroll-wrapper', {

        scrollTop(value) {
            return arguments.length ? loco_scroll.scrollTo(value, 0, 0) : loco_scroll.scroll.instance.scroll.y;
        }, // we don't have to define a scrollLeft because we're only scrolling vertically.
        getBoundingClientRect() {
            return {
                top: 0,
                left: 0,
                width: window.innerWidth,
                height: window.innerHeight
            };
        },

        // LocomotiveScroll handles things completely differently on mobile devices - it doesn't even transform the container at all! So to get the correct behavior and avoid jitters, we should pin things with position: fixed on mobile. We sense it by checking to see if there's a transform applied to the container (the LocomotiveScroll-controlled element).
        pinType: document.querySelector('.sfe-locomotive-scroll-wrapper').style.transform ? 'transform' : 'fixed'
    });
  
    /* DON'T CHANGE THIS END */

    // ------------------------------------------------------ START YOUR OWN CODE FROM HERE

    gsap.to('#id', {

        scale: 1.5,
        scrollTrigger: {
            scroller: '.sfe-locomotive-scroll-wrapper', /* don't ever forget about this one, it's a MUST !!! */
            trigger: '#id',
            start: 'top top',
        }
    });

    //  ------------------------------------------------------ END YOUR OWN CODE HERE

    /* DON'T CHANGE THIS */
  
    // each time the window updates, we should refresh ScrollTrigger and then update LocomotiveScroll. 
    ScrollTrigger.addEventListener('refresh', () => loco_scroll.update());

    // after everything is set up, refresh() ScrollTrigger and update LocomotiveScroll because padding may have been added for pinning, etc.
    ScrollTrigger.refresh();
  
    /* DON'T CHANGE THIS END */

}

}();
</script>`

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment