jQuery Waypoints - multiple divs with same CLASS

Question

I have followed this tutorial: http://spin.atomicobject.com/2015/05/31/scroll-anmiation-css-waypoints/ successfully. I would like to apply the fadein on almost every element on the page. This means using this jQuery method that I would ned to create separate Classes for each element and duplicate the code, because otherwise every element with the same class currently fades in with the first Waypoint only.

Here is what I had:

// hide our element on page load
$('.fade-in').css('opacity', 0);

$('.fade-in').waypoint(function() {
$('.fade-in').addClass('fadeInUp');
}, { offset: '95%' });

By following this page, I tried to adapt it to have:

But I couldn't get it to work...any ideas please? (My Jquery could well be a bit off)

// hide our element on page load
$('.fade-in').css('opacity', 0);

var sticky = [];
$('.fade-in').each(function(idx){
sticky[idx] = new Waypoint.Sticky({ element: this });
$({element: this}).addClass('fadeInUp');
});

I'm also not sure how to add in the offset part.

Very many thanks

Answer 1

I am not sure i can follow your code above, but i think i understand what you are trying to achieve and i did something similar.

Use waypoints to add a class to the elements and have CSS handle the transition or animation.

This assumes you are using the jquery version of waypoints.

site.js

$(document).ready(function(){
    //set a waypoint for all the page parts on the page
    var ppWaypoint = $('.pp').waypoint(function(direction) {
        //check the direction
        if(direction == 'down') {
            //add the class to start the animation
            $(this.element).addClass('show');
            //then destroy this waypoint, we don't need it anymore
            this.destroy();
        }
    }, {
        //Set the offset
        offset: '80%'
    });
});

Your CSS can do whatever you like really, let's assume you just want to fade in the elements

style.css

.pp {
    transition-property: opacity;
    transition-duration: 0.8s;
    opacity: 0;
}
.pp.show {
    opacity: 1;
}

The CSS is pretty simple here; just have the opacity of the element set to 0 by default, and when the class of show is added, the opacity is changed to 1. The transition property and duration will make this happen nice and smooth.

For something a little cooler, you could make it slide up as well as fade in, just by changing your CSS a little;

.pp {
  transition-property: opacity, transform;
  transition-duration: 0.8s;
  opacity: 0;
  transform: translateY(5px);
}
.pp.show {
  transform: translateY(0px);
  opacity: 1;
}

All i have done here is add the transform translateY property to handle the movement up.

I have left out all the extra browser CSS definitions, but you would want to include them for sure.

Hope this helps!