Jump to content
GreenSock

uncuerilla

Smooth Scrolling (Not Anchor-Jumping!)

By uncuerilla, in GSAP. Views: 23,027

Moderator Tag

Recommended Posts

Posted

Hi,

 

I've just seen the site of Kati Forner in (  https://katiforner.com/ ) the showcase here and wondering how they made this really smooth slowish scrolling behavior. Is it also made with gsap? What do you guys think? If so, how can I do it? I want that for my website :P

 

br & thanks in advance

 

Mario

  • Like 1
Link to comment
Share on other sites
Posted

Hey Mario and welcome to the GreenSock forums.

 

That site is indeed made with GSAP. It was made with an old version of GSAP but many of the effects on it could be made much more easily using the new ScrollTrigger GSAP plugin :) I think you're going to love the plugin!

 

Smooth scrolling (also called momentum scrolling) is possible using the ScrollTrigger plugin as Blake shows in this pen. 

  • Like 4
Link to comment
Share on other sites
Posted
6 hours ago, ZachSaucier said:

Hey Mario and welcome to the GreenSock forums.

 

That site is indeed made with GSAP. It was made with an old version of GSAP but many of the effects on it could be made much more easily using the new ScrollTrigger GSAP plugin :) I think you're going to love the plugin!

 

Smooth scrolling (also called momentum scrolling) is possible using the ScrollTrigger plugin as Blake shows in this pen. 

Hi Zach,

I forked Blake's pen, to animate each box, but start and end point markers move with the page, and don't stick to element, do you know why is that?

See the Pen bGEGVZg?editors=0010 by artyor (@artyor) on CodePen

Link to comment
Share on other sites
Posted
1 minute ago, kohlej said:

start and end point markers move with the page, and don't stick to element, do you know why is that?

Yep. It's because the tween that makes it look like smooth scrolling is actually moving the container around.

 

We didn't build ScrollTrigger to do scroll-jacking (which is what smooth scrolling requires), but it's entirely possible to leverage it to create similar effects. We're not prepared to offer any official recommendations in that regard yet. If there's enough demand, we may add something in the future.

  • Like 2
Link to comment
Share on other sites
Posted
1 minute ago, ZachSaucier said:

Yep. It's because the tween that makes it look like smooth scrolling is actually moving the container around.

 

We didn't build ScrollTrigger to do scroll-jacking (which is what smooth scrolling requires), but it's entirely possible to leverage it to create similar effects. We're not prepared to offer any official recommendations in that regard yet. If there's enough demand, we may add something in the future.

Thanks for info and fast replay, I thought it was me doing something wrong. 
 

Link to comment
Share on other sites
  • Author
Posted
On 6/2/2020 at 2:17 PM, ZachSaucier said:

Hey Mario and welcome to the GreenSock forums.

 

That site is indeed made with GSAP. It was made with an old version of GSAP but many of the effects on it could be made much more easily using the new ScrollTrigger GSAP plugin :) I think you're going to love the plugin!

 

Smooth scrolling (also called momentum scrolling) is possible using the ScrollTrigger plugin as Blake shows in this pen. 

 

Perfect! Thank you very much, thats exactly what I was looking for :-)

Link to comment
Share on other sites
Posted

Hi, I've applied this smooth scroll to my site, but it cuts the footer off. Why might this be?

 

Thank you

Link to comment
Share on other sites
Posted

Hey mishkamshka and welcome to the GreenSock forums. It's really hard for us to debug on a full, live site where we can't affect the code. Please see this thread for instructions on how to create a minimal demo:

 

Link to comment
Share on other sites
Posted

Hello guys,

is there a way to "actually" get the scroll behaviour of uncuerillas example (https://katiforner.com/) using ScrollTrigger?

I totally get the codepen ZachSaucier posted, but couldn´t edit it so that I can get rid of all Scrollbars. Is the Plugin actually depending on the body being >100vh? The rest of the Codepen´s structure looks like it should work - #viewport having the size of the browser-window, #scroll-container being bigger and translated inside of it...

Hope this (smooth scroll without any Scrollbars) is possible with ScrollTrigger?!

Thanks!

  • Like 1
Link to comment
Share on other sites
Posted
21 minutes ago, achtzigundsieben said:

Hope this (smooth scroll without any Scrollbars) is possible with ScrollTrigger?!

 

Nope. Not unless you hide them. ScrollTrigger requires a scrolling container. That site you linked is fake scrolling.
 

 

 

  • Like 2
Link to comment
Share on other sites
Posted

Thanks for your quick response OSUBlake!

"Hiding" them is exactly what I want to achieve, but the requirement of a scrolling container won´t let me use body {overflow: hidden;} and I´m sure you can give me even better reasons to not use::-webkit-scrollbar {display: none;} ?

Link to comment
Share on other sites
Posted

Well, that´s so simple I could´ve never thought about it. Thank you!! :D
This with everything else ScrollTrigger does should be the way to go here :)

  • Like 1
Link to comment
Share on other sites
Posted

Thanks to everyone in this thread, great topic. :)

 

