Specific animation does not play on page refresh Chrome Mobile

[theApprentice]

Hello there,

 

i have a homepage https://staging8.texpack.it/ that has some animations, one kind is a group of which on under 1200px screens makes "fade in moving up some" containers, above 1200px them "come in" from left or right according to a class. These animations run only one time on Chrome mobile, if i come back or refresh the home, only the animations outside the ScrollTrigger.matchMedia({ .. }) work properly.

 

Thank you in advance for your help!

 

Here is the js that manages the responsive functions:

ScrollTrigger.saveStyles('.matchMedia');
  ScrollTrigger.refresh();
  ScrollTrigger.matchMedia({
    '(max-width: 1199px)': function(){

      // WIDGET BOX IN BOX
      gsap.utils.toArray('.wbib-trigger:not(.no-gsap)').forEach(function(section) {
        let target = section.querySelectorAll('.from-left, .from-right');
        gsap.from(target, {
        scrollTrigger: {
          trigger: section,
          end: '+=45%',
          scrub: 1.2,
        },
          opacity: 0,
          y: 100,
          duration: 1
        });
      });

    },
    '(min-width: 1200px)': function() {

      // MAIN NAVIGATION
      var origin = '';
      $('.menu-item-has-children').mouseenter(function(event) {
        origin = $(this).children('a').html();
        $(this).addClass('active').find('.sub-menu').addClass('active');
      });

      $('.menu-item-has-children').mouseleave(function(event) {
        $(this).removeClass('active').find('.sub-menu').removeClass('active');
      });


      $('.sub-menu').mouseenter(function(event) {
        $(this).parents('li').addClass('active');
      });

      $('.sub-menu').mouseleave(function(event) {
        if (event.relatedTarget.innerHTML != origin) {
          $(this).removeClass('active').parent('li').removeClass('active');
        }
      });

      // WIDGET BOX ON BOX
      gsap.utils.toArray('.wbib-trigger:not(.no-gsap)').forEach(function(section) {
        let target = section.querySelectorAll('.from-left');
        gsap.from(target, {
        scrollTrigger: {
          trigger: section,
          end: '+=45%',
          scrub: 1.2,
        },
          opacity: 0,
          x: -100,
          duration: 1
        });
      });

      gsap.utils.toArray('.wbib-trigger:not(.no-gsap)').forEach(function(section) {
        let target = section.querySelectorAll('.from-right');
        gsap.from(target, {
        scrollTrigger: {
          trigger: section,
          end: '+=45%',
          scrub: 1.2,
        },
          opacity: 0,
          x: 100,
          duration: 1
        });
      });

    }

  });

 

[OSUblake]

Welcome the forums @theApprentice

 

If you're using version 3.9 of GSAP, there is a known regression.

 

 

Try adding the lazy: false to your from tweens or update to the latest version of GSAP, 3.10.1.

 

[theApprentice]

thank you