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
});
});
}
});