Smooth scroll to whole page and trigger animations

[Men At Code 6 Likes (Newbie)]

Hello everyone. 

What i'm trying to achieve is to have a smooth scroll effect applied to a .main div that wraps the whole page. 

The effect i reached is great but in the moment in which i add triggers inside, the position of them is wrong and seems affected by the smooth effect in a wrong way.

 

This is the code for the page smoothing part:

gsap.to(".container", {
      yPercent: -100,
      y: "100vh",
      scrollTrigger: {
        scrub: 1,
        trigger: ".container",
        start: "top top",
        end: document.querySelector(".container").clientHeight,
        markers: true
      }
    })

I set the yPercent as the -100% of the page and had to add also a y property to "100vh" in order to remove from the calculation the px height of the viewport that was in excess. 

The .container is a relative positioned element that wraps everything and is wrapper by a .main div that is positioned in fixed and with overflow hidden. 

This parts gives no problems. 

 

But, when i insert a simple trigger (which is in this case a relative positioned tag p inside the page), it places the trigger way down and while i scroll it moves too smoothly up or down. 

If the smooth code is removed, the trigger works perfectly, i have problems only when i match the trigger and the smooth. 

 

This is the code of the trigger

gsap.to(".bg", {
      duration: 0.5,
      autoAlpha: 0,
      scrollTrigger: {
        toggleActions: "play complete none reverse",
        trigger: ".trigger",
        start: "top top",
        markers: {startColor: "pink", endColor: "pink", fontSize: "12px"}
      }
    })

 

Thank you in advance for the help. 

 

[ZachSaucier 7,132 Likes (Superhero)]

Hey Federica. Have you looking into the method of smooth scrolling using ScrollTrigger.scrollerProxy? I think the video and demos there will explain how to do smooth scrolling + ScrollTrigger.

[Ihatetomatoes 325 Likes (Leader)]

Hi Federica, we went through GSAP only smooth scrolling in another forum thread.

 

Here is the final demo. I have also added a scrolltrigger for each box and all markers are aligned correctly even with the smooth scrolling.

 

See the Pen PoZLpbp by ihatetomatoes (@ihatetomatoes) on CodePen

 

Please note that smooth scrolling or scrolljacking is not something ScrollTrigger has been build for, but as you can see from the above it is doable.

 

Scroll responsibly

 

 

[daivietcomposite 0 Likes (Newbie)]

3 hours ago, Ihatetomatoes said:

Hi Federica, we went through GSAP only smooth scrolling in another forum thread.

 

Here is the final demo. I have also added a scrolltrigger for each box and all markers are aligned correctly even with the smooth scrolling.

 

 

 

 

Please note that smooth scrolling or scrolljacking is not something ScrollTrigger has been build for, but as you can see from the above it is doable.

 

Scroll responsibly

Thanks much, smooth now!

 

 

[Men At Code 6 Likes (Newbie)]

@Ihatetomatoes Thank you so much, it works like a charm! You rock!!!!   🤟

[Ihatetomatoes 325 Likes (Leader)]

Great to hear that it was useful😀

[existentialdread 3 Likes (Newbie)]

Hey @Ihatetomatoes, great demo. I am looking for a similar solution for smoother scrolling. I am running into issues with elements that are pinned. For instance, adding

pin: box

to your codepen code produces some pretty wild and inconsistent behavior. Any ideas on how I could go about handling the pinning issue? I'm trying to avoid adding in a third party 'smooth scrolling' library.

[ZachSaucier 7,132 Likes (Superhero)]

15 hours ago, existentialdread said:

I am running into issues with elements that are pinned. For instance, adding

pin: box

to your codepen code produces some pretty wild and inconsistent behavior

Which ScrollTrigger are you adding it to? What are you trying to accomplish?

 

Most likely you'll get help more quickly if you create a minimal demo, a new thread, and clearly describe what you're trying to do and where you're getting stuck  

[Ranonymus 0 Likes (Newbie)]

Great demo for smooth scrolling without a 3rd party library! 

However as @existentialdread mentioned there is a problem with pinned elements.

I tried to do it following the demo: https://codepen.io/ranonymus/pen/gOLPZaM
Somehow the pinned element cant follow container, or if it does its not smooth, it "lags". 

Is there a way to fix this?

[ZachSaucier 7,132 Likes (Superhero)]

Hey @Ranonymus and welcome to the GreenSock forums.

 

23 minutes ago, Ranonymus said:

Is there a way to fix this?

Use a third party smooth scrolling library along with .scrollerProxy()  That's the only way.

[PurpleAsia 0 Likes (Newbie)]

On 7/24/2020 at 5:37 AM, Ihatetomatoes said:

Hi Federica, we went through GSAP only smooth scrolling in another forum thread.

 

