Jump to content
Search Community

ScrollTo Plugin and ScrollMagic

Bratua 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

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

  • 3 months later...

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