Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Teebo

How to reset ScrollPlugin scroll position

Go to solution Solved by Teebo,

Recommended Posts

Hi, I would like to reset the scroll position before navigating away from a page.
ScrollPlugin seems to remember the position from the previous page when on a new page.

I have a sample usage:

 

gsap.to(window, {
scrollTo: { y: this.triggers[i].trigger, autoKill: false },
overwrite: true,
duration: 1,
ease: 'expo.out'
});
Link to comment
Share on other sites

Do you still need help with? Your post is marked as the solution.

Link to comment
Share on other sites

@OSUblake I still need help, I thought I give it a try first before I ask.
But I'm still having a challenge

Link to comment
Share on other sites

Are you using any frameworks, like React, Vue, Next, Nuxt, etc, or just a normal web page? Some frameworks control the scroll position when you navigate.

Link to comment
Share on other sites

Yes I am using Angular

Link to comment
Share on other sites

@OSUblake Yes I have, I am beginning to think the issue is not with the ScrollPlugin.
Thanks a lot for assisting

Link to comment
Share on other sites

Yes, this seems to be a problem with several framework routers because they are setting the scroll position, but it's usually not clear how to control or override it.  

Link to comment
Share on other sites

  • 2 weeks later...
  • Solution

@OSUblake just a quick update, I have found a solution to my specific problem.
I have used the below:
ScrollTrigger.refresh();
This made the scroll(ScrollTrigger & ScrollPlugin) to adhere to the framework specific way of scrolling to the top on route change.
Thank you!

Link to comment
Share on other sites

Hi @Teebo

 

Where exactly did you call refresh, just in case other people have this problem? Thanks.

 

Link to comment
Share on other sites

@OSUblake for the case of Angular, I have the refresh in the OnInit hook method.

This is just after registering the plugins and before using the scrollTo plugin. A brief below.

ngOnInit() {

  gsap.registerPlugin(ScrollTrigger);
   gsap.registerPlugin(ScrollToPlugin);

  ScrollTrigger.refresh();   // refresh here

   ...


  gsap.to(window, {
   scrollTo: { y: this.triggers[i].trigger, autoKill: false },
   overwrite: true,
   duration: 1,
   ease: 'expo.out'
  
   ...
});

}



I am guessing the ScrollTrigger.refresh() worked for my case because the elements used with the scroll plugin are the triggers on my ScrollTrigger config.
 For context, It is for the implementation I was assisted with here: 

 

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