CODEWITHSUNDEEP
javascriptjqueryshopify-liquid
Sam S
Sam S

Reputation: 11

Bug in javascript code for website transitions on scroll

Below is the js code which is running various animations on a webpage. As you scroll there is 4 text/picture sections that transition onto the page when a trigger point is hit.

$(document).ready(function() {
  var reapplyAnimation = function(element, animationClass) {

    void element.offsetWidth;

    $(element).addClass(animationClass);
  };

  $('.blob').each(function() {
    var blobElement = this;
    var animated = false;
    var section = $(blobElement).closest('.custom-image-text-section');
    $(section).addClass('hidden-on-load');
    
    new Waypoint({
      element: blobElement,
      handler: function(direction) {
        if (direction == 'down' && !animated) {
          
          $(section).removeClass('hidden-on-load');
          reapplyAnimation(blobElement, 'animated-fade-rotate');
          
          var relatedImage = $(blobElement).closest('.custom-image-text-section').find('.image-container img')[0];
          $(section).removeClass('hidden-on-load');
          reapplyAnimation(relatedImage, 'animated-slide-rotate');

          var textContainer = $(blobElement).closest('.custom-image-text-section').find('#text-container')[0];
          $(section).removeClass('hidden-on-load');
          reapplyAnimation(textContainer, 'animated-fade-in-slide-in-right');

          animated = true;
          this.destroy();
        }
      },
      offset: '45%' // Trigger point
    });
  });
});

It has been through many iterations so far to make the animation smooth and fade in from opacity 0 to 1 without firsth flashing (hence void element.offsetWidth to load the page again). At the moment on scroll only the first section correctly appears, the other three don't appear at all.

Upvotes: 0

Views: 35

Answers (0)

Related Questions