Jump to content
Search Community

Can you set a starting scroll position while using ScrollTrigger without running through the pin scrub animation?

adamatronix test
Moderator Tag

Recommended Posts

Essentially I have an intro pin effect for a page that should only start at the beginning in certain scenarios like accessing the homepage directly. On route changes to the homepage I want the user to see the page after the pin effect but still have the option to scroll up. Below is a rough example, and it kind of works insofar when navigating to the page it'll go to scroll pos 2000. But you see a flash of the scrub animation which I don't want.

 

Not sure if this can be achieved.

 

if(fromRouteChange){
 window.scrollTo(0, 2000);
}


tl.current = gsap.timeline({
          scrollTrigger: {
              trigger: ContainerRef,
              id: "hello",
              start: "top top",
              end: "+=2000",
              pin: true,
              scrub: 0.9,
          }
        })

 

Link to comment
Share on other sites

Hi,

 

You can use fastScrollEnd configuration option:

https://greensock.com/3-8#preventOverlapsAndFastScrollEnd

 

Be aware that the default value is 2500px/s so you might want to change it to something less than 2000:

fastScrollEnd Boolean | Number - if true, it will force the current ScrollTrigger's animation to completion if you leave its trigger area faster than a certain velocity (default 2500px/s). This helps avoid overlapping animations when the user scrolls quickly. You can specify a number for the minimum velocity, so fastScrollEnd: 3000 would only activate if the velocity exceeds 3000px/s. 

 

Hope this helps. If you're still having issues, please provide a minimal live sample to help you debug this.

 

Happy Tweening!!!

Link to comment
Share on other sites

You see when you click bottom with fastScrollend enabled you still see 1,2,3,4 come in sequentially. In my scenario if the user is coming from another page I don't want them to see that, I want it as if the bottom is the start of the page. Maybe the only solution is a page transition that only reveals the content after everything settles.

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