Have two objects animate, one after the other, when scrolled using jQuery

Question

I have two objects that I want to fade-in when scrolled past, which works fine using the code below, but what I want is for the first object .cta-first to fade-in as it currently does, but then for the second object .cta-second to fade-in after the first.

I don't mind if the second object fades-in once the first object is at opacity: 1, or after a short time (ie. 1 sec). Both objects are on the same line so will be scrolled to at the same time.

If someone could show me how this can be done using the code below I'd really appreciate it, thanks.

$(document).ready(function () {
  $(window).scroll(function () {
    var bottom_of_window = $(window).scrollTop() + $(window).height();

    $('.cta-first').each(function () {
      var bottom_of_object = $(this).offset().top + $(this).outerHeight();
      if (bottom_of_window > bottom_of_object) {
        $(this).animate({
          'opacity': '1'
        }, 2000);
      }
    });

    $('.cta-second').each(function () {
      var bottom_of_object = $(this).offset().top + $(this).outerHeight();
      if (bottom_of_window > bottom_of_object) {
        $(this).animate({
          'opacity': '1'
        }, 2000);
      }
    });

  });
});

Below is the HTML of the objects targeted.

<section class="sidebar">

  <div class="sidebar-module">
    <a href="/contact"><span class="cta-first">This text</span><span class="cta-second">That text</span></a>
  </div>

</section>

UPDATE

So I have edited the code suggested by @pdoherty926, which now looks as below. It works fine if I reload the page if the objects are in view - they fadein one after the other, but if I'm at the top of the page when it reloads and scroll down, only .cta-first appears, opacity: 1 is not being applied to the second.

Can anyone see why this is happening? Thanks.

Just to add, the issue is on Chrome and Safari desktop browsers, it's working fine on Safari iOS.

$(document).ready(function () {
  $(window).scroll(function () {

    var bottom_of_window = $(window).scrollTop() + $(window).height();

    $('.cta-first').each(function () {
      var bottom_of_object = $(this).offset().top + $(this).outerHeight();
      if (bottom_of_window > bottom_of_object) {
        $.when($('.cta-first').animate({
          opacity: 1
          }, 2000))
          .then(function () {
            $('.cta-second').animate({
            opacity: 1
          }, 2000);
        });
      }
    });

  });
});

Answer 1

You can use jQuery's Promise API:

$(document).ready(function () {
    $(window).scroll(function () {

        var bottom_of_window = $(window).scrollTop() + $(window).height();
        var bottom_of_object = $('.cta-first').offset().top + $('.cta-first').outerHeight();

        if (bottom_of_window > bottom_of_object) {

            // stop and do not complete animations on both elements
            $('.cta-first, .cta-second').stop(true, false);

            $.when($('.cta-first').stop(true, true, false).animate({
              opacity: 1
            }, 2000))
            .then(function () {
                $('.cta-second').animate({
                    opacity: 1
                }, 2000);
            });
        }
    });
});

Fiddle

Answer 2

You could use the callback of the fadeIn() function to start animation on the second object.

Example:

  $('.cta-first').each(function () {
      var bottom_of_object = $(this).offset().top + $(this).outerHeight();
      if (bottom_of_window > bottom_of_object) {
        $(this).fadeIn(2000, function () {
           //start animating the second item here.
        });
      }
    });

The problem is that you are looping through each of the classes, so you would have to restructure the way you are targeting the second object in comparison to the first. Would need to see your html for that.

EDIT: Based on the HTML you posted, can I assume you only have 1 cta-first & 1 cta-second item?

    $(document).on('scroll','.sidebar-module', function(){
      var bottom_of_object = $('.cta-first').offset().top + $(.cta-first).outerHeight();
      if (bottom_of_window > bottom_of_object) {
        $('.cta-first').fadeIn(2000, function () {
           //this gets executed when the first one is complete:
           $('.cta-second').fadeIn(2000, function() {
               //complete event of the second fadeIn in case you want to do something here.
           });
        });
      }
    });

Note: I haven't tested this and it was written in a rush :) But it should give you an idea on how to use it.