I'm trying to figure out how i can make the div to slide out and slide in back when the offset is met using jQuery waypoint, I'm also using dan eden CSS animation. This is the code i have made but the problem is when i scroll back up the div won't slide In back even though i set the offset to 100%
JAVASCRIPT
$(".slide_copy1").waypoint(function(){
$(this).addClass(" slideInLeft").removeClass("slideOutRight");
},{offset:'100%'})
$(".slide_copy1").waypoint(function(){
$(this).addClass("slideOutRight").removeClass("slideInLeft");
},{offset:'0%'})
UPDATED POST -
$(".slide_copy1").waypoint(function(){
$(this).addClass(" slideInLeft").removeClass("slideOutRight");
},{offset: '100%' function(){
$(this).addClass("slideOutRight").removeClass("slideInLeft");
}})
If you want to apply two different changes in both directions you need 4 waypoints; in this way you can 'define' the zone were the modification should take place. I've created a small Fiddle as an example, in this case the div become blue between 25% and 75% of the window height: http://jsfiddle.net/sandro_paganotti/mLAr2/
$("div").waypoint(function(){
$(this).addClass("blue").removeClass("red");
},{offset:'25%'});
$("div").waypoint(function(){
$(this).addClass("red").removeClass("blue");
},{offset:'24%'});
$("div").waypoint(function(){
$(this).addClass("blue").removeClass("red");
},{offset:'74%'});
$("div").waypoint(function(){
$(this).addClass("red").removeClass("blue");
},{offset:'75%'});