3

I often use wow.js or waypoints.js to animate elements while scrolling the page.

For a current project I used snap.js to create a menu drawer. When using snap.js you divide your page like this;

    <div class="snap-drawers" id="right">
        <div class="snap-drawer-right">
            <!-- Menu drawer -->
        </div>
    </div>

    <div class="snap-content" id="content">
            <!-- Page content -->
    </div>

I might be mistaken but I think the reason why none of the two libraries work is because I scroll inside the #content instead of html, body. I tried to manipulate the libraries but that didn't work out quite well.

I'd like to keep snap.js...

Anyone encountered the same issue or someone who might have a solution? Thanks in advance!

essepikker
  • 159
  • 1
  • 8

1 Answers1

0

Using Waypoints 4.0.0, I was able to use waypoints in conjunction with the snap.js library.

Set the context option of the Waypoint to the snap.js content element. As an example:

jQuery('section').waypoint({ offset: '50%', handler: waypoint_reached, context: $("#snap_content")[0] } );

waypoint_reached is the name of my function handler, and snap_content was the ID of the snap content DIV.

mroselli
  • 151
  • 5