tri.truong

Auto Scroll Content top to Bottom Transition

Recommended Posts

Hi @tri.truong,

 

This is an option, a bit tricky

 

 

Happy tweening ...

Mikel

 

 

  • Like 4
  • Thanks 1

Share this post


Link to post
Share on other sites

Hello @tri.truong and Welcome to the GreenSock Forum!

 

I couldn't load your website link in Firefox on Windows 10.

 

But GSAP does have a auto scroll plugin called ScrollToPlugin.

 

https://greensock.com/docs/Plugins/ScrollToPlugin

 

It allows you to do the following

  • To scroll the window to a particular position
  • To scroll to the element with the ID "#someID"
  • To tween the content of a div
  • To scroll when define an x (translateX) or y (translateY) value or both

Some codepens of this:

 

 

And this:

 

 

There is also the GSAP tweenTo() method

 

tweenTo()  https://greensock.com/docs/TimelineMax/tweenTo()

  • .tweenTo( position:*, vars:Object )

    Creates a linear tween that essentially scrubs the playhead to a particular time or label and then stops.

If your still having issues please create a reduced codepen demo example so we can test your code live.

 

 

Happy Tweening! :)

 

  • Like 4
  • Thanks 1

Share this post


Link to post
Share on other sites

Hi Mikel
I'm use TweenMax auto scroll and it's working very good, but when i can't control scrollbar, as we have seen, they have custom scrollbar and it scroll with content, and we can controll it, when we scroll mouse, content will be scroll to position we scroll.
That's great , if you help me!
Thank for all

Share this post


Link to post
Share on other sites

Hi, Have nice day !
First thing for me thank you
I'm create style for scrollbar, but my mind is I can't control scroll mouse whell and click to scroll. As you see, In Antoni.de , they use disable scroll (over-flow:hidden), and instead they use event jquery to do this. And i have some problem of this. If you can help me. 
Remove scrollbar (Overflow:hidden)
Auto scroll content
Control scroll by mouse (mouse-whell + keep mouse and move)

Share this post


Link to post
Share on other sites

Hi @tri.truong,


I do not understand your your question / your intention.
Please create a CodePen to show what you mean and where it is stuck.

 

Best regards

Mikel

  • Like 1

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.