Jump to content
Search Community

Can't rework the code to work like I want. Please Help!

Nikolay Sabev test
Moderator Tag

Go to solution Solved by akapowl,

Recommended Posts

Hello to all,
I’m new into GSAP technology, I’m trying to achieve something, but I’m not a programmer and it is very difficult for me.
The example below is working almost like what I want, but I need a different direction. 
Example:

See the Pen qBNvrRQ by cameronknight (@cameronknight) on CodePen


My project:
My idea is, when user reach section “selected projects” website should to scroll down how is in the example, after user reach the end of section projects the website should continue to scroll horizontal. 
If anyone can assist me will be great!

Thank you in advance!

See the Pen oNZZvZE by k0ko88 (@k0ko88) on CodePen

Link to comment
Share on other sites

20 minutes ago, Cassie said:

I'm afraid we don't have the capacity to help you code up your project - there's a lot going on in your codepen.

But here's a rework of the pen you linked to. I hope it helps.
 

 

Thank you Cassie for your reply!
Okay, maybe I didn't explain it right what I want.
This is what I want, but with locomotive scroll horizontal.

direction.jpg

Link to comment
Share on other sites

15 minutes ago, Cassie said:

I might be missing something but it looks like that's exactly what the demo you linked to is doing. 

 

Thank you again Cassie, but no, I already have horizontal scroll from locomotive scroll, I need pin section to be vertical, but when I change properties and direction it's started to scroll diagonaly.

Link to comment
Share on other sites

55 minutes ago, Cassie said:

Ah ok, gotcha. The other way around. Apologies. So - you don't need the pin section to be vertical.

You need two pinned horizontal sections with a normal scroll in the middle.
 

 

Thank you Cassie this is almost what I want.
I made this, but I want to keep horizontal scroll how is it in my project if it is possible.
I made another demo like your pen, but can't make header to be fixed and if I move out from "container" smooth scroll stopped to work.

See the Pen jOBBNrN by k0ko88 (@k0ko88) on CodePen

Edited by Nikolay Sabev
Add Codepen Demo
Link to comment
Share on other sites

  • Solution

Hello there, excuse me for crushing in like that, but I was giving this a shot myself.

 

Here is a working sort of minimal demo of what I think it is you wanted to achieve @Nikolay Sabev, where the actual scroll-behaviour is horizontal and the fake-horizontal scroll from the example you posted is exchanged with a fake-vertical scroll.

 

See the Pen 87ad10833ca73c5a1ea59190fae48e32 by akapowl (@akapowl) on CodePen

 

 

I initially had the same problem with the content moving diagonally until I figured you'd have to set overflow-y: hidden to the [data-scroll-container] - I added the same for the overflow-x (with !important) to hide the horizontal scrollbar appearing here.

 

One oddity I encountered is that I had to specifically set pinSpacing to true on the ScrollTrigger for the pinSpacing to have an effect - but doing that, things seem to work as expected now. 

 

Maybe this helps you get to into the right direction with your version.

 

  • Like 5
Link to comment
Share on other sites

3 hours ago, akapowl said:

One oddity I encountered is that I had to specifically set pinSpacing to true on the ScrollTrigger for the pinSpacing to have an effect - but doing that, things seem to work as expected now. 

By default, ScrollTrigger doesn't add pinSpacing to elements whose parent is display: flex because that's rarely what they'd want. :)

  • Like 1
Link to comment
Share on other sites

3 hours ago, GreenSock said:

By default, ScrollTrigger doesn't add pinSpacing to elements whose parent is display: flex because that's rarely what they'd want. :)

 

Ah yes, I read about that before, just didn't remember - and a quick look in the documentation could have saved me some wondering :D 

 

Thanks for clearing that up :) 

  • Like 1
Link to comment
Share on other sites

On 5/22/2021 at 5:12 PM, akapowl said:

Hello there, excuse me for crushing in like that, but I was giving this a shot myself.

 

