Rollout animations combined with snap.js
I often use wow.js or waypoints.js to animate elements as the page scrolls.
For the current project, I used snap.js to create a menu drawer. When using snap.js, you split 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 may be wrong, but I think the reason neither of the two libraries work is because I am scrolling inside #content instead of html, body. I tried to manipulate libraries but it didn't work out well enough.
I want to keep snap.js ...
Has anyone faced the same problem or someone who might have a solution? Thanks in advance!
source to share
Using Waypoints 4.0.0 I was able to use waypoints in combination with the snap.js library.
Set the waypoint context option for 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 is the ID of the DIV snap-in file.
source to share