Jump to content
GreenSock

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

Can this effect be achieved using ScrollTrigger?

Recommended Posts

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 post
Share on other sites

This is great! Thanks for the example 😃

Link to post
Share on other sites

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 post
Share on other sites

 

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.

 

  • Like 5
Link to post
Share on other sites

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 :)

  • Like 2
Link to post
Share on other sites

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 post
Share on other sites

Amazing! Thank you kindly, I truly appreciate your help :)

  • Like 1
Link to post
Share on other sites

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 post
Share on other sites

 

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.

 

  • Like 4
Link to post
Share on other sites

Thanks very much for the advice, I'll take heed :)

Link to post
Share on other sites

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 post
Share on other sites
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. 

  • Like 1
Link to post
Share on other sites

 

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) 

 

  • Like 1
Link to post
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×