Here is a working sort of minimal demo of what I think it is you wanted to achieve @Nikolay Sabev, where the actual scroll-behaviour is horizontal and the fake-horizontal scroll from the example you posted is exchanged with a fake-vertical scroll.

 

 

 

 

 

I initially had the same problem with the content moving diagonally until I figured you'd have to set overflow-y: hidden to the [data-scroll-container] - I added the same for the overflow-x (with !important) to hide the horizontal scrollbar appearing here.

 

One oddity I encountered is that I had to specifically set pinSpacing to true on the ScrollTrigger for the pinSpacing to have an effect - but doing that, things seem to work as expected now. 

 

Maybe this helps you get to into the right direction with your version.

 

You are my hero,
thank you, this is what I wanted, but I have one more problem, how can I fix the header? Can you help me please?
Thank you in advance!
Best regards,
Nikolay

Link to comment
Share on other sites

2 hours ago, Nikolay Sabev said:

but I have one more problem, how can I fix the header?

 

I'm afraid I don't understand what it is you mean by that. Could you elaborate on that a bit?

 

Edit:

Like;

do you have problems understanding how to implement a fixed header into this (you'd have to have that header outisde of the scroller for that as the demo below shows)...

 

See the Pen e25698f698390d39e98878c2d41a2f10 by akapowl (@akapowl) on CodePen

 

...or do you have an issue with the header in your example that needs some fixing?

 

As mentioned before by @Cassie, a minimal demo would really help if you need further assistance on this.

 

  • Like 1
Link to comment
Share on other sites

On 5/25/2021 at 1:48 PM, akapowl said:

 

I'm afraid I don't understand what it is you mean by that. Could you elaborate on that a bit?

 

Edit:

Like;

do you have problems understanding how to implement a fixed header into this (you'd have to have that header outisde of the scroller for that as the demo below shows)...

 

 

 

 

...or do you have an issue with the header in your example that needs some fixing?

 

As mentioned before by @Cassie, a minimal demo would really help if you need further assistance on this.

 

Hi again Akapowl,
I have a problem with header and navigation when I move them out from container. I want navigation to work smoothly and to be fixed window width.
Thank you in advance!
Best regards,
Nikolay

See the Pen vYxZPQb by k0ko88 (@k0ko88) on CodePen

Link to comment
Share on other sites

 

1 hour ago, Nikolay Sabev said:

I have a problem with header and navigation when I move them out from container. I want navigation to work smoothly and to be fixed window width.

 

If you want position: fixed to work in a smooth-scrolling scenario like with locomotive-scroll, you will have to take those elements out of the smooth-scrolling container - otherwise it just won't work. That is a general smooth-scrolling thing and not related to GSAP.

 

I don't see you try that in your example.

When I take it out it appears to be working as expected. Does it not for you?

 

Also ( although I don't know if this is intended or not ) your first section there still moves vertically because you have a  data-scroll-direction="vertical" set to it. You actually have some of those in different places - i just took it out on the first element here to show the difference it makes.

 

See the Pen 25c4a76008bbcdb99a51c849d74e4467 by akapowl (@akapowl) on CodePen

 

 

 

On a different note:

When testing my example, I noticed that when you scroll to the very end and then resize your window to a smaller size than it was before, all the content will get pushed to the left, which can result in not being able to scroll anymore - I have no idea why this is happening though and I did not find a solution for that. This might very well be related to how locomotive-scroll handles its horizontal scrolling because I did not find that to be an issue with the same setup with smooth-scrollbar or native horizontal scrolling.

 

Edit:

Just to verify that the issue mentioned in the paragraph above is not related to ScrollTrigger, I took everything related to ScrollTrigger out in this following demo and the issues persists, so it appears to be an issue with locomotive-scroll - maybe the way my example is set up just doesn't work properly with how locomotive-scroll handles the horizontal scrolling as I am not  too experienced with locomotive-scroll.

 

See the Pen 38f68fc03fa24557553b56b89a13caa6 by akapowl (@akapowl) on CodePen

 

 

 

So note, that if you want to use something like this, you will have to find a setup that works properly with locomotive-scroll's horizontal scrolling.

 

Edit 2:

After some further investigation I conclude that this appears to be a general issue with locomotive-scroll and appears to be happening in verious scenarios with flex and/or with inline-block elements.

 

https://www.soubil-luberon.fr/

https://codepen.io/sfi0zy/full/PoGvYyy

 

If your content gets pushed off to the side far enough in that resizing-scenario mentioned above, the scroll will pretty much break and not jump into place anymore. Just wanted to make sure people are aware of that if they are going to use something like that.

 

  • Like 3
Link to comment
Share on other sites

On 5/26/2021 at 2:39 PM, akapowl said:

 

 

If you want position: fixed to work in a smooth-scrolling scenario like with locomotive-scroll, you will have to take those elements out of the smooth-scrolling container - otherwise it just won't work. That is a general smooth-scrolling thing and not related to GSAP.

 

I don't see you try that in your example.

When I take it out it appears to be working as expected. Does it not for you?

 

Also ( although I don't know if this is intended or not ) your first section there still moves vertically because you have a  data-scroll-direction="vertical" set to it. You actually have some of those in different places - i just took it out on the first element here to show the difference it makes.

 

 

 

 

 

 

On a different note:

When testing my example, I noticed that when you scroll to the very end and then resize your window to a smaller size than it was before, all the content will get pushed to the left, which can result in not being able to scroll anymore - I have no idea why this is happening though and I did not find a solution for that. This might very well be related to how locomotive-scroll handles its horizontal scrolling because I did not find that to be an issue with the same setup with smooth-scrollbar or native horizontal scrolling.

 

Edit:

Just to verify that the issue mentioned in the paragraph above is not related to ScrollTrigger, I took everything related to ScrollTrigger out in this following demo and the issues persists, so it appears to be an issue with locomotive-scroll - maybe the way my example is set up just doesn't work properly with how locomotive-scroll handles the horizontal scrolling as I am not  too experienced with locomotive-scroll.

 

 

 

 

 

 

So note, that if you want to use something like this, you will have to find a setup that works properly with locomotive-scroll's horizontal scrolling.

 

Edit 2:

After some further investigation I conclude that this appears to be a general issue with locomotive-scroll and appears to be happening in verious scenarios with flex and/or with inline-block elements.

 

https://www.soubil-luberon.fr/

See the Pen PoGvYyy by sfi0zy (@sfi0zy) on CodePen

 

If your content gets pushed off to the side far enough in that resizing-scenario mentioned above, the scroll will pretty much break and not jump into place anymore. Just wanted to make sure people are aware of that if they are going to use something like that.

 

Hi Akapowl,
sorry about my late answer, I've tried to fix the issue with your example, but without any progress. I discovered that if get dynamic styles from content and apply them to the header with positive values it works perfectly.
This is my first idea, but as I told before I'm not a programmer.
My second idea is if it`s possible "scroll trigger" to apply the same values to the header it will fix the bug, but I think the first idea is better because of the complexity of the code.

Link to comment
Share on other sites

 

Hey @Nikolay Sabev

 

I'm afraid, I can not help you any further with this - both things mentioned ( how to deal with the header and the shifting of the content in the end ) are issues related to locomotive-scroll and as shown have nothing to do with GSAP - and we don't support locomotive-scroll in these forums.

 

Maybe you could ask somebody over at locomotive-scroll (maybe in the issues section of their GitHub page) how to best proceed with this.

  • Like 2
Link to comment
Share on other sites

1 minute ago, akapowl said:

 

Hey @Nikolay Sabev

 

I'm afraid, I can not help you any further with this - both things mentioned ( how to deal with the header and the shifting of the content in the end ) are issues related to locomotive-scroll and as shown have nothing to do with GSAP - and we don't support locomotive-scroll in these forums.

 

Maybe you could ask somebody over at locomotive-scroll (maybe in the issues section of their GitHub page) how to best proceed with this.

Great, Thank you very much for your help! So do I need to do something else or marked answer is enough?

Link to comment
Share on other sites

Hi again,
I found very simple solution how to fix this issue I mean with locomotive scroll + fixed header and navigation(data-scroll-target).
Just try this code in your project, it's works perfect in my case.
$(window).on("load", function () {
                $('header').appendTo('body');
            });
There is working example:

See the Pen vYxZPQb by k0ko88 (@k0ko88) on CodePen

  • Thanks 1
Link to comment
Share on other sites

  • 5 months later...

Hi again,
can I ask someone to help me with his coding skills, because I'm a designer and I'm not so good with code?
The problem is with locomotive scroll behavior I want sections in my website to snap each other. I have been searching for a solution in the forum and found it:

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


This is a working solution with everything that I need, I have tried to implement it on my website, but it doesn't work.
Here is a demo of my website and the code that I use:

See the Pen xxLBmyd?editors=1010 by k0ko88 (@k0ko88) on CodePen

Thank you in advance!

Link to comment
Share on other sites

Hi @Nikolay Sabev. Unfortunately, LocomotiveScroll is not a GreenSock product so we can't really support that in these forums. This looks like a LocomotiveScroll integration problem and that product seems to be behaving rather oddly (from what I can tell), but I'm not very familiar with it. I think part of the problem is that you're trying to set it up as "horizontal" but you're actually scrolling vertically. I've only seen LocomotiveScroll demos that use the default vertical scrolling orientation. You can of course make things look like they're moving horizontally (as you're doing) with ScrollTrigger/GSAP. But LocomotiveScroll looks like it may be having issues because you're telling it to be oriented horizontally but the actual scroll is vertical. I'm guessing here. 🤷‍♂️ I'm sure that with enough time and experimenting, it could be solved but we just don't have the resources here to offer free consulting services for 3rd party tools like that. 

 

You're welcome to post in the "Jobs & Freelance" forum to see if you can hire someone to help you with this. And of course if you have any GSAP-specific questions, we're happy to answer those. 

  • Like 1
Link to comment
Share on other sites

7 hours ago, GreenSock said:

Hi @Nikolay Sabev. Unfortunately, LocomotiveScroll is not a GreenSock product so we can't really support that in these forums. This looks like a LocomotiveScroll integration problem and that product seems to be behaving rather oddly (from what I can tell), but I'm not very familiar with it. I think part of the problem is that you're trying to set it up as "horizontal" but you're actually scrolling vertically. I've only seen LocomotiveScroll demos that use the default vertical scrolling orientation. You can of course make things look like they're moving horizontally (as you're doing) with ScrollTrigger/GSAP. But LocomotiveScroll looks like it may be having issues because you're telling it to be oriented horizontally but the actual scroll is vertical. I'm guessing here. 🤷‍♂️ I'm sure that with enough time and experimenting, it could be solved but we just don't have the resources here to offer free consulting services for 3rd party tools like that. 

 

You're welcome to post in the "Jobs & Freelance" forum to see if you can hire someone to help you with this. And of course if you have any GSAP-specific questions, we're happy to answer those. 

Hi @GreenSock ,
actually, I have a problem with ScrollTrigger and GSAP, I made a working example with a horizontal locomotive scroll, but it doesn't work, I don't know how to rework your example with a vertical section to work with the horizontal scroll.
I think it is something trivial, but I can't solve it.

See the Pen bGrJxBK by k0ko88 (@k0ko88) on CodePen


Thank you in advance!

Link to comment
Share on other sites

4 hours ago, Nikolay Sabev said:

actually, I have a problem with ScrollTrigger and GSAP, I made a working example with a horizontal locomotive scroll, but it doesn't work

Like I said, we can’t support 3rd party (non-GreenSock) tools here for free. And your demo has a TON of code to work through (WOW! Almost 2500 lines). We’d be happy to answer any ScrollTrigger-specific questions if you can provide a minimal demo that doesn’t leverage 3rd party tools like LocomotiveScroll that may be interfering with functionality. If you still need help, I think you’ll need to hire someone to spend all the time necessary to figure out how LocomotiveScroll is interfering and integrate it properly. 

 

Good luck with your project!

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...