Jump to content
Search Community

Smooth Scrolling (Not Anchor-Jumping!)

uncuerilla test
Moderator Tag

Recommended Posts

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

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

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

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

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

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

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

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

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

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

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

  • 5 weeks later...

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

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

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