Jump to content
GreenSock

raumzeit

Members
  • Posts

    3
  • Joined

  • Last visited

raumzeit's Achievements

  1. Hey just wanted to let you know, that I finally figured out what the issue was. First of all, I loaded the code when the document was ready, which I had completely forgotten about somehow and since the code was executed before even the document was loaded, there were issues with the calculation of the window scroll height. And secondly, I have a contact form built with a plugin, which loads a js-file, that I had been lazy-loading with the plugin flying scripts and that caused some conditional fields of the form to always show on page-load, since the js-file was lazy-loaded and hide again when the js-file was loaded, which again caused issues with the calculation of the scroll height. I have used a document ready function for the gsap-code and set the form fields to display: none; by default. That fixed the problem. That took my whole day lol.
  2. Hey GreenSock, thank you for your answer. I've tried and it didn't work for me. But I think the code should be working usually, so there must be something wrong with my website. After some googling, I found out it had something to do with my html and body heights set to 100%. Unfortunately I cannot change these values, since then some z-indexed links are not working. When I console logged jQuery("html").scrollTop() though, it seemed to log out the right value or at least a "righty" value. When I logged out console.log(ScrollTrigger.maxScroll(window)), it returned the same value but only after scrolling. It is a little complicated and it is almost midnight here, can I pm you my website and you inspect it?
  3. Hello GSAP-friends, I have animated my header to hide when scrolled down and show again when scrolled up. Actually I have just copied the code I found in the demos and modified it just a little bit. I would like the header to be visible again, when the user has scrolled to the very end of the page. I was unsuccesful with determining it with the if condition -- jQuery(window).scrollTop() + jQuery(window).height() == jQuery(document).height() --. Is this functionality possible with Scrolltrigger? Here is what I have so far: gsap.registerPlugin(ScrollTrigger); let header = jQuery(".header"); let btn = jQuery('.custom-menu-toggle'); const showAnim = gsap.from('.header', { yPercent: -100, paused: true, duration: 0.2, }).progress(1); ScrollTrigger.create({ start: "top top", end: "max", onUpdate: (self) => { if(self.direction === -1) { showAnim.play(); } else if (jQuery(window).scrollTop() + jQuery(window).height() == jQuery(document).height()) { showAnim.reverse(); } else{ showAnim.reverse(); } } });; ScrollTrigger.config({ autoRefreshEvents: "visibilitychange,DOMContentLoaded,load" });
×