On 6/2/2020 at 8:20 PM, ZachSaucier said:

We're not prepared to offer any official recommendations in that regard yet. If there's enough demand, we may add something in the future.

 

As Zach may remember from my email... I would LOVE to see an official recommendation if and when one may arise. Used carefully, smooth scrolling can make the already super smooth animations even slicker, https://katiforner.com/ is a great example of that.

 

That said... kohlej's animations built on Blakes awesome example seems to work perfectly, what else would need to be solved for it to be used in production?

 

Best, David

 

Link to comment
Share on other sites
Posted
1 minute ago, david_br said:

kohlej's animations built on Blakes awesome example seems to work perfectly, what else would need to be solved for it to be used in production?

The scroll positions are off. Each animation is meant to start at the element's top bounds and end at its bottom but look at where it is instead.

 

So unless you compensate for that it likely won't give you the results you're looking for.

Link to comment
Share on other sites
Posted
27 minutes ago, ZachSaucier said:

The scroll positions are off. Each animation is meant to start at the element's top bounds and end at its bottom but look at where it is instead.

 

So unless you compensate for that it likely won't give you the results you're looking for.

 

Sorry Zach, somehow I totally missed that!

Link to comment
Share on other sites
Posted
On 6/2/2020 at 2:17 PM, ZachSaucier said:

Hey Mario and welcome to the GreenSock forums.

 

That site is indeed made with GSAP. It was made with an old version of GSAP but many of the effects on it could be made much more easily using the new ScrollTrigger GSAP plugin :) I think you're going to love the plugin!

 

Smooth scrolling (also called momentum scrolling) is possible using the ScrollTrigger plugin as Blake shows in this pen. 

 

Hey there, thanks for this pen as it helped me a lot to figure out the correct `y` value to translate.

However I wonder, how would you refresh the value on a resize?

 

I can see that ScrollTrigger's instance does update its `end` value but the `document.documentElement.clientHeight` is not updated as it was registered at the moment of the first initialisation only thus the translate keeps going to the same value, wether it needs to go further after resize or wether it creates an empty white space underneath the end of my content.

 

Edit: I was wrong, the `end` is not showing being updated in my `onUpdate` callback

  

const tl = gsap.timeline();

tl.to(refInner.current, {
	y: -(refInner.current.getBoundingClientRect().height - document.documentElement.clientHeight),
	force3D: true,
	scrollTrigger: {
		id: 'smoothScroll',
		trigger: document.body,
		start: 'top top',
		end: 'bottom bottom',
		scrub: 0.5,
	},
});

(don't mind the `refInner.current`; I'm using it with React :))

 

Do you have to kill the timeline and create a new one on each resize event so the `document.documentElement.clientHeight` always reflects the live value?

You can replicate the same issue with Blake's pen by resizing it.


Thanks!

 

Edit: After some research, I assume there's a way to update the `vars` such as described in this old post: https://greensock.com/forums/topic/12063-updating-tween-variables/

 

Link to comment
Share on other sites
Posted
5 hours ago, miguderp said:

However I wonder, how would you refresh the value on a resize?

Just make it a function: 

y: () => -(refInner.current.getBoundingClientRect().height - document.documentElement.clientHeight),

 

  • Like 2
Link to comment
Share on other sites
  • 5 weeks later...
Posted

Hi everyone, I have been playing with the new ScrollTrigger and smooth scrolling (without scrolljacking).

 

Blake's Codepen was very useful.

 

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

 

I have made a modification where there is a navigation that scrolls to the right box. Everything works when you click on the navigation links but the window scrollbar is out of sync.

 

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

 

I have tried a few things such as updating the documentElement.scrollTop when the tween is completed but it is still out of sync.

 

Does anyone know what am I missing?

 

Cheers

Petr

Link to comment
Share on other sites
Posted

@GreenSock, yep that is it, thanks Jack. 

 

Is this your recommended approach for smooth scrolling with navigation?

 

I like this approach. The default body scrollbar instead of the scrolljacking.

 

It is great to see that so much can be achieved purely with the GSAP suite of plugins.

Link to comment
Share on other sites
Posted

There isn't really a "recommended approach". What you're doing is still considered scroll-jacking in a sense. The technique is similar to what most smooth-scrolling libraries do. That doesn't mean it's "bad", though. If it delivers the effect you want, awesome! Feel free to use it. 👍

 

If anything goes wrong, blame @OSUblake;)

 

  • Like 2
  • Haha 2
Link to comment
Share on other sites
Posted

Haha, I wouldn't do that to @OSUblake.

 

It feels hacky but yes it delivers a smoother scroll experience without using any additional library.

  • Like 3
Link to comment
Share on other sites
Posted

@greensock one more question. I see that you have made the initial tween of the container a variable let scroll = gsap.to(container, {...})

 

How does this change the way ScrollTrigger manages the container tween? In other words why do you need to store it in a variable?

Link to comment
Share on other sites
Posted

@Ihatetomatoes that was just leftover from when I was trying a few other things. There's no particular reason to do that in the final solution.

  • Like 1
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
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
Login Create Account