Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

roy_rodger

Members
  • Posts

    1
  • Joined

  • Last visited

roy_rodger's Achievements

0

Reputation

  1. Hello, I have an issue with the website I am creating on Elementor. The template used here has locomotive scroll, GSAP and GSAP Scroll Trigger activated. Several elements are present on this template, which are animated and working as expected. Nevertheless, I can’t find a way to add a show-hide header. I tried many different combinations. When I am editing mode I see the header, but when I go on Preview mode the header doesn’t show up. New to this type of development, I would appreciate your help. I used the CSS ID on my header, #maria-header, I completed the code CSS and the javascript below: I appreciate the time you take to read and answer me. Best, #maria-header { display: flex; position: fixed; z-index: 999; width: 100%; } <script> ;( function() { // wait until gsap & ScrollTrigger available let chck_if_gsap_loaded = setInterval( function() { if( window.gsap && window.ScrollTrigger ) { // register scrolTrigger gsap.registerPlugin( ScrollTrigger ); // ... do your thing show_hide_header(); // clear interval clearInterval( chck_if_gsap_loaded ); } }, 500 ); function show_hide_header () { const site_header = document.querySelector( "maria-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.direction === -1 ) show_hide_header.play(); else show_hide_header.reverse(); } }); } } )(); </script>
×