Teebo Posted September 16, 2021 Share Posted September 16, 2021 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 More sharing options...
OSUblake Posted September 16, 2021 Share Posted September 16, 2021 Do you still need help with? Your post is marked as the solution. Link to comment Share on other sites More sharing options...
Teebo Posted September 16, 2021 Author Share Posted September 16, 2021 @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 More sharing options...
OSUblake Posted September 16, 2021 Share Posted September 16, 2021 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 More sharing options...
Teebo Posted September 16, 2021 Author Share Posted September 16, 2021 Yes I am using Angular Link to comment Share on other sites More sharing options...
OSUblake Posted September 16, 2021 Share Posted September 16, 2021 Have you tried this? https://angular.io/api/router/ExtraOptions#scrollPositionRestoration Link to comment Share on other sites More sharing options...
Teebo Posted September 16, 2021 Author Share Posted September 16, 2021 @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 More sharing options...
OSUblake Posted September 16, 2021 Share Posted September 16, 2021 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 More sharing options...
Solution Teebo Posted September 27, 2021 Author Solution Share Posted September 27, 2021 @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 More sharing options...
OSUblake Posted September 27, 2021 Share Posted September 27, 2021 Hi @Teebo Where exactly did you call refresh, just in case other people have this problem? Thanks. Link to comment Share on other sites More sharing options...
Teebo Posted September 27, 2021 Author Share Posted September 27, 2021 @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: 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now