Jase Posted March 25, 2021 Share Posted March 25, 2021 Can this effect be achieved using ScrollTrigger? The hero section scrolls up to reveal the section sticky section below and then scrolls up once the hero section hits a certain point in the viewport. https://locomotive.ca/en/careers Link to comment Share on other sites More sharing options...
Shrug ¯\_(ツ)_/¯ Posted March 25, 2021 Share Posted March 25, 2021 The below codepen example from the ScrollTrigger Demos should help you based upon your description. See the Pen BaowPwo by GreenSock (@GreenSock) on CodePen If not, you can find many other pinning examples and discussions throughout the forum. 5 Link to comment Share on other sites More sharing options...
Jase Posted March 25, 2021 Author Share Posted March 25, 2021 This is great! Thanks for the example 😃 Link to comment Share on other sites More sharing options...
Jase Posted March 26, 2021 Author Share Posted March 26, 2021 I tried out the example and of course works great, BUT when I add the locomotive scroll library it breaks. I'm obviously missing something in my code... If you take out all the scroll library in this codepen you'll see that it's working fine. It seems like the #container is somehow preventing the smooth-scroll div from interacting. See the Pen MWJKjPe by Jase2018 (@Jase2018) on CodePen Link to comment Share on other sites More sharing options...
akapowl Posted March 26, 2021 Share Posted March 26, 2021 Hey @Jase For it to work with a smooth-scrolling library, you will first and foremost have to set the scroller appropriately on your ScrollTrigger. Using smooth-scrolling libraries will most likely have some caveats when it comes to layout/positioning things the right way - most often simply just related to how they handle the 'scrolling' - so the issue is not ScrollTrigger-related in the first place. I got the demo running with loco-scroll by additionaly to setting the scroller to the ScrollTrigger, removing the position: absolute, top and left from the #container in CSS, setting its height to 100vh instead of 100% and also setting the .smooth-scroll to overflow: hidden !important to make sure the default browser scrollbar doesn't show. Results may vary though - but it looks good on my end; on desktop as well as on mobile. Does that work for you? See the Pen 44bc043f0a02a21fa156a19f842d652f by akapowl (@akapowl) on CodePen Edit: On a sidenote in addition to the above: you will want to keep all your fixed positioned elements outside of your scroller - or otherwise they will just scroll with the flow. 5 Link to comment Share on other sites More sharing options...
Jase Posted March 26, 2021 Author Share Posted March 26, 2021 Top work! Works like a charm now. I did try adding the scroller handler but something I didn't do was remove the position: absolute, top and left from the #container, so thanks so much for your help on this 2 Link to comment Share on other sites More sharing options...
Jase Posted March 27, 2021 Author Share Posted March 27, 2021 Although it looks good on mobile too, I may consider disabling it on anything below 768px wide. What would be the best way to do this? Thanks in advance Link to comment Share on other sites More sharing options...
GreenSock Posted March 27, 2021 Share Posted March 27, 2021 You could use ScrollTrigger.matchMedia() for that. See the Pen e2d1d9084b18a67f9c90da7ea29a1509?editors=0010 by GreenSock (@GreenSock) on CodePen I'm not sure what you need to do for LocomotiveScroll (if anything), but the CodePen above at least shows how you can handle the GSAP/ScrollTrigger stuff. 5 Link to comment Share on other sites More sharing options...
Jase Posted March 27, 2021 Author Share Posted March 27, 2021 Amazing! Thank you kindly, I truly appreciate your help 1 Link to comment Share on other sites More sharing options...
Jase Posted March 27, 2021 Author Share Posted March 27, 2021 I have a question regarding the ScrollToPlugin. I want to be able to scroll to the anchor so that the point at which it stops is at the top of the screen rather that simply anchoring to an entire section. See the Pen MWJKjPe by Jase2018 (@Jase2018) on CodePen Link to comment Share on other sites More sharing options...
akapowl Posted March 27, 2021 Share Posted March 27, 2021 Hey @Jase Using GSAP's ScrollTo-Plugin won't work with locomotive-scroll due to the way locomotive-scroll handles the scrolling - you will have to use loco-scroll's own scrollTo method. I would highly recommend taking a look at locomotive-scroll's documentation and getting a better understanding of how it works because otherwise you will only run into more and more roadblocks. Furthermore your question is more of a general logic question and these forums are trying to stay focussed on GSAP related questions. Aside of quite some scoping problems you've got a major logic flaw in the way you are trying to attempt the scrollTo: You can not get the position to scroll to of any of those sections by accessing its .getBoundingClientRect.top - because they are all positioned at the same place from the start to make the layering work in the first place - so they would all give you the same value. Here's how you could get the right position though: keep your href on the link as it is - consistant with the number of the section you want to go to at the very end. In the click-function in the forEach of the links first get that string of the href-attribute, then boil it down to that last character which is the number ( maybe with a .charAt() ) and then in the last step multiply that number of it by the height of the sections (or since it is equal to the windos's height by the window's height). Then feed that value into locomotive-scroll's .scrollTo method and you should be good to go. Hope this helps. 4 Link to comment Share on other sites More sharing options...
Jase Posted March 27, 2021 Author Share Posted March 27, 2021 Thanks very much for the advice, I'll take heed Link to comment Share on other sites More sharing options...
Jase Posted March 29, 2021 Author Share Posted March 29, 2021 I appreciate that this isn't a gsap question but I'm going to be adding an accordion to one of Layered Pinning Panels. Once the accordion opens, the scroller needs to resize the window in order to compensate for the height adjustment. I just can't figure out the eventListener for the accordion... Any help very much appreciated See the Pen JjERGog by Jase2018 (@Jase2018) on CodePen Link to comment Share on other sites More sharing options...
GreenSock Posted March 29, 2021 Share Posted March 29, 2021 1 hour ago, Jase said: I appreciate that this isn't a gsap question but I'm going to be adding an accordion to one of Layered Pinning Panels. Once the accordion opens, the scroller needs to resize the window in order to compensate for the height adjustment. I just can't figure out the eventListener for the accordion... Any help very much appreciated Yeah, we really try to keep the forums here focused on GSAP-specific questions. This sounds like a LocomotiveScroll question. I'm sure their API has some way to update/refresh things (and don't forget to then ScrollTrigger.refresh()). Perhaps someone else knows and can chime in. 1 Link to comment Share on other sites More sharing options...
akapowl Posted March 29, 2021 Share Posted March 29, 2021 I can not tell you what callback to use either since I have no experience whatsoever with that jQuery-accordion. But using jquery's .animate() for the smooth-auto-scrolling will also not work for you here; just like GSAP's scrollTo - it just shifts your page so it will 'break' for loco-scroll. On 3/27/2021 at 6:21 PM, akapowl said: Using GSAP's ScrollTo-Plugin won't work with locomotive-scroll due to the way locomotive-scroll handles the scrolling - you will have to use loco-scroll's own scrollTo method. I would highly recommend taking a look at locomotive-scroll's documentation and getting a better understanding of how it works because otherwise you will only run into more and more roadblocks. Again: you will have to use locomotive-scroll's own .scrollTo() function. You could try this instead of your timeout-function - but it is obviously a bit wonky when the accordion collapses first and then the other pane opens. So finding the right callback(s) will probably be the way to go for this. Good luck setTimeout(() => { scroller.update() scroller.scrollTo( this.offsetTop ) }, 700) 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now