Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Nikolay Sabev

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

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

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

 

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

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.

See the Pen 7663b55b05f5d473c0e61732fb9174b4 by cassie-codes (@cassie-codes) on CodePen

Link to post
Share on other sites
Posted (edited)
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 post
Share on other sites

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 post
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 post
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 post
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 post
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 post
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 post
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 post
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 post
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 post
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 post
Share on other sites
12 minutes ago, Nikolay Sabev said:

So do I need to do something else

 

No, nothing you need to do.

 

Good luck with your project and happy tweening :) 

 

  • Like 1
Link to post
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 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.

×