Tech Soul

Using ScrollTo to Go To Top Won't Repeat

Recommended Posts

Hi All, I am new to GSAP and inexperienced with javascript so please bear with me.

 

I am currently trying to make a Go To Top button that follows you down the page and when you click the button it brings you back to the top of the page and so far it has been working.... Unless you want to use it more than once. For some reason, I can't get it to play again after the first click.

I have been using timeLineMax and scrollTo to achieve this so far.

 

I have been trying something like this to fix it but no luck so if you can please point me in the right direction.

 

// GO TO TOP BUTTON
var goToTopTi = new TimelineMax({paused:true});
 
goToTopTi.to(window, 1, {scrollTo:{y:0}, ease:Power2.easeOut});
 
var isPressedGoToTop = 0;
document.querySelector("#goToTopButton").addEventListener("click", function(){
  
 if (isPressedGoToTop === 0) {
goToTopTi.play().timeScale(1);
isPressedGoToTop++;
 }
 else {
goToTopTi.repeat().timeScale(1);
 }
 
});
 
I also tried something similar with no "if" and just goToTopTi.play().timeScale(1); thinking it would simply play each time and no luck with that either.
Thanks in advance for all your help,
 
 
Tech Soul
 
P.S. I am not using jquery on this site for speed reasons in case your thinking the answer is a jquery thing

Share this post


Link to post
Share on other sites

Hi and welcome to the GreenSock forums,

 

Kind of hard to know for sure by just reading the code which is why we ask for simple CodePen demos.

Read this: http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

One thing that may be wrong is that if you already have run an animation that moves to y:0 you would have to restart() or do play(0) on that animation to run it again (not repeat). Calling play() on a finished animation does not automatically play it from the beginning.

  • Like 3

Share this post


Link to post
Share on other sites

I add a 'back to top' button to a lot of my sites and this is one of those effects that would be better with a single tween rather than a timeline. You won't have to worry about seeking and replaying a timeline. I'd just switch the action in your click function to a tween:

TweenLite.to(window, 1, {scrollTo:{y:0}, ease:Power2.easeInOut});

Hopefully that  helps.

 

Happy scrolling.

:)

  • Like 4

Share this post


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   0 members

    No registered users viewing this page.