Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
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 post
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 post
Share on other sites

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

Link to post
Share on other sites

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 post
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 post
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   1 member

×