VIPStephan

So, I have this animation. If you scroll down and click the white rectangle at the top right it will fade in/out the header nicely. The problem is that if it’s scrolled to the top all the way, the animation takes as much time as when it’s scrolled down but there is nothing to animate to, so it just looks like an unnecessary delay. Is there a way for it to adapt the duration depending on how far in it is? I. e. at the top it should be instant, if the header is faded out completely it should take, say, one second, if the header is just half transparent it should take half a second etc.?

I’m not able to reproduce what you wrote but I might have a hint why this problem occurs: CSS transforms create a new stacking context which could lead to unexpected behavior with positioning and z-index. Perhaps this is the issue and you should move the translation to a child element of the pinned element(s).

Thanks, man, that does the trick. :) I just assumed that the starting state of properties in tweens will always be recalculated (because it does it the first time anyway).

OK, eventually this whole thing will open a navigation and scrolling will be disabled in the “active” state, so scrubbing isn’t an issue there. It’s really only the fade-in from wherever it currently is (i. e. at the very top there will be no animation, a little bit down there will be an animation from, say, 50% opacity to 100% and back to 50% upon deactivating, and further down there will be an animation from 0 to 100% opacity and back). So, I think it’s not as difficult as it seems. Here is an adjusted demo with scrolling disabled in the active state: https://jsfiddle.net/dfp2z0s7/2/ Scroll down until the header is fully transparent, click the button at the top right two times and it will fade in and out nicely. Then scroll back up to the top and click the button again. Why does it animate from zero opacity to one, not from where it currently is? In the timeline only a “to” method is specified, so I would expect it to calculate the current value everytime the animation is called, or where am I thinking wrongly?

I’m sorry to keep on bothering you with questions but I’m trying things as we go here since it’s the first time I’m implementing something like this. Although it has been helpful, I felt like I was getting nowhere with the previous approach, so I changed it yet again. Basically, I created two timelines, one for the animation while scrolling and one for the animation on click of the toggle button; here’s the demo: https://jsfiddle.net/dfp2z0s7/1/ It works alright on its own, i. e. scrolling down/up, the header fades out/in, and while scrolled down, clicking the button fades in/out the header. The tricky part is if the document is just scrolled so much that the header is just half transparent: it should fade in completely from where it currently is and should also fade out to its current half-transparent state if the button is clicked again. At the moment it looks like the first time it works but for consecutive clicks, if it’s scrolled a bit it will start from the CSS state before the scroll. Any idea?

Thanks, Zach.

As far as I’ve seen the ScrollTo functionality will scroll nicely but doesn’t provide a way to go back and/or forward using the respective browser buttons (and doesn’t change the URL in the address bar to reflect the anchor to which it scrolled). Am I missing anything or is this really not possible?

OK, after a bit of fiddling around I changed the approach a bit. So, the overall goal is to have the header fade out on scroll, and past a certain point all inline styles should be removed and instead be controlled by a CSS class in the stylesheet for better separation of concerns. Eventually, a click on the toggle button should just change the class name and CSS transitions will do the rest. Now, I managed to disable and enable the ScrollTrigger instance by creating another ScrollTrigger instance that does just that, as shown in this minimal demo: https://jsfiddle.net/8kpt53wq/2/ However, I thought that ScrollTrigger.disable() will revert everything to unspecified but it will revert everything by setting new inline styles to the initial computed values which defeats the purpose because my CSS class will be overridden by these inline styles. How can I remove all inline styles onLeave and re-add them onEnterBack?

Ah, right. Is there a way to reset everything to “unspecified” (removing all inline styles applied by ScrollTrigger) while still having ScrollTrigger enabled and ready to react onEnterBack? Hm, thinking about this a little more, it sounds like it’s overcomplicating things, too. I guess the best is to calculate the point of re-entry manually and then just enable() the ScrollTrigger again.

Hmm, well, for something like this I wouldn’t even need GSAP, I could do this with a simple class toggle and CSS transitions. I specifically like the fade connected to the scroll position. OK, so, I’m thinking of working around this with a hybrid approach: have it fade out while scrolling, and onLeave reset it (to remove all inline styles) and set a class that takes over the hiding. Then, on click I can work with the class toggle and CSS transitions, and onEnterBack, set the ScrollTrigger animation again. Does that sound feasible? I’ve had some success with disable() onLeave but it won’t enable() again onEnterBack.

Well, this was just the first implementation. My first step was to get it to fade out when scrolling down, and when clicking the button while being outside of the ScrollTrigger area, it’s supposed to fade in or out. Then, when scrolling up again, it should fade in if it’s invisible or it should just stay visible, whatever it was when the button had been clicked last time. Eventually, this will be a header with a menu which will prevent scrolling the body altogether when active, so the only thing the script has to worry about is to fade in/out on click, and to fade in when scrolling up to the top. At the top it shouldn’t fade at all since it’s visible already, and if it’s half way opaque it should fade to full opacity upon activating or to the state of opacity determined by the scroll position upon deactivating the button. I hope my explanations made sense.

Thanks Zach. I’m more a JSFiddle guy, so I’ve created a minimal example here: https://jsfiddle.net/q54n1ofx/ That’s what my original first implementation was. I know it’s still rough but my thinking was that it would fade out on scroll and if the “button” is clicked it will fade in or out depending on an “active” class added to the container by just reversing or playing the animation again. This kind of works but once we’re in the range of the scroll trigger again it behaves in a weird way.

Hi, I’m new here and I’m trying to have a fixed header fade out upon scrolling down, with a button to have it fade in and out manually (if scrolled down). I’ve got the fade-on-scroll part working but I’m struggling with the fade toggle. I thought I would create some tweens and two independent timelines to which I add the tweens (with different timing in each timeline), and then I associate one timeline with ScrollTrigger and the other one will be executed on click of the button but somehow this doesn’t work. Note, I’m using this in combination with jQuery This is the code I have so far: var anim_header = gsap.timeline({ scrollTrigger: { trigger: $('body'), scrub: true, //markers: true, start:'top top', end: '+='+$('body > header').outerHeight()*1.75+'px' } }), toggle_header = gsap.timeline().pause(), fadeHeader = gsap.to($('body > header'), { opacity: 0 }); anim_header.add(fadeHeader); toggle_header.add(fadeHeader); toggleButton.click(function() { if(!$('html').hasClass('header_active')) { toggle_header.reverse().then(function() { $('html').addClass('header_active'); }); } else { toggle_header.play(); $('html').removeClass('nav_active'); } }); I thought I could just add the same tween to different timelines and they would work independently but apparently this isn’t working; it seems like one timeline overrides the other one.