Full screen vertical scroll

[viktarbel]

Hi there,

 

GSAP is amazing thing, but what I created so far is not that amazing that I saw it might be (

 

I combined some codepens to create a full screen vertical scroll, but it doesn't work. It either jumps to the next section(s) after section scroll or doesn't work at all (just a normal scroll). And it works differently on each run.

Funny thing is it works great on the dev site (I copied code from the site), but doesn't work in codepen. I try to create a more complex thing, that's why I started codepen to work on.

See the Pen poOzbEo by viktarbel (@viktarbel) on CodePen

[mvaneijgen]

Hi @viktarbel welcome to the forum.

 

What is it you're trying to do? Seems like you want to scroll to certain sections, have things snap in place when you scroll.

 

Right now you have two ScrollTriggers that are running the same functions and it seems that those just keep alternating, because if one onEnterBack the other one fires onEnter, which make them stuck in a infinite loop. Why have two ScrollTriggers? I find you really need more than one ScrollTrigger to get the desired result you want. And there are a lot of examples that allow for snapping build in to ScrollTrigger. 

 

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

 

Personally when you're new to something I would take it slow and tackle one problem at a time and only move to the next one when you fully understand the first problem you've solved. 

 

If you want more inspiration I would look in the de ScrollTrigger demo's here: https://greensock.com/st-demos/

[viktarbel]

Hi @mvaneijgen,

 

Thanks for the answer. I basically want to create a full screen section scroll up and down. And I grabbed the idea from this pen owned by GreenSock: 

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

For some reason, it doesn't work there too. That's weird.

 

And after that, I will need to make it work with anchor tags to a certain sections and ScrollToTop button.

[Rodrigo]

Hi,

 

Based on your original example maybe this could be a better approach:

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

 

Hopefully this helps. Let us know if you have more questions.

Happy Tweening!

[viktarbel]

Yes, I now about this snap functionality, but I'd like to have that smooth scroll experience, where when you scroll with your mouse then it just changes the section, without that snap delay, where you scroll, then you need to release the scroll button and after that it changes the section.

 

Do you know why above example stopped working?

[Rodrigo]

Hi,

 

I'm not sure I follow exactly what you're looking for. Something like this:

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

 

Happy Tweening!

[viktarbel]

Thanks, @Rodrigo. What "cancelWhenTweening" function does?

 

And also I wanted to ask what this type of entry means:

-> self => self.isActive && !scrollTween && goToSection(i) or

-> scrollTween && e.preventDefault();

 

Does it mean that if self => self.isActive is TRUE and !scrollTween is TRUE, only then run goToSection() function? I just didn't see such type of entries before.

[Rodrigo]

Hi,

 

The function just prevents the default behaviour on some particular events(wheel and scroll):

window.addEventListener("wheel", cancelWhenTweening, {passive: false});
window.addEventListener("scroll", cancelWhenTweening, {passive: false});
function cancelWhenTweening(e) {
  scrollTween && e.preventDefault();
}

The idea is that if the scrollTween variable is truthy (means is defined) prevent the default behaviour of those events.

 

1 hour ago, viktarbel said:

self => self.isActive && !scrollTween && goToSection(i)

That basically states that if self.isActive is truthy (the ScrollTrigger instance is active) and the scrollTween variable is falsy, the gotoSection function is executed.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_NOT

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND

 

Those are very common JS expressions and very handy for shortening conditional logic blocks.

 

Happy Tweening!