Issues adding smooth scrolling type function with scroll trigger on webpage

[Strapchay]

I am currently am trying to implement a smooth-scrolling functionality where when the section-hero is scrolled. The Hero-img(the headed figure in the section-hero) is pinned and the contents in the section-hero glide in the opposite direction. I'm basically implementing the functionalities on Yunicorn.vc . I currently have the Hero-img pinned and then expecting the contents to glide in the other direction since i set a positive getProp("y") value. The direction in which it glides works as expected but the hero-img doesn't get pinned and it instead scrolls with the contents i need to glide with the section. I hope you can take a look at my code and help out

See the Pen ZEmvWrV by Walexero (@Walexero) on CodePen

[Rodrigo]

Hi,

 

I fiddled a bit around but I can't find a simple way to achieve what you seem to be trying to do, since there are over 250 lines of HTML and more than 300 lines of CSS, so it was kind of hard to find exactly what are you trying to pin. If you on't reduce your demo to just a few divs there is not much we can do, unfortunately we don't have the time resources to comb through complex codebases. On top of that the smooth scroll function you're using there must be a bit old. GSAP has it's own smooth scrolling solution called ScrollSmoother:

https://greensock.com/scrollsmoother/

 

ScrollSmoother is a benefit of Club GreenSock members. Is worth noticing that being a Shockingly Green Club member gives you access to all the bonus plugins and their updates for a year, which will let you do all sort of crazy things in all your projects, which normally pays itself with one project or two, then is all benefits.

 

There are other options for smooth scrolling out there such as Locomotive and Lenis but we can't fully support them because we have to use our limited time resources on GSAP related issues.

 

 One of our superstars @akapowl has created a few examples using Locomotive and other libraries:

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

 

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

 

This is the same example using ScrollSmoother:

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

 

Hopefully this helps.

Happy Tweening!

[Strapchay]

18 minutes ago, Rodrigo said:

Hi,

 

I fiddled a bit around but I can't find a simple way to achieve what you seem to be trying to do, since there are over 250 lines of HTML and more than 300 lines of CSS, so it was kind of hard to find exactly what are you trying to pin. If you on't reduce your demo to just a few divs there is not much we can do, unfortunately we don't have the time resources to comb through complex codebases. On top of that the smooth scroll function you're using there must be a bit old. GSAP has it's own smooth scrolling solution called ScrollSmoother:

https://greensock.com/scrollsmoother/

 

ScrollSmoother is a benefit of Club GreenSock members. Is worth noticing that being a Shockingly Green Club member gives you access to all the bonus plugins and their updates for a year, which will let you do all sort of crazy things in all your projects, which normally pays itself with one project or two, then is all benefits.

 

There are other options for smooth scrolling out there such as Locomotive and Lenis but we can't fully support them because we have to use our limited time resources on GSAP related issues.

 

 One of our superstars @akapowl has created a few examples using Locomotive and other libraries:

 

 

 

 

 

 

This is the same example using ScrollSmoother:

 

Hi, thanks for the response, i currently do not have the money to subscribe for smoothScroller and joining the green club membership which is why i opted to use scrollTrigger. I would be able to reduce the code and then notify you of the changes. Would also take a look at locomotive and Lenis

 

[Strapchay]

7 minutes ago, Strapchay said:

 

Hi, have reduced the html to 100 lines of code. For the css i have it segmented into 3 parts, The general styling, The Content styling and then the smooth scroller styling. You really do not have to worry about the general styling as its mainly for the layout of the page. I hope you get to have a look again 

[GreenSock]

That's still a lot of styling and markup to dig into. I don't have time to explore it all, but I'll mention a few things: 

1. That helper function you're using is not officially supported and I'd strongly recommend using ScrollSmoother instead, like Rodrigo said. It's much, much more bulletproof and full-featured. 
2. It sure looks to me like the problems you're running into all have to do with your CSS setup. Like you've got various things set to position: fixed, and heights that are 100% so they won't allow the content to fill the space or scroll, etc.

Here's a super quick stab at changing a few things to show ScrollSmoother and the pinning: 

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

 

Hopefully that at least gets you going in the right direction. 

[Strapchay]

2 hours ago, GreenSock said:

That's still a lot of styling and markup to dig into. I don't have time to explore it all, but I'll mention a few things: 

1. That helper function you're using is not officially supported and I'd strongly recommend using ScrollSmoother instead, like Rodrigo said. It's much, much more bulletproof and full-featured. 
2. It sure looks to me like the problems you're running into all have to do with your CSS setup. Like you've got various things set to position: fixed, and heights that are 100% so they won't allow the content to fill the space or scroll, etc.

Here's a super quick stab at changing a few things to show ScrollSmoother and the pinning: 

Hi, thanks for the help. This should be a great help and i appreciate it