Last active
October 15, 2023 19:29
-
-
Save oooh-boi/85f83c44571276cbca02b70e691d26a9 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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() {
} ).progress ( 1 );
ScrollTrigger.create ( {
if ( self.directon === -1 ) show_hide_header.play ();
else show_hide_header.reverse ();
}
}();
</script>`