Using scrollTrigger and ScrollTo as fullpage.js does

[feulait 1 Likes (Newbie)]

Hi everyone,  

 

I'm looking for few days how to use the gsap plugin ScrollTrigger and ScrollTo together to create an automatic scroll from section to section as fullpage does. I think I'm understand well how ScrollTrigger works but I can't find good online exemple of ScrollTo... So I can't really figurate how make it

 

Here is a good exemple of what I want to do : 

See the Pen vwmOqd by Jean-Tilapin (@Jean-Tilapin) on CodePen

 but I think they use an old version and as my level in js & gsap is not really good I can't find how recreate this in my codepen exemple. 

 

Thanks a lot for your help  

 

Have a great weekend to all 

See the Pen rNxeLNP by feulait (@feulait) on CodePen

[ZachSaucier 7,152 Likes (Superhero)]

Hey feulait and welcome. Thanks for being a Club GreenSock member! 

 

That pen you link to has a very interesting approach. Here's how I'd set it up with ScrollTrigger (note that I didn't try to match the exact intro animations that that person used - mine is kind of a placeholder):

See the Pen abdNRxX?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Let me know if you have questions  

 

EDIT: Note that this approach is a hack and I don't really recommend using it in most cases. ScrollTrigger is not built to scroll-jack like this. See my post here for more info.

[feulait 1 Likes (Newbie)]

It is working really good! Thanks a lot Zach!!! 

[brands & beyond GmbH 1 Likes (Newbie)]

Hey Community, Hey Zach✌️

thanks for having this great forums for this excellent piece of software. This is my first post here. I´ve been using GSAP for quite a while now - getting more and more stunned about the newest features and the flexibility of scroll trigger and the quasi-replacement of ScrollMagic (Thanks for the good times). So I stumbled upon this thread these days on the search for a solution to snap only to the next/previous panel and blur out the momentum scroll (macOS trackpads).

 

 The latest solutions posted in this thread is nearly there and very helpful, but in my case (Macbook Pro 2019 / Trackpad or Magic mouse) It´s kinda "over-jumping" to the panel after the desired one, which I think is caused by the momentum scrolling mounted to trackpads and magic mouse on MacOS.

Would be nice if there is a easy way to adapt the ScrollMagic-Example below to the already posted solutions , but my knowledge about Javascript is simply not good enough.. Maybe you can have a look at this? 🙏

 

See the Pen VPNVxb by verticalgrain (@verticalgrain) on CodePen

 

Greetings

Richard

 

 

[ZachSaucier 7,152 Likes (Superhero)]

Hey @bb_richard and welcome to the GreenSock forums. I actually covered that in this related thread:

 

[ZachSaucier 7,152 Likes (Superhero)]

ScrollTrigger is not built to scroll-jack like what this approach does. The approach above is a hack and I don't really recommend using it. If you really need this sort of functionality then you'll need to either build the functionality yourself or use an existing tool like fullpage.js. But even then, depending on your needs, there are likely to be issues because web browsers are simply not built to work in this sort of way. 

 

The demos above (and in the threads linked to) are experiments as to what is possible. 

[hobo.tony 0 Likes (Newbie)]

On 6/12/2020 at 4:06 PM, ZachSaucier said:

Hey feulait and welcome. Thanks for being a Club GreenSock member! 

 

That pen you link to has a very interesting approach. Here's how I'd set it up with ScrollTrigger (note that I didn't try to match the exact intro animations that that person used - mine is kind of a placeholder):

 

Let me know if you have questions  

 

EDIT: Note that this approach is a hack and I don't really recommend using it in most cases. ScrollTrigger is not built to scroll-jack like this. See my post here for more info.

 

Hello @ZachSaucier :
This solution works pretty well on desktop, but when I tried that on the phone it get really messy, on first swipe it snaps well, but that it continues snapping on other sections without even touching it. Is it well known issue or its just me? If so does any quick fix exist?

I know this solution is hack, but since I would really like to use gsap on my new project, I'd like to make it work somehow. In worse case is there a way how to use ScrollTrigger together with a tool like fullpage.js?

Thanks

[OSUblake 18,497 Likes (Superhero)]

Hi hobo,

 

Like Zach said it's a hack. Fullpage and ScrollTrigger are completely different animals in the way the work. They are not going to play together nicely right out of the box. See my response here.

 

 

 

 

[GreenSock 18,596 Likes (Superhero)]

And just to be clear, you can absolutely use GSAP to animate things no matter what environment you're in - the only tricky thing here is the ScrollTrigger piece specifically because the very nature of fullPage.js is radically different and it does scroll-jacking. GSAP animations, however, can be used anywhere.