Here is the final demo. I have also added a scrolltrigger for each box and all markers are aligned correctly even with the smooth scrolling.

 

 

 

 

Please note that smooth scrolling or scrolljacking is not something ScrollTrigger has been build for, but as you can see from the above it is doable.

 

Scroll responsibly

 

 

Hi,

When I add content with ajax. The rolls are returned. I don't want it to return scroll. Example: https://purpleasia.com/clients/vietnamstarautomobilefull/news/

[chintan w3nuts 1 Likes (Newbie)]

On 7/24/2020 at 4:07 AM, Ihatetomatoes said:

Hi Federica, we went through GSAP only smooth scrolling in another forum thread.

 

Here is the final demo. I have also added a scrolltrigger for each box and all markers are aligned correctly even with the smooth scrolling.

 

 

 

 

Please note that smooth scrolling or scrolljacking is not something ScrollTrigger has been build for, but as you can see from the above it is doable.

 

Scroll responsibly

 

 

 

Thanks for this Example , i am using this many time.
But can you updated scroll and body height on click and resize ?
Thank you.

 

[akapowl 5,136 Likes (Superhero)]

Hello @chintan w3nuts - welcome to the forums.

 

I am not sure I understand what exactly it is you are asking about, but you might want to take a look at the smoothScroll() example in the .scrollerProxy() docs - it is a bit newer than the approach above and takes care of some more things, like trouble-free pinning.

 

Hope it helps.

 

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

 

[chintan w3nuts 1 Likes (Newbie)]

Hi @akapowl - thank you for help me

but i have one issue, i am updated code here if possible can you help me
issue = first time when page load smooth scroll is working perfect but when i click on Show Price Breakup than footer cut off when we scroll at bottom.

 

I don't know how to add codepen  demo here, thats why i share codepen demo link here. 

See the Pen LYjRmog by chintan_w3nuts (@chintan_w3nuts) on CodePen

 

 

[akapowl 5,136 Likes (Superhero)]

You will need to call a ScrollTrigger.refresh() after the transition is done, so the ScrollTrigger can accomodate for the change of height.

 

I changed the transition set on your .topline-wrap_outer in the CSS from all to max- height just to make sure the refresh doesn't fire on other possible transitions as well...

 

.home_pricing_sec .priceboxmn .toplinewrap_outer {
  max-height: 0;
  overflow: hidden;
  -webkit-transition: max-height ease-in-out 0.3s;
  -moz-transition: max-height ease-in-out 0.3s;
  transition: max-height ease-in-out 0.3s;
}

 

...and then added a transitionend eventListener in the JS to call the .refresh() when the transition has ended

 

  mainDiv.on('transitionend', () => {
    console.log('Transition ended');
    ScrollTrigger.refresh()
  });

 

 

 

With the old approach you will notice a jump of the content though, when the refresh is called...

 

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

 

 

 

...that's why I still recommend using the new smoothScroll() approach.

I just quickly popped it into your demo to show that the jump doesn'n't happen there.

 

See the Pen 02d8f971d453644abcac268ea19ae726 by akapowl (@akapowl) on CodePen

 

[chintan w3nuts 1 Likes (Newbie)]

@akapowl

 

Its working perfectly 😊. Thank you very much 🙏🙏

[chintan w3nuts 1 Likes (Newbie)]

@akapowl

we have used smooth scroll using GASP and that works perfectly fine. 
Now we want to hide the scroll bar and I am not sure if that is possible. Can you please let me know if that is possible and if yes how we can do it 

https://booking.torkmotors.com/
 

 

[akapowl 5,136 Likes (Superhero)]

 

https://www.w3schools.com/howto/howto_css_hide_scrollbars.asp

 

I don't think the overflow: hidden mentioned first on that page will be an option, since that helper function leverages native browser scrolling, so you couldn't just 'de-activate' it like that.

 

Your best shot will probably be to do it via CSS (as mentioned on the page linked above) best as you can.

 

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

 

 

By the way;

GreenSock also just released ScrollSmoother, its very own official smooth-scrolling plugin for Shockingly Green club members and above. While this helper function will probably stay around, I can't imagine it will be maintained or enhanced over time. The ScrollSmoother Plugin on the other hand, being an official plugin, will be! It's pretty customizable, offers some handy functionality and as a bonus on top of all that it comes with some beautiful pre-built effects, that you can set up easily. So maybe that'll be an alternative for you and you'll want to consider joining the club to get the best out of your smooth-scrolling.

 

https://greensock.com/scrollsmoother/

 

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

 

[kaii299 0 Likes (Newbie)]

hi how do i do the parallex effect show above with css and scroll trigger, the effect with the girl

 

[Cassie 5,136 Likes (Superhero)]

Sorry I don't know what you're referring to? Are you talking about this pen?

 

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

If so you can see all the code there.