Jump to content
Search Community

Having an issue with ScrollTrigger + Locomotive Scroll

Oluwatobiju Judah test
Moderator Tag

Recommended Posts

I think I've properly setup ScrollTrigger with locomotive scroll using some examples seen in the forum, however I can't seem to get my animation to work properly. It triggers as soon as the page loads without me scrolling to the point I set my trigger.

here is a codesandbox link. https://codesandbox.io/s/cocky-darkness-ncfh6?file=/src/components/SectionThree/SectionThree.tsx

sorry I couldn't use codepen. don't know if that's fine?

 

edit: relevant files: App.tsx, SectionThree.tsx, instantiateScroll.ts

Edited by Oluwatobiju Judah
forgot to add something
Link to comment
Share on other sites

Hey @OSUblake, thanks for responding. Let me minimize the code to help make debugging and helping easier. Will reply as soon as I've done that.

Yes, I am. As for the horizontal scroll, as soon as I instantiated the scroll, I stopped it scroll.stop(), then the full screen video plays for 10 seconds before I start it, scroll.start(). So if you try to scroll during the first 10 seconds it won't work. After that everything is as normal, including mouse wheel scrolling.

Link to comment
Share on other sites

 

Hello @Oluwatobiju Judah

 

There really is awhole lot going on in your example but from a quick glimpse into your SectionThree.tsx, it looks though like you are using locomotive-scroll's data-scroll-section attribute, right?  Maybe they are the culprit causing your problems.

 

There was a question about those earlier today - unfortunately ScrollTrigger won't work with them.

 

 

 

Link to comment
Share on other sites

 

Sorry, I did not intend to link to a possible solution but more to possible explanations why ScrollTirgger doesn't work with that data-attribute - I probably should have mentioned that ( also it looks like I linked to a wrong post in that second thread - changed that now).

 

Edit:

 

Quote

But this time the horizontal scroll isn't even initiating for some reason. Trying to see if I missed something.

 

When adding loco-scroll's CSS to your codepen demo it seems to work better.

 

It looks like you did not hook locomotive-scroll up to ScrollTrigger via .scrollerProxy() though - which is sort of the middleman between those two and neccessary for ScrollTrigger to get the 'scroll-position' of locomotive-scroll (or any other smooth-scrolling library).

  • Like 3
Link to comment
Share on other sites

@Oluwatobiju Judah good to know your progress. I am confused by that or missing something.

Quote

horizontal scroll works well, but annoyingly, my content is still laid out vertically

Try to use "flex-wrap: nowrap" on the section you want move horizontally, that may fix layout but it is just a blind guess.

 

Aside Note: Each time you make some changes or progress with your demo. Pls fork it and share again.

Link to comment
Share on other sites

Try getting it to work without React first. I couldn't do it.

 

See the Pen abJxGpo by GreenSock (@GreenSock) on CodePen

 

We really don't have the resources to troubleshoot third party libraries. I would just recommend doing something like this.

 

See the Pen ZEpNLZa by GreenSock (@GreenSock) on CodePen

 

And if you want the smooth effect.

 

See the Pen gOgWELo by GreenSock (@GreenSock) on CodePen

 

  • Like 1
Link to comment
Share on other sites

1 hour ago, OSUblake said:

Try getting it to work without React first. I couldn't do it.

 

I can't help with the React side of things, but here is the demo working without React (I left the trigger set to the .textWrapper instead of the image as you changed it to - probably because the image never actually reached the center of the page). You'll still need to view it on a viewport high enough though.

 

See the Pen 42a91a2daca03ff975ad28cb485743b7 by akapowl (@akapowl) on CodePen

 

 

 

And to get back to what I said previosuly about the data-scroll-sections @Oluwatobiju Judah:

 

This here demo works - but if you were trying to pin one of those sections that has the data-scroll-section attribute, that would not work.

 

Also, if you'd want to pin anything inside those sections you would have to change the line in the ScrollerProxy about the pinType;

as of now it checks if the scroller-container has a transform applied and uses pinType: 'transform' if it has - but now your sections have transforms applied (due to using the data-scroll-section attribute) so you'd have to keep that in mind because the pinType 'fixed' won't work here anymore - if I'm not missing something you'll probably want to just set pinType: 'transform' for any case.

 

And apparently (as the first thread that I linked to above mentions - the one from yesterday ) there seem to be other issues introduced by using the data-scroll-section attribute that I personally can not give you any advice on how to fix.

 

  • Like 3
Link to comment
Share on other sites

1 hour ago, OSUblake said:

 

 

