Jump to content
Search Community

Scroll to div on mouse scroll up/down

tun712 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


Thanks, finished project with this help.


@Mikel vertical scroll  Just little problem if down scroll occurs on last slide it scrolls in reverse direction at once.


Once I posted my Tween question to daniweb and got suggestion to post it on GreenSock Forum. With uncertainty about reply I started posting questions on GreenSock Forum.  And it's working well.


These two Forums are really really very helpful ?

Link to comment
Share on other sites

  • 2 months later...
  • 1 month later...
  • 5 months later...
On 4/10/2019 at 12:31 PM, mikel said:

Hi @tun712,


I really do not understand your intentions.
What should happen to the elements '.pane'?


Just for fun - maybe it fits into your concept - here's a forked version of @Shaun Gorneau`s smart version 'pseudo-window' and scroll:






Happy tweening ...


Hey, a quick question.. in the js file where the $(window).scroll() defines the movement of the scroll.. does the document height then effect the speed at which the slides load? Copying and pasting this code works perfect but I have obviously changed some code around with certain style attributes like position and top distances, and now find that the slide appears slowly(changing the duration in gsap doesn't work). I would appreciate any help!

Link to comment
Share on other sites

7 minutes ago, mikel said:

Hey @tallulahh,


Welcome to the GreenSock Forum.

Then go back to 'start' and check the desired effect with every change.

Without seeing the case live, it is difficult to give advice.


Happy tweening ...


Hey! Thanks for such a quick reply.. I have just loaded it onto codepen if you could take a look that would be amazing!

See the Pen PoqOqqz by tallulahh (@tallulahh) on CodePen


To clarify, the rotation speed of the ".slide" has become slower - it could be that i need to clarify more values in the gsap code. My intention is for the 3 slides to start rotating onto the screen so that they appear just after the home screen(".hero"), once it has rotated through the 3 slides I want the timeline to stop essentially and the ".gallery-section" to then come on screen. Any advice would be appreciated and thanks in advance!


Link to comment
Share on other sites

1 hour ago, tallulahh said:

I have just loaded it onto codepen if you could take a look that would be amazing!

Thanks for the demo, but there's a lot of content in that pen. Please strip everything that is not essential to recreating the issue that you're facing. It makes it much easier for us to see the issue and help you :) As it is, I have no idea what 3 slides you're talking about.

Link to comment
Share on other sites

I do appreciate that. All i want to know is if the document length is higher the following code is effected

$(window).scroll(function() {
    var scrollTop = $(window).scrollTop();
    var docHeight = $(document).height();
    var winHeight = $(window).height();
    if (scrollTop >= 0) {
      t1.progress(scrollTop / (docHeight - winHeight));


Link to comment
Share on other sites

  • 6 months later...
9 minutes ago, Mustafeez said:

is it possible to adding fade-in and fade-out effect while jumping to divs on scrolling?

Most likely, but your question is unclear. I recommend that you create a new thread asking about what you're trying to do and include a minimal demo of what you've tried. Then we'll help as much as we're able to :) 


Link to comment
Share on other sites

  • 6 months later...

Hi @mikel ,

i need a little help with this scrolling example.

i am having multiple sections before and after this scrolling slides section in my website

if i put any sections before this scrolling slides section is not working perfectly.

here is my example can you help me with this?

Thanks in advance.

See the Pen jOVdbeN by shaharyarramzan (@shaharyarramzan) on CodePen


Link to comment
Share on other sites

Hey @Shaharyar Ramzan and welcome to the GreenSock forums.


First off, you're using a super old version of GSAP. We highly recommend GSAP 3 which has a smaller file size, a sleeker API, and a bunch of new features. It's easy to upgrade


Second, we don't support or recommend ScrollMagic. Instead we highly recommend the official scroll plugin: ScrollTrigger! It's better in every way.


Third, we don't officially support scroll-jacking like what you're trying to do. For more info see this thread:


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