Jump to content
Search Community

How can I make a transition where the scroll moves from the beginning to the end with a parameterizable duration?

yeisonvelez11 test
Moderator Tag

Go to solution Solved by akapowl,

Recommended Posts

I am using the gsap libraries, and I want to know what is the best way to make a transition manipulating the scrollbar, for example I would like to make the scrollbar move from the beginning to the end and that this lasts for example 10 seconds.

I did something with jquery but since I'm using gsap, I don't think it's the most optimal.

 

//scroll to #final with duration of 10 seconds
  $('html, body').animate({
    scrollTop: $("#final").offset().top
  }, 10000, (data)=>{
    console.log(data)
  });
  //stop my animation after 3 seconds
  setTimeout(()=>{
    //$('html, body').stop();
  },3000)
<!--GSAP LIBRARYS-->
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js?r=5426'> 
 </script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ScrollTrigger.min.js?v=3.3.0-3'></script>



<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="height500vh"></div>
<div id="final">final</div>

 

how can I do it?

 

Link to comment
Share on other sites

@akapowl

Thank you very much, seeing the example there are two things that I do not know how to do and I would appreciate it if you would help me. I want to move the scrollbar to the bottom of the page with a specified duration.

In the example it moves to the position of another object. I also want to know, how to stop this transition at some point, for example after 3 seconds

Link to comment
Share on other sites

  • 2 weeks later...

 

You would have to apply some custom logic to it. 

 

You could get the height of the target element, and use the negative value of that as the offsetY in the scrollTo-tween.

 

See the Pen 8723229de5d369a0e0eca5f5953a0299 by akapowl (@akapowl) on CodePen

 

 

 

If you wanted the bottom of that element to stop at the bottom of the page, take the window-height into account.

 

See the Pen 8b305b772b18afc2358b8fe649f18b12 by akapowl (@akapowl) on CodePen

 

  • Like 3
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...