Wow, I mean that is what it looks like? A ScrollTrigger native version of the smooth scrolling in locomotive scroll? That's fantastic if so, one less library to have to worry about in the future.  The strongest of hat tips to the developer. B)

 

Edit: Haha, yup, just seen the title of the CodePen and that's a pretty big clue. 🤣 Brilliant. 

  • Like 1
Link to comment
Share on other sites

3 hours ago, OSUblake said:

And if you want the smooth effect.

 

 

 

 

 

Hi Blake,

 

This is a great demo and would be a lovely replacement for Locomotive, but I noticed I was able to consistently break it on resize, similar to the issue I am having in my thread here. I haven't done a proper investigation as to whether or not they are truly related issues (i.e. ScrollTrigger not being able to detect whether it's in a triggered section and .refresh() only affecting those sections that are in view), but it seemed worth notifying someone about.

 

Let me know if you need me to screen record how I go about breaking it, but the instructions I provide in the linked thread seem to work pretty reliably for me. 

Link to comment
Share on other sites

9 hours ago, column5media said:

Let me know if you need me to screen record how I go about breaking it, but the instructions I provide in the linked thread seem to work pretty reliably for me. 

 

Definitely, we like to see any issues you are having with it. 

 

 

  • Like 1
Link to comment
Share on other sites

@OSUblake & @akapowl thanks for all the help so far. I removed locomotive scroll and implemented the horizontal and smooth scrolling with scrolltrigger as you suggested and they worked great. Well, except for the trigger on the element. Which seems stay at the point where the object is on load but doesn't follow the object on scroll, and additionally, weirdly goes upwards as I scroll. See codepen here 

 

See the Pen YzZMepa by tobijudah (@tobijudah) on CodePen

Link to comment
Share on other sites

1 hour ago, Oluwatobiju Judah said:

Which seems stay at the point where the object is on load but doesn't follow the object on scroll, and additionally, weirdly goes upwards as I scroll.

 

It is to be expected that it moves upwards as you scroll, since this method of doing things is not actually scrolling horizontally but only faking the horizontal-scroll with an x-translation tween on vertical scroll. So you can not use ScrollTriggers horizontal property with it.

 

If you'd want specific animations on individual sections to trigger when they reach a certain point with this, you'd have to do some calculations for those. The demo posted by Blake contains an example for how to do that - based on the element's offsetLeft in combination with the window's width (depending on where in the viewport you want to trigger them) and an "offset" that needs to be included into the calculations here because the amount of the x-translation for the fake-horizontal-tween and the actual amount of scroll are not the same -  * (maxWidth / (maxWidth - window.innerWidth))

 

sections.forEach((sct, i) => {
  ScrollTrigger.create({
    trigger: sct,
    start: () => 'top top-=' + (sct.offsetLeft - window.innerWidth/2) * (maxWidth / (maxWidth - window.innerWidth)),
    end: () => '+=' + sct.offsetWidth * (maxWidth / (maxWidth - window.innerWidth)),
    toggleClass: {targets: sct, className: "active"}
  });
});

 

 

 

You'll find a more detailed explanation about that "offset" in this thread here

 

 

 

 

And just to make sure;

You do not actually smooth-scroll here ( since you did not include the smoothScroll() helper functionality ).

The fake-horizontal scroll appears smooth because it has a scrub: 1 set which makes the animation take 1 second to catch up to the actual scroll.

 

If that is the only section you have on your page it will probably be fine, but if you had sections above and below that fake-horizontal-scroll section for example, the scroll wouldn't be smooth for those. So if you want things to be smooth everywhere you would have to include that smoothSroll() helper functionality and could set the scrub of the fake-horizontal tween to true.

 

  • Like 3
Link to comment
Share on other sites

6 hours ago, akapowl said:

It is to be expected that it moves upwards as you scroll, since this method of doing things is not actually scrolling horizontally but only faking the horizontal-scroll with an x-translation tween on vertical scroll. So you can not use ScrollTriggers horizontal property with it.

 

Pretty sure you could just setup a scroll proxy for that. I'll mess around with that in a bit.

 

  • Like 1
Link to comment
Share on other sites

19 hours ago, OSUblake said:

 

Definitely, we like to see any issues you are having with it. 

 

 

 

Here is one video that shows how positioning gets stuck on resize, then unstuck on resize again. They also do not seem to respect where they should be relative to the document position (i.e. 2 grids from the top, and 3 grids separating one another).

 

Near the end, it also demonstrates how the actual order of the elements changes, with it ending up CAB instead of ABC.

  • Thanks 1
Link to comment
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.
×
×
  • Create New...