Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Kingsley88

ScrollTo Plugin and ScrollMagic

Recommended Posts

Good day lads. I have a pressing question and I am hoping this is the right place to ask. Can anyone direct me on the general approach towards achieving scrolling like these on the following sites - http://fantasy.co/ and https://www.ramotion.com/. Generally what I want to know is how to listen for the onScroll event and scroll to an anchor or an element on the page such as can be seen from those sites. I've tried searching online but all the tutorials seem to be doing this on click of an anchor link whereas I want to achieve this on scroll. Anyone able to help?

Link to post
Share on other sites

We don't have any tools that really do that directly -- detecting scroll direction and triggering appropriate animations.

However, this demo from @mikel that started with @Chrysto and then got tweaked a bit by @OSUblake looks like it has the basic functionality in there:

See the Pen vJNRPQ?editors=0010 by mikeK (@mikeK) on CodePen

 

 

link to original post: 

 

  • Like 4
Link to post
Share on other sites

Hi @Kingsley88,

I'm just starting my GSAP journey with this reply.

I hope this pen could also help you. It was forked from Gray Ghost and I copied the mouse wheel scroll from @Sahil.

I just added this code which still I don't fully understand to make the snap section thing from Sahil's pen.

I also don't know which one is better cause sometimes when I scroll I saw some glitch/jitter thingy.
 

var $navs = $('.anchor-nav a');

window.addEventListener("wheel", onWheel);

function onWheel(event) {
  event.preventDefault();

  var normalized;  
  var delta = event.wheelDelta;
  var scroll = (window.pageXOffset || document.scrollLeft) - (document.clientLeft || 0) || 0;
  
  if (delta) {
    normalized = (delta % 120) == 0 ? delta / 120 : delta / 12;
  } else {
    delta = event.deltaY || event.detail || 0;
    normalized = -(delta % 3 ? delta * 10 : delta / 3);
  }

  var currentIndex = $navs.index($('.active'));
  var newIndex;
  newIndex = normalized > 0 ? currentIndex + 1 : currentIndex - 1;

  if(newIndex >=0 && newIndex < $navs.length){
    $navs.eq(newIndex)[0].click()
  }
  
}


 

See the Pen pLmPMX by miksv (@miksv) on CodePen

 

Link to post
Share on other sites

Although some of the prior examples look more robust here's an example from a discussion awhile back specifically using Scroll Majic and Scroll To plugin.

 

See the Pen NYVVvy by Visual-Q (@Visual-Q) on CodePen

 

 

  • Like 1
Link to post
Share on other sites

Hi @Visual-Q,

Thank you so much for this. It made more sense to me cleaner and less.

 

@Visual-Q, I wonder why it snaps to a couple of section when I overscroll the mouse wheel.

 

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

×