Jump to content
Search Community

Auto Scroll Content top to Bottom Transition

tri.truong test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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:

 

See the Pen LkOrKY by GreenSock (@GreenSock) on CodePen

 

And this:

 

See the Pen AsLfc by jonathan (@jonathan) on CodePen

 

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
Link to comment
Share on other sites

  • 2 weeks later...

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

Link to comment
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)

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...