Hey...
I can't create a demo for this problem cause in my local version every things are fine but in my online version gallery section messed up
when I scroll from the top of the site this problem will happened ( image )
but when I refresh page or resize page everything gets fine again .
this is the cod of the section that don't do the job
// some pic
window.addEventListener('load', function() {
ScrollTrigger.saveStyles("#somePic,#imgMain ");
const somePic = document.querySelector('#somePic');
const imgmain = somePic.querySelector('#imgMain');
gsap.fromTo(imgmain,1,{scaleX:3.3, scaleY:3.3,y:100 },{scaleX:1, scaleY:1,x:0,y:0, scrollTrigger:{
trigger:somePic,
start:'top top',
end:'bottom+=1500 top',
pin:true,
scrub: 1,
markers:true
}});
});
Edit: I realize that there is another part effecting on this galleryImg and that is three moving img before this part .... is it ScrollTrigger Refresh effect?
$(".collection").each(function() {
var tl = gsap.timeline();
var miniPic = $(this).find(".mini-pic");
var miniPicDiv = $(this).find(".mini-pic-move");
var tl2 = gsap.timeline();
tl2.to(miniPicDiv,{ y:50, scrollTrigger:{
trigger:this,
start:'top center',
end:'bottom+=500 center',
scrub: 2
}});
tl.to(miniPic,{scale:1.2 ,scrollTrigger:{
trigger:this,
start:'top center',
end:'bottom+=500 center',
scrub: 1
}});
})
at the end Sorry For My Bad English