Jump to content
Search Community

Smooth scroll to whole page and trigger animations

Men At Code test
Moderator Tag

Go to solution Solved by akapowl,

Recommended Posts

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. 

 

Link to comment
Share on other sites

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 :)

 

 

  • Like 6
  • Thanks 3
Link to comment
Share on other sites

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!

 

 

Link to comment
Share on other sites

  • 6 months later...

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.

Link to comment
Share on other sites

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 :) 

  • Thanks 1
Link to comment
Share on other sites

  • 2 weeks later...

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?

Link to comment
Share on other sites

  • 1 month later...
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/

Link to comment
Share on other sites

  • 6 months later...
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.

 

Link to comment
Share on other sites

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

 

  • Like 2
Link to comment
Share on other sites

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

 

 

Screenshot_3.png

Link to comment
Share on other sites

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

 

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

  • 5 months later...
  • Solution

 

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

 

  • Like 1
Link to comment
Share on other sites

  • 1 month later...

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