Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – Section not hidden before css/javascript transition

I’m quite new to css/javascript/shopify liquid but I’m trying to bug fix a section of text that animates in when you scroll. At the moment as you scroll slowly the section can be seen before scrolling further when it will disappear and then the transition will happen correctly.

Below is my js code:

$(document).ready(function() {
  var reapplyAnimation = function(element, animationClass) {
    // Remove the class to reset the animation
    $(element).removeClass(animationClass);
    setTimeout(function() {
      // Re-add the class to trigger the animation
      $(element).addClass(animationClass);
    }, 50); // A slight delay ensures the class change is recognized
  };

  $('.blob').each(function() {
    var blobElement = this;
    new Waypoint({
      element: blobElement,
      handler: function(direction) {
        if (direction === 'down') {
          // Apply animations to the blob and image as before
          reapplyAnimation(blobElement, 'animated-fade-rotate');
          var relatedImage = $(blobElement).closest('.custom-image-text-section').find('.image-container img')[0];
          reapplyAnimation(relatedImage, 'animated-slide-rotate');

          // Now also target the text container for its animation
          var textContainer = $(blobElement).closest('.custom-image-text-section').find('#text-container')[0];
          reapplyAnimation(textContainer, 'animated-fade-in-slide-in-right');
        }
      },
      offset: '75%' // Trigger point
    });
  });
});

I’m able to set the opacity of the section to 0 in the css but I need a way for this script to then override that opacity and transition it to 1 over the course of the animation. Below is the keyframes animation that as far as I can see should be able to change the opacity but it doesn’t.

@keyframes fadeInSlideInRight {
    from {
        opacity: 0;
        transform: translateX(50%); /* Start from the right */
    }
    to {
        opacity: 1;
        transform: translateX(0); /* Slide to its original position */
    }
}

.animated-fade-in-slide-in-right {
  animation: fadeInSlideInRight 800ms ease-out forwards;
}

Please forgive me if I haven’t answered the question very well ,I’m only just getting used to the languages!

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0 

    $(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];
          $(relatedImage).removeClass('hidden-on-load');
          reapplyAnimation(relatedImage, 'animated-slide-rotate');

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

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

    This is the js code I am now using, 4 sections should be revealed as you scroll but only the first is at the moment.


  2. 0

    The keyframes does change the opacity from 0 to 1. It’s just that 800ms and ease-out are not long enough for you to see it. Try changing the speed to 3000ms and you will see.

    You can however set multiple animations with different timing effects such as ease-in on the same element.

    Based on your current design, one way could be like so:

    @keyframes slideInRight {
    from {
        transform: translateX(50%); /* Start from the right */
    }
    to {
        transform: translateX(0); /* Slide to its original position */
    }
}
@keyframes fadeInOpacity {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.animated-fade-in-slide-in-right {
    animation: slideInRight 800ms ease-out forwards, fadeInOpacity 800ms ease-in;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search