Waypoints + animate.css

JavaScript
1

I am trying to implement waypoints.js along with animate.css for a gallery. I found a example where each

  • tag has a class called animate-box:

    <li class="ranimate-box">

    In the css file the opacity of animate-box is set to 0:

    .js .animate-box {
  opacity: 0;
}

    and in the example they used the following js funtion to actually execute the animations:

        var contentWayPoint = function() {
        var i = 0;
        $('.animate-box').waypoint( function( direction ) {

            if( direction === 'down' && !$(this.element).hasClass('animated') ) {
                
                i++;

                $(this.element).addClass('item-animate');
                setTimeout(function(){

                    $('body .animate-box.item-animate').each(function(k){
                        var el = $(this);
                        setTimeout( function () {
                            el.addClass('fadeInUp animated');
                            el.removeClass('item-animate');
                        },  k * 200, 'easeInOutExpo' );
                    });
                    
                }, 100);
                
            }

        } , { offset: '85%' } );
    };

contentWayPoint();

    But nothing is happening. Does anyone see what I am doing wrong? Thank you in advance

    • 2

    I assume ranimate-box was a type only here and not on your page?

    3

    Hi Paul. Yes absolutely that is a typo.

    4

    The JavaScript looks like jQuery code. Do you have jQuery installed on your page?

    5

    Hi Ronpat. Yes I have jQuery installed. Really not sure what I’m doing wrong

    6

    Any chance of a demo?

    My brain doesn’t start to work until I see the problem live :slight_smile:

    1 Like
    7

    Hi Paul thanks for the reaction. This is how it is now. I have given each li tag a certain delay (done in the database). But that is not handy as soon as more parts are added so where I am looking for is a function that trickers each li with a timeout in the function as shown above

    8

    I think that what you are trying to achieve is some kind of transition on each element as it enters the browser window at 85% from the top while the user is scrolling down. If that is the case, this won’t work because Waypoints must be “attached” on a different element than the one that is to be manipulated in some way. Maybe you need an entirely different JavaScript library than Waypoints, like http://scrollmagic.io/ or maybe I misunderstood the effect that you are trying to accomplish!

    9

    Yes, I’m not quite sure what effect you wanted because it seems to be working for me and the elements all fade and slide in as you scroll down which I assume is the effect that you were looking for?

    The list elements get faded in once and then the animated class is added to stop them doing it all the time I suspect.

    <li class="rij os-animation animated fadeInUp" data-os-animation="fadeInUp" data-os-animation-delay="1s" style="animation-delay: 1s;">
        	<form action="" method="post" name="onderdelen-formulier" id="onderdelen-formuliet">
   	    		<img src="/images/onderdeel_fotos/voetsteun-bedekking.jpg"> 
            	<h2>Voetsteun mat</h2>
            	<input name="bestellen-button" type="submit" value="Bestellen" class="btn btn-default btn-bestellen">
            </form>
        </li>
    10

    Hi Paul. Thanks for the responce. In the example I gave you the delays are there manually. Where in the example I found all elements that need to be animated have the same class (animate-box) and then they used a function as I wrote in the opening post to accomplisch the animations.

    This is the link to the example

    11

    That seems to be working unless I again misunderstand what you want?

    I think it best if you make a cut-down demo with only the relevant parts and then it will be easier to debug unless one of the JS experts here can spot an error with your code from what you have posted.

    12

    Hi Paul. Thanks again for the reply. I will cut down the part and will come back.

    13

    Hi Paul I made a cut-down demo. But for some reason I sill cant get the animation to happen. Here you find the cutdown html page. For test purpose I have added just the files for animation to happen as well as inline style. I realy do hope that you see where I am going wrong.

    Thank you in advance

    14

    HI,

    I think you need to change this:

    $(this.element).addClass('item-animate');

    to this:

    $(this).addClass('item-animate');

    That seems to make it work for me.

    15

    Hi Paul. Thanks for the reply and sollution, because that was indeed the problem. Why is the this.element working in their template and wasn’t it working in mine?

    16

    I think we’d need to see where you copied it from but you’d need someone like @Paul_Wilkins to explain it properly.:slight_smile:

    17

    That this can be different depending on where and how it’s used doesn’t help any. At least not for me.

    Even this MDN article which looks to be thorough and accurate is a chore for me to digest.

    The main takeaway for me is “it depends on scope”

    18

    SitePoint has some good articles on the this keyword:

    1 Like
    19

    This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.