Jump to content
GreenSock

feulait

Using scrollTrigger and ScrollTo as fullpage.js does

Recommended Posts

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

Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • 1 month later...

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

 

 

Link to comment
Share on other sites

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

 

  • Like 1
Link to comment
Share on other sites

  • 3 months later...

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. 

  • Like 2
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

 

 

 

 

  • Like 2
Link to comment
Share on other sites

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.

  • Like 3
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.
×